4 Common Web Performance Pitfalls

It is no secret that web performance has a significant effect on conversion rates. This is especially true in the mobile world, where device and network speeds can vary greatly. Though installing the Mobify tag can help with this, as it uses desktop content to create your mobile site, it’s still difficult to figure out the best solutions to further increase your site performance.

In this post, we hope to provide you with best practices for web performance improvements by outlining some very common performance pitfalls and how to fix them. The best practices described here can be easy to overlook, but are important to consider, because they can drastically improve your site’s performance without a detrimental effect on the user experience. It is in any company’s best interest to ensure that their site is utilizing each of the strategies outlined below!

1. Minify files

What does this mean?

To minify your code means to remove all of the unnecessary spaces and characters in order to improve its performance.

Why is it necessary?

There are certain best practices in place when it comes to writing code. These include the proper use of tabbing and spacing as well as the inclusion of explanatory comments in order to make it understandable to human programmer eyes.

However, when it comes time to actually run the code, these spaces and comments no longer serve any purpose. The browser doesn’t need them, and it’s actually faster for the browser to process code without them, since they increase the overall file size.

The best way to visualize the effect of code minification is to compare minified and unminified code, as shown in the screenshots below. In this example, which shows the code for jQuery, the minified code file is 3X smaller than the unminified version:

This is unminified code

Fig. 1: This is unminified code. Note the line breaks, spacing, and comments (grey text) that are present.

This is minified code

Fig. 2: This is minified code. Note the significant effect of removing the cosmetic line breaks, spacing, and comments—dramatically decreasing file size.

How do I do it?

Luckily, there are tools that can do this for you! Minify Code is one such website, which allows you to input unminified code and it will automatically minify for you.

2. Decrease HTTP requests

What does this mean?

HTTP requests are what occur when your browser gets a file (such as a code file or an image) from a web server. Each separate file warrants its own HTTP request.

Why is it necessary?

The more HTTP requests your site has to make, the longer it will take to load. That is, if your site requires many different files, each one represents its own HTTP request and is compounding your site’s overall load time.

How do I do it?

One of the easiest ways to achieve this is to combine (or ‘concatenate’) your code files. In many cases, it isn’t necessary for code of the same language (e.g. JavaScript, CSS) to be in separate files – they can be combined into one file while maintaining all of the same functionality. The result? Your browser will only need to fetch one file instead of going back and forth to the web server for several different ones.

3. Optimize images for mobile

What does this mean?

Reducing the size and quality of images.

Why is it necessary?

Larger images yield larger file sizes, and HTTP requests for larger files take longer to complete. Since each individual file warrants its own HTTP request, these can add up. Loading large source images, only to downscale them via code to fit on-screen, is a waste of resources – instead, these source images should already be optimized to bypass the initial extended load time.

How do I do it?

Determine the largest dimension required and adjust your image so as not to exceed it. When saving an image file, compress the quality as much as possible (without negatively affecting its appearance) to further decrease the file size.

Mobify has an image resizing client which automatically completes these tasks and rewrites the image source with the URL of the optimized image.

4. Cache static assets

What does this mean?

Static assets are things like images and code which don’t change often. A cache can be conceptualized as storage to save static assets for future reuse.

Why is it necessary?

Caching allows for faster load times, because reading ‘remembered’ data from the cache is faster than fetching it from the server.

The first time a page is loaded, everything will need to be fetched from the server. However, many assets on the site, considered ‘static’ assets, do not change often; that is, it makes sense to ‘remember’ them for future reuse rather than have to re-fetch each time. This is where cache periods come in, which tell the browser how long it should ‘remember’ the data in the cache, allowing for improved page speed on subsequent visits.

Cache periods can vary vastly depending on the type of asset and how often it changes. They can range from a few minutes to over a year.

How do I do it?

There is a detailed article on HTTP cache headers on our Developer Blog, which can be found here.

We hope you found this post helpful in figuring out how to increase performance on your site. Please reach out to your Customer Success Manager at Mobify with any questions!

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in ecommerce so you can effectively engage your customers and drive revenue.

Related Articles