Zum Inhalt springen

Nibble at your website speed

Nibble

Lately, I have been “nibbling” at our website. I love that word. It reminds me of the cookie monster from the Muppet show, although he was a bit too fast at nibbling. But making things fast is a good idea. Using GTmetrix as a testing and reference tool, I was able to speed up the page loading times of this website quite considerably. How and what I did, is explained below. On a more novel nibbling quest, I’d like to tell you of my experiences with “Nibbler”, a free website testing service from a UK based company called Silktide.

Speed Optimization

Speed

I already had a pretty good Yslow and Google Page Speed score of around 87%, but was able to increase that to 99% using some of the following techniques.

Combine and minify external Stylesheets and Javascripts

Decreasing the number of style sheets will reduce the number of requests a browser has to make in order to load your page. Minifying your stylesheets means, removing a unnecessary white spaces from it. There are loads of websites offering tools to minify and optimize your stylesheet, but it makes subsequent editing difficult. Here is a little PHP script that does this on the fly. It combines your stylesheets, removes white space etc. and compresses the file using Gzip. I did the same with my external Javascripts, using a slightly modified and simpler script.

Combine images using CSS sprites

Identify all images used commonly on your site. Combine those into one single PNG file, placing each image underneath the other. If you place them side by side, you may have problems selecting, the image you want to display in a particular area of your page, because you may not be able to limit the width of the area. In total, I combined about 30 images into one file (logo, backgrounds, icons – no JPEGs of photos) and ended up with a file of about 30 KB in size. Even though this may be larger than the total file size of all single files, the browser needs to load fewer images, has less requests and is thus faster. More on this at css-tricks.com.

Other things to consider

Well, no, I am not going to list all the tweaks you could do. GTMetrix, Yslow, Google Page Speed Online etc. will analyse your site and tell you what you can optimize. What recommendations you can follow, will depend on what kind of access you have to your webserver. Have a try!


Nibbling is fun and helps improve the quality of your site

Nibble

Ok, now something different, but related, but more fun ... well kind of. Let me tell you a bit about “Nibbler”. It's a free website analysis service, which is aimed at helping you improve and monitor the quality of your site. It will check the top 5 pages of your site and will score them according to how well you meet accessibility, experience, marketing and technology issues.

Apart from the fun of improving your site, you can gain badges or awards for standards you have met. They also have novelty badges, which give you no extra points, but are fun to collect. For example, using the word “Badger” on your page will give you the Badger Award and so on. What badges are available is seemingly a big secret and I guess part of the fun is trying to find out what you can do to get an extra badge. Personally, I do like collecting stuff, but not at the cost of writing rubbish. Well, I suppose you could spend your time doing worse things.

The more websites you add to your profile and the more badges you collect, the higher your score on the so called “Leaderboard”. Well, I'm not too impressed, as it kind of discriminates against those who only have one or two websites. Recently, some users seem to add any rubbish site to their profile, just to climb the Points ladder. I am sure that was/is not really the intention of Nibbler.

I like the service, because I like the word “nibble”, because I am a “Nibbler” and often find myself “nibbling” around. Oh yes, and because it gives you a quick and good overview of what may need improvement and how well the marketing of your site is getting along. Give it a try!


Kommentiere diesen Artikel

Kommentar (erforderlich) (keine Anzeige) (optional)
Ja, erkenne mich, wenn ich das nächste mal hier bin