With the increase in broadband speeds, millions of users browsing for information and competition stiffer than ever, it is of the utmost importance to have an optimised web page which is performing well in order to satisfy visitors’ needs, whether this involves checking their account online, purchasing that product from your online store or booking their next holiday.
As such, here are 6 quick tips you can perform within minutes to help optimise and speed up your web page:
1) Place CSS style sheets at the top of your web page
When you consider that humans have an attention span of approximately 8 seconds, it is important to catch your visitors’ interest within this limited time. Placing style sheets at the top of the web page thus ensures content and the aesthetically pleasing formatting you’ve been working on is loaded first. This way, the user is given something to view and portrays the message that your web page is responsive; hence your user is unlikely to be left hitting the F5 (or back) key.
2) Place JavaScript scripts at the bottom of your web page
This optimisation complements the previous tip. Upon a browser encountering a script, no further loading is performed until the script has been fully downloaded. As such, placing scripts at the bottom of your web pages will prevent bottlenecking and ensure viewable content with pleasant formatting has already loaded (starting with your CSS at the top). In short, placing scripts at the bottom of your web page allows users to view and use parts of your webpage without having to wait for the scripts to finish loading.
3) Optimise your images
It is important to ensure your images are optimised to help further reduce your web page load times. To do this, use images of adequate size - for example, don't use larger than necessary images which are then scaled down.
In addition, it is recommended you ‘smush’ your images. Smush.it optimises your images without affecting quality by removing redundant bytes from the image file. Simply upload your image to smush.it and it will output to you your ‘optimised’ image as well as notifying you how much the image file was reduced by.
4) Combine and minify your scripts and style sheets
In application development, it tends to be good practice to take a modular approach and have separate files responsible for related functionality. Whilst this is still true when developing web pages in a dev-environment, in live it makes sense to combine the script and style sheets in order to reduce the number of HTTP requests. You can measure the number of HTTP requests using a useful utility found in Firefox called HTTPFox.
In addition to combining files, additional whitespace and comments can increase the size of scripts and style sheets. Whilst whitespace and comments are helpful and makes code more readable, this readability is not necessary in live. Fortunately, there are various utilities which can perform minification and combining of style sheets and scripts. A few utilities to name include SmartOptimizer (PHP) and StyleManager (.NET).
5) Avoid inline CSS / script
Keep your CSS and JavaScript files contained in external files as browser caching can help them to load much faster. The exception to this rule however, would be on pages which are not user intensive and may only receive one or two hits at a time.
6) Measuring your web page
Now that you’ve been filled with quick ways to optimise your web page, you might ask how you can actually measure the speed of your web page. One way is through FireBug's ‘Net’ tab, which provides an insightful breakdown (load time and size) of your individual resources as well as total page load time and size.
