This blog post originally appeared on October 24, 2014. While still relevant, learn more about mobile website optimization in 2017.
With the rising number of people doing the majority of their surfing on mobile devices, providing a mobile web experience to your visitors is more important than ever.
It’s not enough to just have a mobile website, now you need to provide users with a great experience, regardless of device. If your mobile website doesn’t perform well, you will lose mobile users, bottom line.
Users want access to the content they are seeking, and quickly. Just like desktop users, mobile users want content now. If your site takes too long to load or is too hard to use, you can bet some users are moving on without a second look.
So, how do we prevent that from happening? I’m glad you asked because I have a list of 7 ways to improve the performance of your mobile website.
1. Minimize the Number of Server Requests
These are calls made to the server by the browser for the elements that a user sees and interacts with on a given page. Each element on the page that needs to be loaded creates a request to the server, but your server can only handle so many concurrent requests. When your page makes more than two requests to any server, the first two are met and every other requests waits in line until the request before it is completed.
Think about a line to buy tickets to a concert right before the doors open and there are only two ticket windows open to service the line. If we minimize the number of people waiting in line, we get into the concert faster. Or on the flip side, if we open more ticket windows, the line moves faster. A content delivery network, or CDN, acts like additional windows, but using a CDN is another blog post for another day.
The goal is to lower the number of request that are being made to your server so content loads faster.
2. Only Load Essential Content
What is essential content? Think about the elements of your site that are imperative. Is it your locations? Is it your phone number? Is it your social channels? These are all questions that you should be answering before deciding what the mobile experience is for you users.
With a desktop website we have a wider range of opportunities for putting content in front of our users than on a mobile device. This makes it even more important to consider what content is essential. If it isn’t essential don’t load it on the mobile site.
3. Combine Images into a Sprite
An image sprite is a single image that combines all of your images that are used as backgrounds or interactive elements such as buttons. Combining your images into a single sprite minimizes the number of server requests that are made for images because the sprite only has to be downloaded once but can be used over and over as many times as needed without having to make another request.
4. Combine/Minify Scripts and Stylesheets
When we talk about scripts and stylesheets we are talking about files that are external to the page being loaded. Those files are loaded into the browser dynamically and the size of those files can have a marked effect on how quickly your page loads. Removing unnecessary line breaks and spaces, also known as minifying, can help reduce the file size of these external files thus decreasing the time it takes for those files to load and be parsed by the browser.
5. Cache Page Elements
Every site has elements that appear on every page or each time the site loads, a logo is a perfect example. These types of elements, that are not going to change frequently, can and should be made cacheable to save on download time.
6. Enable Compression (on the server-side)
Another way to increase the performance of your mobile website is to enable compression on your server. Server-side compression allows you to compress your resources using gZip to reduce file sizes which equals faster page loading. An added benefit of using this type of compression is that it helps your server run more efficiently.
7. Minimize Third Party Content
Third party content can enhance your site and sometimes take it to the next level when used properly. There are a few caveats with this type of content that we need to be aware of. Third party content is usually best used on the desktop experience because often times it isn’t optimized for mobile browsers. This really boils down to a loss of overall control of your content, the way it looks, the way it loads and the experience visitors have.
There are countless ways to improve your mobile website, but these are just to give you an idea of why it’s important and how to improve it. Obviously some of these techniques are more technical than others and require the assistance of a developer or potentially your hosting provider. If you have questions or think that your mobile website could use some fine tuning, let’s chat and discuss the challenges you currently face.