Skip to content

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!

Related Blogs

The most common website problems I fix for clients

26th June 2019

How people feel when they interact with your website has a direct effect on how they view your brand and business. Does your website provide the best experience for your customers?

Read more

Getting my kicks with a Wix SEO fix

15th May 2019

I did battle with Wix to help improve the search engine ranking for my friend Sarah Green of Another AI + Interiors in Stockport.

Read more
View all blogs