Bo Framework Logo

Digital Agency Hire

Even More Website Optimisation Tips

20th July 2015

Minified CSS code

In my previous Website Optimisation Tips blog, I talked about methods of reducing the size of individual files to make your website load faster. In this blog I want to discuss a few ways of reducing the number of files used on your website as well as adding an extra bit of compression using your .htaccess file.

Combine your files

Your website will load faster and more efficiently the less server requests it needs to make so it make sense to reduce the number of files required to run the page. Combining all of your common file types into a single file will do just that.

If you’re using a third party tool on your site (such as personal favourite BX-Slider), it will come with it’s own Javascript and CSS files. Likewise if you’ve generated a webfont using a service such as Font Squirrel, it will also come with it’s own css file. You should aim to combine these files into your main stylesheet and Javascript file.

For CSS, I typically keep everything organised with Sass using individual .scss files for each element (in this case ‘bx-slider.scss’ and ‘fonts.scss’) which are then compiled into a single minified master stylesheet which gets cached the first time the visitors lands on the site.

The same goes for Javascript, combining multiple files into a single minified master file organised into individual functions.

Icon fonts

Icomoon logoI’ve gone a bit mad for vector graphics over the past year or so. Not only are SVG images typically smaller in file size than PNG alternatives, they also remain crisp and smooth whatever size you set them to.

Icon fonts are particularly useful as they allow you to combine all of your vector icon graphics into a single file. Each icon can then be called on when required by adding a specific class to your HTML tags.

To create an icon font, first you need to save out any icons you need as SVG’s. You can then upload each graphic to the free ICO Moon tool to create an icon font and download a handy zip file with all the instructions you need to integrate it into your website.

Once you have the font prepared you can then control the size, colour and hover states of any icons easily using CSS.

As an additional benefit, using icon fonts is also significantly easier to manage than using images as you don’t need to save out several different coloured versions of a single icon, which is particularly annoying for dealing with hover states, and if you (or your client) decide to change the colour of an icon you can do it in about 2 seconds using CSS instead of having to edit each icon in Illustrator or Photoshop and save it out again.

Since I originally wrote this, there has been a lot of support for using inline SVG’s as an alternative to icon fonts which you can read about on CSS Tricks which I might try out on my next project.

Gzipping

OK, so you’ve combined your common files, minified your code, optimised your images and you’re ready to go live!

There’s an extra way you can compress your files even more to make your site load even quicker and that’s by gzipping them using you .htaccess file.

You do this by adding a gzip module to your .htaccess file which looks like this:

<ifModule mod_gzip.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
AddType image/svg+xml svg svgz
</ifModule>

Note that each different file type used by the site is listed and set to deflate.

Find out more about gzip

Setting Cache Expiry Dates in .htaccess

If you’re reading this you’ll already know that caching is when your web browser stores files of a visited web page so it can load the page quicker next time it needs that file again. You’ll also probably used to explaining to your clients that their updates aren’t showing because they need to clear their cache (to which they may reply “How do I do that in IE7?”).

What you might not know is that you can set how long the browser stores the files for in your .htaccess file to prevent you having to download them again.

You do this by adding an expires module to your .htaccess file. This example is the one used on this very website:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>

As you can see, you can set specific expiry dates for individual file types as well as a catch all default. Files that aren’t likely to change very often can have later expiry dates.

Find out more about browser caching

And finally… If you want it doing properly, do it yourself!

As a final point on website optimisation, I suggest that if you are absolutely serious about optimising your website you should avoid using third party tools/plugins and code it yourself as it it is the only way you can be completely sure of successfully minifying and combining all your files.

The main factor that my website falls down on is that the third party WordPress plugins I use (such as the Responsive Lightbox and Contact Form 7) are not minified and their files are kept separate from my main css and JavaScript files in their respective plugin folders. This increases the overall size and server requests on each page.

However, since I like those plugins and they provide functionality that would otherwise take me a while to create myself it’s a trade off I’m happy to make!

You can test how well your (or any) website is optimised using Google’s Page Speed tool.

I hope you’ve found these website optimisation tips helpful! You can get in touch on my Facebook and Twitter pages!

Paul Jardine Web Design

About Paul Jardine Web Design

Paul Jardine, freelance web designerI’m a friendly and creative freelance website designer and developer based in Stockport just outside of Manchester.

I have over 9 years experience working with digital agencies in Manchester and now operate on a freelance basis, offering web design and development services to private clients, digital agencies and charities around the UK and internationally.

I have also worked as a guest tutor at the University of Salford, where I taught a web design and development module.

Read more

Related Blogs

  • Why Page Speed Is Important

    How a fast loading website will improve your users experience, improve search engine performance and help you achieve your goals.

    Read more
  • Setting up individual local PHP development environments using WAMP

    A tutorial for developers to learn how to set up local PHP development environments for building your websites using WAMP server.

    Read more
View all blogs

House Phone Envelope Menu Instagram