With so many different factors applying to how people access the internet – be it the device they use to access it; a mobile, tablet, laptop or desktop to their level of connection – 3G, fibre optic broadband – even dial up, each aspect plays a vital part in how your website responds for your audience.
Something that cannot be ignored is your level of SEO – whether onsite or offsite, but that is a completely different article in itself and not covered here. Instead, the following are some areas that can be explored to improve the speed and accessibility of your site. In no particular order here are some of the tweaks you can apply:
Validating your site with the W3C’s own tools has many benefits. As much as everyone would like to have their site pass with flying colours, there are times when it is not always practical to abide to certain conventions. Remember that these are mostly guidelines but can be invaluable as a debugging tool in finding any broken links, invalid syntax and improving on the general structure of your site. The most common validators are for markup and CSS.
Wherever possible, apply the best approach to using a semantic structure in your HTML – especially if you have made the jump to HMTL5 as you can start using elements such as articles, sections, nav, headers and footers. See HTML Doctor on best practices.
With the influx of grid systems, it can be quite easy to get carried away with what’s known as divitis – excessive use of div’s making markup chaotic. Try to control your level of nesting as well (this will help keep your CSS more lean and reduce specificity, keeping selectors short).
Whether you’re a veteran or new to web design, while there aren’t that many browsers to cater for, you’ll note that things can get problematic for certain browsers and whether you will have any issues with cross browser compatibility. Some of the browsers require a vendor prefix such as –webkit– for Chrome and Safari. An excellent source for browser support is Can I Use.
CSS files aren’t intensive on your server but every little helps. Simply compressing your CSS or JS – that is, removing unnecessary comments and spaces between characters – can improve your site speed in some cases. You could use an online YUI compressor or a simple CSS compressor.
One very important factor that cannot be overlooked is images. Images are very intensive when it comes to page speed and accessibility for your users. The first point of call would be to optimise your images by reducing the dimensions to what you need. For example, if your image is displayed within your code as 300x300px but the actual file is 800x800px, reduce it as the additional filesize is simply surplus to requirements.
Graphic software such as Adobe Photoshop or GIMP are incredibly useful for optimising an image. You can reduce the percentage quality of a jpeg to reduce file size or reduce the amount of colours within a png file for the same effect. There are many online options as well such as jpeg Image Optimizer to Smush.it by Yahoo!. The latter is a lossless tool that removes excessive data without actually affecting the visual quality of an image.
Additionally, if you’re looking to improve on access time to your site, investing in a CDN (Content Delivery Network) will enhance your site. A CDN allows you store your external files on multiple servers that are usually based within a close proximity. Of course, you should still optimise your images beforehand but the subscriptions to these services are worthy of your attention.
Not a fad but a practical solution for many websites. Aside from the obvious benefits of your site adapting to whichever device is accessing it, search engines such as Google favour responsive design in it’s searches.
There are numerous sites that can help with your testing – especially in terms of responsive design and in turn can help you optimise your sites for multiple browsers. Sites such as Browsershots and Browserstack can help give an indication on how your site may appear, where sites such as Am I Responsive? will give an idea on how your site will display on multiple devices.
These are just some of the options available to you to improve website performance. It is worth doing some research into the practices best for you and your site. Sometimes on paper an optimisation is great but it doesn’t always work out for your user. Consider investing some additional time into these areas if you haven’t done so already. One such resource would be Google Page Speed as well as Yahoo!’s guidelines. Your own suggestions would be warmly received!