With web traffic on mobile phones continuing to rise (at the time of writing mobile and tablet traffic totals around 50% of traffic to the sites I work on) it’s important I ensure the websites I build look and perform great on phones as well as larger devices.
This means that they need to load super quick even when viewed by someone on a 3G connection. This year I’ve been spending a lot of time doing research into website optimisation techniques and I thought I’d share some of my findings here!
In general, web optimisation techniques tend to fall into two main categories:
- Reduce the file size of individual assets – ie. minimising code files and compressing images to be as small as possible without compromising quality.
- Reduce the number of files being requested on the server – ie. combining files where possible, for example merging all your style sheets into a single CSS file, turning background images into sprite sheets or using icon fonts.
In this first blog, I’ll be covering reducing file size and in part 2 I’ll talk about reducing requests!
CSS Minification using Sass
If you don’t already know, Sass allows you to work using source .scss files and compile them into an outputted CSS file. Since you never need to actually open the compiled CSS file you can compress it without needing to worry about the readability of the output.
To compress your outputted CSS file, instead of making your preprocessor watch your target folder for changes with the standard command…
sass --watch input:output
…if you add the extra command ‘–style compressed‘ to the end like this…
sass --watch input:output --style compressed
…the compiled CSS file will be outputted with all white space removed which can reduce the size of your CSS file by around half!
It’s common that images are by far the biggest files on your page and most likely to slow down your page load. Therefore it’s important to optimise images as much as possible without a noticeable loss of quality.
On a basic level, ensuring you save your images in the right format (jpg for photos, SVG’s for graphics and PNG’s for photos with transparent backgrounds is the first step. Also if using jpg’s it’s unlikely you need to save for web at higher than 80% quality which can save a fair bit of file size. And remember to only save out an image at the size it needs to be displayed at!
Images have long been a problem for responsive web design. An image that is high enough quality to look good on big screens will have a large file size which will take up a while to download on a mobile connection. Ideally you want to display an image of the relevant size and quality to suit the device your page is being viewed on. Until the HTML5 tag gets full approval (and cross browser support) we must rely on server side solutions such as…
Adaptive Images is a really cool PHP based tool which loads in images to your page depending on the width of the device being used to view your website. Therefore people viewing your page on their large retina Mac screens (and likely using a speedy broadband connection) get the full size big image and people on their phone get a small version of the same image which will load quickly and be significantly smaller in file size.
It also only generates the smaller images when someone actually tries to view them so your server only stores the extra images as required.