The new LaROCK website was built to be fast, modular and easy to update. Each page on the LaROCK website can be constructed using a series of common components to ease the creation of new pages – with advanced features such as slideshows, clickable image blocks and bold statements. The system behind the website intelligently displays each of the components so that, for example, search engine friendly HTML text can be placed on top of each image within a slideshow.
Many optimisations were made to improve page load performance. Web graphics are kept to a minimum where design can be represented by code (e.g. borders, background colours, horizontal rules) or by the now recognised standard @font-face CSS3 declaration that allows use of custom fonts on the web. This reduces both page load and maintenance time as there are less HTTP requests and less graphical work required for content changes. Where web graphics are needed, their load priority is controlled so that the most important images above first and above all others at the top of the page and that low-priority images are treated as backgrounds and loaded last. This enables users on a slow connection to instantly be able to read all text content on any page of the site, followed by the load of the most important images first. Advanced features (custom fonts, slideshows) are executed once the entire page is loaded to improve the user’s experience.
The LaROCK website was also developed with graceful degradation and progressive enhancement in mind. This means that if you’re using a modern web browser (such as Firefox, Google Chrome or Opera) you will experience the full range of features that were built into the website (CSS, JavaScript/jQuery, custom fonts). However if you’re using a less capable web browser, such as on a mobile device or games console, you will still be able to view all the content on the website – even though some of the advanced features may not be available to you. Not only does this allow for a wider range of devices to access the website, it all improves Search Engine Optimisation (SEO) as robots are able to fully index all text content (which would not be possible if text were to be embedded into images).
Our tests show that the entire homepage, with all advanced features enabled, can be loaded in around 1.5 seconds for a new visitor, with subsequent visits resulting in page loads of just 0.4 seconds.
See the live site: www.larock.co.uk
See the LaROCK project overview for more information.
