Skip to content
various-devices

Just a few of the devices I use to view websites on.

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:

  1. Reduce the file size of individual assets – ie. minimising code files and compressing images to be as small as possible without compromising quality.
  2. 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

sass-logoIf 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!

Read more about Sass.

JavaScript Minification

You can also save a lot of space by minifying your JavaScript files. There are plenty of handy online tools out there and I’ve been using JS Compress which lets you upload your source JavaScript from your development environment and then returns a minified version for you to include on your finished page.

If you’re really smart, you can also automate this process using Grunt and Gulp (which admittedly I still need to look into!).

Image Compression

responsive-web-designIt’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!

You can reduce file sizes further by using online tools such as Smush It and TinyPNG to strip out meta data from your images.

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

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.

Read more about Adaptive Images.

Coming up next time…

Next time, I’ll be talking about reducing file requests using icon fonts and tinkering with your .htaccess file to enable g-zipping and caching.

I’d love to hear what you think of these website optimisation tips! Give me a shout on Facebook or Twitter. Thanks for reading!

Related Blogs

#AskBo – Wise words from Stockport’s favourite web design hound

15th August 2019

Bo the web design hound knows quite a lot about websites, and what makes for a good online presence for small businesses. I usually take the credit for our joint efforts, but I thought it was about time I gave Bo his moment in the spotlight.

Read more

Improving my web development skills

1st August 2019

Earlier this year I chose to make a conscious effort to review how I write CSS and Javascript. Now I’m writing cleaner, more efficient code than ever before and making better websites as a result.

Read more
View all blogs