How and why you should be optimising your website for speed

How and why you should be optimising your website for speed

Ever since the Internet was created, file sizes have continued to grow steadily. What first began as kilobytes soon progressed to megabytes and they’re still growing. Whist this isn’t a bad thing it can have a huge impact on performance and manageability when it comes to our websites. Throw in aging devices, bandwidth restrictions and slow speeds and you’ll find you actually have a much bigger problem than first expected. Thankfully we have control over file sizes and how our pages are rendered in the browser.It’s this sort of control that can help web developers, such as ourselves, ease the problem and optimise the code for better performance. Many ask why bother as most internet connections in the UK are fairly fast now but we must remember that performance and optimisation are about a lot more than just speed of download. There are a number of SEO and UX benefits that we could see if only we took the time to look at code.

Avoid bloat in your code

Thinking modular is one of the first steps to take as modular code can add a lot of bloat in the form of more options. If however, we can combine many common pieces of code and combine two CSS classes into one then we should. Although this might not necessarily be as important when it comes to basic HTML and CSS, it most certainly is when you dive into the more complex world of JavaScript. Having too much bloat really can hurt you, especially when you consider mobile too.

Use compression for images

There should also be a very big difference between your development level code and your production level code bases. This can often see the biggest decrease in file size across the board. It’s quite typical today for us to refer to our production or development environment especially when we’re working on larger projects but it’s also useful on the smaller scale jobs too. The largest difference is probably seen when it comes to image compression and the compression of code. The end result should be a production environment that’s as lean and fast as possible with our development environment the same minus the image/code compression optimisation. An example of this would be the use of Photoshop’s ‘save for web’ compression.

Sometimes it can often be a case that the very code we’re writing is the slowest link in the chain as inefficient CSS or JavaScript can hurt loading times a lot more than you realise. In short writing an exact path down a chain of selectors can prove a lot less efficient than if you were to use the smallest identifiable selector instead. They both do the same job and lead to the same element but the latter simply does it much faster and ultimately that’s what you want.

HTML5 has given much more flexibility

In keeping with our goal of de-bloating by writing leaner CSS, writing more efficient HTML should also be a priority. CSS resets (a compressed or minified set of CSS rules that will reset the styling of HTML elements to a consistent baseline) will often target all common elements. Even if you aren’t targeting an extra div (a division or section in an HTML document), it’s likely still slowing things down with extra padding and margin resets. Typically one div or two extra won’t hurt but when you begin to get a lot of them, you’ll see things start to become affected. The introduction of HTML5 however has allowed much more flexibility in this field.

Google appreciates cleaner code

It should come as no surprise that Google appreciates cleaner code, as it’s main priority is to whip the Internet into shape. For you to hold a prominent position within search results your pages must now pay attention to the different attributes about how they’re rendered. Using too many external resources, having stupidly large images and even poorly written JavaScript can leave a website falling when it comes to ranking. Thankfully however this is all built around good development practices. Google also offer very in depth guides when it comes to optimising different aspects of your website too, all of which promotes excellent development practices so as you can see it all comes with good intentions.

Don't forget browsers

In summary, when optimising our code we have to think not only about file size but also about how it will be read. Within this we include users and browsers. We also need to consider mobile users too, especially now with the majority of service providers enforcing very tight data constraints on their contract holders. Whilst it may take time to perform this type of optimisation we should remember just how worthwhile it actually is. Not only does it offer better performance in the browser and on mobile but it also gives the chance to use better development practices as well as get your website a much higher ranking on Google search engines.

Too much to learn? Leave it to the experts at Wecan Media

For those who aren’t necessarily digitally minded however this can all seem as simple as astrophysics but that’s exactly where we come in. Here at Wecan Media we can take the confusion away by doing all of this for you, leaving you to simply reap the rewards of an excellently designed website that not only does the job but does it to an exceptionally high standard promoting your product or service in the best light possible. If you’d like more information on just how we can help you, no matter what your budget then get in touch today.