This is number four of our series on mobile webpage design. We have covered why it is important to focus on mobile design, the best way to design sites for mobile devices, and how to optimize your user interfaces for use on mobile. Now, let’s talk about how to deliver your page to mobile users, and make sure your page speed is up to par.
Why Mobile Page Speed Matters
Many internet users today still access the web on 3G only devices, meaning it takes longer to load a mobile page than one on a desktop or a 4G enabled device. This is bad news for slow sites. We know that users are much more likely to leave a mobile site that doesn’t load quickly. In fact, users are 53% more likely to leave a mobile site that takes longer than 3 seconds to load. 3G has a data transfer speed of around 200 kb/s, so in order for a page to load in under 3 seconds on a 3G connection, it will need to be under 600 kb in size. Unfortunately, a Google survey showed that over 70% of web pages are larger than 1000 kb in size. But fear not, we will show you how to reduce the size of your web page. If it cannot be reduced any further, we will show you how to optimize its delivery so that the important information shows up first.
Compression: It’s Not Just for Tools
The best thing you can do for your website is something called compression. Many of the slow sites Google surveyed could save over 250 kb just by compressing images and text. Compression is one of the simplest and most effective things you can do to increase your page speed.
Both images and text files can be compressed, but let’s start with the images. https://compressor.io/ is a great resource for compressing images. It can handle multiple file types, and you can choose between lossless and lossy compression. Lossy will work best for most situations and will provide a smaller file size. However, if you are compressing technical images or medial images, you may want to choose a lossless compression format.
Once you have compressed all of your site’s images, the next big step is the text files. Actually, text files can’t be compressed–at least not in the same way that images can. Text files on a website should already contain the smallest amount of information possible to render the webpage. So, you can’t really remove any additional information and still have a working site. However, there is a lot of data in human-readable text files that is not needed by web browsers. What text compression does is to remove all of the extra fluff that we human writers include to make our work legible to ourselves. Web browsers do not need spaces, extra lines, or tabs. So by removing these extra characters we can actually reduce the size of our text files. We recommend using http://codebeautify.org/text-minifier to do this.
Cache is King
The only things you don’t want to cache are elements that update regularly or automatically. Don’t cache news feeds, photo streams, social media streams, tag or category pages, etc. If you set these items to be cached, a visitor returning to your site will be served old content from the cache instead of what is actually on the site. This actually happens with everything that is cached. So make sure when you are making changes to your site that you clear your cache.
Step it up with a CDN (Content Delivery Network)
Do you have large pages with hundreds or even thousands of individual elements? Are you running an ecommerce site with multiple product images in high resolution? Is your hosting server slower than you would like? If you have answered yes to any of these questions, a CDN, or content delivery network may be what you are looking for.
For example, say your ecommerce shop page needs to load 50 different high res images of shoes, instead of having all of those images downloaded one at a time from your server, you split them up on a CDN. Now, those images can take advantage of parallel downloads. Instead of downloading them sequentially, your visitors can now download images simultaneously from multiple different sources. Depending on the number and size of your files, this could drastically improve your page load speed.
However there is is one drawback. Just like with a cache, these resources stored on a CDN are static. This means if you update info on your website, you must also update it with the CDN, otherwise your users could be served old content. Get more info at Amazon’s CDN page: https://aws.amazon.com/cloudfront/
Sometimes it Pays to be Lazy (loading)
Okay, so you’ve compressed all your files and setup your cache. Maybe you have even moved some of your resources out to a CDN. Don’t think you can stop there. Let’s go back to the example of an ecommerce store with a lot of product images. There may be 50 or so images on the page, but when a user loads the page they don’t immediately see all of them. This is especially true with mobile device’s smaller screen size. So why download them all at once?
This is what “lazy-loading” does. Instead of download every image on a page as soon as a user lands on it, you only download the images a user can see. The rest of the images are downloaded as they scroll into view. And the thing is, many of the images on a page may never even be download. A Nielsen poll shows that 77% of website visitors do not scroll. They find the content they are looking for and click it. Lazy-loading helps them find what they are looking for quicker and eliminates a lot of extraneous downloading. Which is both good for page speed and mobile data caps.
Above the Fold Content
If you have done everything listed above, your site should be pretty quick. But you can always do more. If you really want to get into super quick load times. I’m talking less than a second even on mobile devices. What you have to do is optimize your “above the fold” content.
The term “above the fold” is borrowed from print media. It refers to the portion of a newspaper that is literally above the fold. The term is used to designate the content that a reader first sees. Web designers have borrowed the notion and applied it to webpages. However, it generally means the same thing and refers to the content that first fills the screen when loading a web page before a user scrolls.
If you want pages that load in under a second, you will need to stop thinking about web pages as a single page, but instead two individual pages that make up the whole. What I mean is that you will need to treat above the fold content as it’s own page. You want to include all the files necessary to load above the fold content in the header. Also, these files should ONLY include what’s necessary to render the above the fold content. Anything else should be placed in the footer so it can be loaded afterwards. Doing this will give your users lightning fast page load times because what they are able to see will be rendered before anything else on the page. Learn more on Google help pages: https://developers.google.com/speed/docs/insights/rules
Your website will only be as fast as your server. A web server is really the end-all be-all when it comes to page load times. Even if you have everything on your page compressed, optimized, and cached; and you are using tricks like lazy loading or above the fold optimization, you could be hamstrung by your server.
Since, unless you are using a CDN, almost everything on your website will be hosted on your webserver, you want it to be as fast as possible. The best way to ensure that you have a fast web server is to use dedicated hardware. That means that your websites run on a physical machine either at your location, or somewhere else in the world. Dedicated hardware however can be quite expensive. This prompts many people to instead choose a shared hosting plan. A shared hosting plan is a managed server environment where you share resources with other hosts and websites. While cheaper that a dedicated host, this setup means that you are at the mercy of your neighbors. If someone else on your shared hosting server is crunching data, or transferring files, your sites will suffer the loss of resources.
A happy medium between these two extremes would be “virtual private servers” or VPS. This type of setup uses a shared environment but your account has a dedicated set of resources just like a dedicated hardware setup. Think of it like a virtual machine. For more information we recommend looking at: https://www.godaddy.com/hosting/vps-hosting
Seeing it in Action
Following these steps will ensure that your website is as fast as it can possibly be. And having a fast site will help you appeal to a larger audience, draw in more traffic, rank higher in Google search results and ultimately convert more customers. Don’t just take our work for it. Take a look at the numbers. They speak for themselves. We have used the methods mentioned about when developing our own site and as you can see by the images below we beat every one of out local competitors when it comes to page speed.
Not Sure if Your Site is Slow?
Following these steps will ensure that your website is as fast as it can possibly be. And having a fJust test it! Use Google’s tool over at: https://testmysite.thinkwithgoogle.com/ Put in your web address and hit go. If you are not happy with the results try applying some of the methods we just discussed. Otherwise give us a call, or request a free quote and we’ll do the work for you.
And If you think your sites fast now, stay tuned next week and we will blow your socks off when we talk about AMP (Accelerated Mobile Pages).