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:
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.
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.
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.
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).
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.
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.