Life in the fast lane: 2016 is all about page speed
First of all, the entire team at ITCC would like to welcome everyone to what promises to be an exciting year ahead, especially for those in the IT sector. As per last year, we’ll be sharing you our insights and expertise into the industry, as well as hoping to help out those who are going it alone on their journey for website optimisation and design.
The first cab off the rank for this year is the idea of page speed, and how it can adversely affect your search rankings if it is not carefully managed. So crank up the gears, put the pedal to the metal, and read on with us as we dive into why it’s important, and how to best maximise your website’s efficiency.
What exactly is page speed?
Page speed is the loading time for the content on any given page that is being analysed. This is mostly affected by the things that we can physically see on the page, such as images and animation. However, things that we cannot see, such as the CSS and the code behind page itself, can also trim or increase the time it takes to load up a page.
Why is it important?
The speed of any particular has always been a vital part of the success of a website. Way back when 56 kb connections was seen as hyperspeed, any site that took far too long to be displayed normally resulted in the user hitting the return button on their browser. Even websites that promised the very best content possible suffered from poor speed. Fast track to today, in the era of wireless connections and mobile devices, page speed has become critical. With significantly quicker connection speeds enjoyed by a majority of the populace, we often find ourselves lacking patience when it comes to loading a page. To illustrate this, it has been shown that 40% of web users will leave any page that takes longer than three seconds to appear.
“40% of web users will leave any page that takes longer than three seconds to appear.”
Three seconds. You can imagine that mobile users on remote, 4G connections will be even less patient than that too. On top of possibly frustrating your potential page viewers, Google is also unimpressed with slow pages. In 2010, the search giant announced that it was a ranking factor, a factor that, five years later, is now more important than ever before.
Measuring page speed
Unfortunately, assessing the speed of your page is a bit more complex than getting the old egg timer out. If you’re concerned about the speed of your website, there are a few ways to accurately measure the time it takes to load. Thankfully, most of these are free, easy to use, and provide a great deal of information.
One such program is the speed analysis website GTmetrix, which provides a quick rundown of both the speed, as well as how it is being affected. There is also Web Page Test, which offers a much more comprehensive and technical analysis of the page speed and what can be done to make it faster. Both of these sites grade their pages using the old school method A to F.
Managing page speed
Whilst facts and statistics are great to measure, they are largely unhelpful if you don’t know what to do about them. Optimising your website for the fastest speeds possible involves both the code behind your page, as well as any images or videos included in the content. There are, however, many other things that you can do to trim down the fat of your site.
One huge problem that arises from the quest for quality images is their physical dimensions. This is a common problem found on gallery pages, where the images are often scaled through CSS to a certain size of the user’s desktop. We have seen images displayed in over 1024×768 format, and whilst they look fantastic, they are simply not needed.
This becomes critical in the current mobile dominated market, where smaller screens simply have no need for such large images. Trim down the dimensions of your images to a reasonable size, depending on its content. You will not only see your page speed go up, but also that the actual quality of the visual is not hampered in any way at all.
Image optimisation is a factor that is largely not understood outside of the actual size of the image in kilobytes. Whilst obviously a smaller file is better, there are a seemingly endless amount of parameters that can affect this. Some really important ones that you need to consider are:
- Whether you can scale the colour pallette down for PNG files if they aren’t needed.
- Whether the quality scale of your JPEG files need to be medium to high.
- Which colour profile will best suit your needs (in most cases, sRGB will be more beneficial).
- The sampling method of the image, and whether it needs a complex scanning algorithm to be displayed correctly.
If your image needs to be in PNG format, due to transparency, it wouldn’t hurt to have a look at the colour pallette. Some colours can be removed, and save up to 8 kb per colour, without adversely affecting the overall quality of the image. For JPEG’s, compression is still a black-and white question of “speed vs quality”, but striking the middle ground between the two can reap huge rewards.
Animations, widgets, and plugins
Whilst a flashy website may look fantastic, it can often be to the detriment of your website’s speed. There are many widgets plugins and effects that you can download as a plugin to your website’s CMS, all of which will have varying sizes and resource consumption levels. It may be worth to try them out before putting them into action.
A frequent offender of slowing down pages are banner animations. In some cases and industries, such as the arts, these effects may be necessary, but most of the time they’re added for that extra spice to the look of the page. If you cannot justify why your website has to have them, then there is most likely not much of a point having them attached.
Trimming down CSS’s
Cascading Style Sheets are extremely powerful tools for webmasters. So powerful, in fact, that one that is far too detailed, or possesses too many elements, may slow down the site as the connection tries to execute it. Websites that have very complex and long CSS’s, no matter how small the content is, will always suffer from a lack of speed.
The simple remedy is to cut down on duplicate styles, or remove those that are otherwise unnecessary to the page. Similar to the animations point above, if you can’t justify why it has to stay, then it’s probably best for it to go. One key point to remember, however, is that It is still possible to create a beautiful and functional looking website with a smaller CSS.