Web Design Tips – Improving Page Speed

In this week’s web design video blog Nick and James share 5 tips for improving page load times on your website. Increasing the load time of your web pages not only improves the user experience, but also works to improve your on-site optimisation.

Hi and welcome to our web design video blog. This week we wanted to share 5 simple tips for improving the speed of your web pages. Firstly, make sure you buy good hosting. Secondly, combine any external files and thirdly image size optimisation. Fourthly, efficient use of HTML and CSS and finally, sourcing your RSS from Feedburner.

Firstly then, avoid cheap hosting. Select a large and reliable company to host your; or your client’s website(s). If you are in the UK,  we would recommend using a reputable company like Fasthosts. If your hosting isn’t up to scratch, then all other efforts to speed up your website might be in vain. As we move onto the actual construction of the website, our next step is to combine external Javascript and CSS files. You can download the Supporting Files, we’re using here on our supporting blog post at crearedesign.co.uk/blog/videos. Inside the ‘Page Speed’ folder, there is a folder called ‘Javascripts’ to demonstrate this more effectively.

So I’ve opened this up in Dreamweaver - let’s say we’ve got a website that uses Javascript like this for Flash purposes and then we have a second Javascript file for just basic image rollovers. What we can actually do instead of having two separate files and the server having to source both of them individually is combine them onto a single scripts file; all on the same page. So this cuts down on the amount of files that the server has to load, and also allows you a single page to manage all of your Javascripts on and exactly the same process can be applied to external Stylesheets as well. So thirdly is image size, again if you open up on our supporting files the index page. What we’ve done here is made two graphics both the same, but one’s saved as a GIF at medium quality which comes through at 12 KB and then we’ve saved the same pictures a JPEG at 100% quality through ‘Save For Web’ and it comes through at 33 KB.

So it’s obvious to notice that the JPEG, even though the quality to the eye doesn’t appear any better, is actually three times the file size. So if you use Photoshop’s ‘Save For Web’ tool correctly - and we’ve done a separate video explaining the best way to use Photoshop’s ‘Save For Web’ which is also on YouTube. You can actually save quite large file sizes through your images. You can spend a lot of time and effort refining the optimisation on your CSS and HTML and only save sort of 20-30KB - which is the same amount of file size that you can save by correctly saving just one image, like in this example here. So fourthly is the efficient use of HTML and mainly CSS. As you get more experienced with CSS, you actually find ways to use less code and make it more efficient. Again in the example, we’ve got a page here and you can see that there’s two sentences. One is styled using inline CSS and one is used - sorry - one is styled using external CSS that is sourced from the stylesheet.

So if we have a look at the code view, the first paragraph which is here, as you can that has inline CSS - now this bogs down the actual HTML page and it doesn’t necessarily need to be there. It should be on this separate external style sheet. Like our second sentence that references a class that can be found on the stylesheet.css like in the example here. And the good thing about doing that is that you can then use the same class or reference later on the HTML page and you only actually have to use it once on the stylesheet rather than writing out inline styles for all your HTML.

The second thing with using CSS is to use optimised CSS and again we have a separate video on optimising CSS that’s also on our YouTube channel as a previous video blog. In the example, this class here .example, you can see that all the margins are specified in quite a long piece of CSS where as you can achieve the exact same parameters by using short-hand CSS like in the example on line 6. So the margin goes top, right, bottom, left instead of actually having to specify all the individual attributes in the example here. So using optimised CSS and generally just using as little code as possible in both your CSS and HTML is quite is big factor when it comes to reducing the file sizes of your individual pages and files.

Our final tip, and this only applies if you have RSS feeds on your website - is to utilise Google’s Feedburner Tool. You can find Feedburner at feedburner.google.com and it’s a completely free service, you can put through this, as many feeds as you wish. So what you basically do is feed your RSS into your Feedburner account; this then creates an alternative RSS feed that you can then source on your website. So this is particularly useful if you are using things like WordPress - you replace the default HTML/PHP that is in the theme, with the Feedburner embed, and this loads up your RSS onto your website for users a lot quicker.

If you are also using aggregators like ‘Magpie’ or ‘Simplepie’ like down here on the right hand side, it also loads them a lot quicker, as if you use the direct source to the WordPress Feed it takes a little bit longer and there’s a slight pause. So using Google Feedburner to display your RSS feeds decreases the load times of your web pages. We’ve selected these tips not just as a one-time checklist to take back to your website, but as a simple guide for building web pages in the future. There are also many useful tools available for web designers to monitor and improve the speed of your web pages.

A good first port of call is Google’s Webmaster Tools. So Webmaster Tools are a free service provided by Google and you can add your website or websites into your account and if you click on Labs on the left, and then Site Performance; Webmaster Tools gives you a basic overview of performance, page speed and also gives you some general tips and advice that you can use to decrease the load time of your pages.

You’ll see at the bottom that they recommend using a Firefox plugin called ‘Page Speed’ - if you’ve already got the Firefox plugin called Firebug, it builds on that, so if we look an example site, like one we’re currently developing called Houston’s Bar and Grill and you click on Firebug - once you’ve got Page Speed installed you’ll see it appear here, and you can actually analyse the page and run a quick report and it gives you a page score out of 100.

As you can see it gives you tips and advice for reducing the file sizes and load times of your web pages. Thank you for watching this week, please leave any questions or comments on our supporting blog posts at crearedesign.co.uk/blog/videos.