So you got your fancy responsive site up. It looks great on your iPad, iPhone, Galaxy Note, Xperia Go, refrigerator and Tamagotchi. But have you given a thought on it’s mobile performance? You may have a really cool responsive site, but if it’s 46.mb large and has 3180 HTTP-requests you will make your mobile visitors cry. And if they pay their phone bill per megabyte, probably homeless too.
But, even if your users have flatrate and would love to download a 46mb large site, studies show that 74% of mobile web users will leave a site if it takes more than 5 seconds to load. This mean, we can’t just make our sites look pretty on mobile devices, we have to make them fast and small.
So, there’s a million and one ways to create fast sites. But I prefer this strategy:
Low effort, big impact.
Meaning, we don’t want to make huge complex changes to our code that makes the site load 0.0005s faster. We want things that are easy to do and has a high effect on performance. Let’s go over a few things that you can do to speed up your site.
1. Optimize your images
Images are the biggest villain in making your site ridiculously heavy. The average web page consist of over 1mb of images. And most often, this number doesn’t change when you visit the site on your phone.
So, what can we do?
Compressing your images can save you up to 80% of their file size, online tools like TinyPNG and Kraken does a really good job at this. And most of the popular CMS-systems has a feature/plugin for compressing.
Use a responsive image solution
It doesn’t make sense serving the same image on desktop and mobile. And since W3C’s Responsive Image Group is taking their time coming up with a standardized way to do it, a few other solutions have emerged.
Picturefill is one of the most used solutions for responsive images. The plugin uses a nested syntax with data-attributes and inline max-width attributes to serve certain images when the max-width criteria is met. The syntax may be a bit off putting, but I find it managable. If you’re working with WordPress, they have a great plugin for it, making it completely automated.
This is the basic syntax
<span data-picture data-alt="Image alt text"> <span data-src="small.jpg"> </span> <span data-src="medium.jpg" data-media="(min-width: 400px)"> </span> <span data-src="large.jpg" data-media="(min-width: 800px)"> </span> <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"> </span> <!-- Non JS fallback--> <noscript> <img src="external/imgs/small.jpg" alt="Image alt text"> </noscript> </span>
HiSRC is a jQuery plugin that enables you to create low-, medium- and high-resolution versions of an image, and the script will show the appropriate one based on Retina-readiness and network speed.
A twist on the old school LOWSRC IMG attribute, which would render a lower file size image first while a larger file size image would appears in its place later.
The syntax is somewhat similar to Picturefill, with data-attributes for each image and viewport width:
<div class="hisrc"> <img src="http://placehold.it/200x100.png" data-1x="http://placehold.it/400x200.png" data-2x="http://placehold.it/800x400.png"> <img src="http://placehold.it/200x100.png" data-1x="http://placehold.it/400x200.png" data-2x="http://placehold.it/800x400.png"> </div>
By combining your static images (such as background graphics, icons, logotypes etc.) into a sprite saves a lot of HTTP-requests and bandwidth, though it’s more difficult to maintain those images, so carefully plan what images your combining.
Usage of SVG images is a good way to maintain resolution independence and reduction of file size. Combined with Data URI they are quite awesome. But beware, recent studies show that Data URI’s are 6x slower than regular source linking.
2. Reduce HTTP-requests
We’ve already covered much of this in the earlier section about images, with sprites and Data URI’ .But we can still do more to reduce the HTTP-requests.
Combine/minify your scripts and styles
This is basic stuff. But combining minifying all your .CSS and .JS-files helps both file size and reduction of requests. Ideally you should only have one large .JS and .CSS-file. But somewhere around 2-3 of both are okay.
A good way to reduce HTTP-requests and images are not to load them until they’re inside the users viewport. Meaning, images will only load when the users scroll to them. There are a few ways to do this, some of the more popular plugins are Lazyload by Appelsiini, Unveil and Lazyload.js by Milo Palencia.
Icon fonts are a perfect way to create icon for your site. They are retina ready since they scale, they reduces the amount of HTTP-requests and are easy to style and manipulate. There are a number of free icon fonts online; Font Awesome, Fontello and IcoMoon. These will let you create your own customized icon font with a variety of icons available.
The implementation of the icon fonts vary a little bit, but the basic structure is like this:
@font-face font-family: 'Icons' src: url('font.eot') src: url('font.eot#iefix') format("embedded-opentype"), url('font.woff') format("woff"), url('font.ttf') format("truetype"), url('font.svg#font') format("svg") font-weight: normal font-style: normal [data-icon]:before font-family: 'Icons' content: attr(data-icon) speak: none font-weight: normal font-variant: normal text-transform: none line-height: 1 font-size: 1.7em
Gzip compression is an often overlooked optimization method that is potentially the single most effect optimization effort for a larger site with a lot of files. It’s also the most simple to implement. HTML5 Boilerplate has a really good .htaccess file that contains Gzip/Deflate and more goodie goodness.
4. Cache all the things!
It’s easy to forget the oh-so-important cache, if you use the cache smart it will have a great impact on the users experience. Like the Gzip/Deflate snippet, HTML5 Boilerplate also has a really good section on cache.