5 tips for a Supersonic Speedy Website
Don’t you hate it when you want to show someone your fantastic new website or find out some information quickly from another website and you’re sat there waiting for the page to load?
In which time you could’ve found the information you were looking for and be moving on with your life? Don’t we all. So what factors will help with this difficulty? There are many, but here are a few of the more important ones to consider.
Gzip Compression
Imagine you had to do a years worth of shopping to do and only one car to make the journey. It would take a few trips! One way to make the best use of space in your car is to remove all the packaging. Removing all the packaging would make things smaller. Because everything is smaller, this would allow you to fit more shopping in the car and get all those trips done in a shorter time.
Websites can be delivered to your computer or smart phone in smaller packages too by using Gzip compression.
Gzip compression is a method of compressing files into a smaller size, a Gzip file. This then makes for faster network transfers because the server can provide a smaller file which will load quicker on a website. It works by compressing the website files and typically saves 50% – 70% of the original file size. This results in a reduced page loading time as well as a reduced bandwidth usage.
When a browser asks for a page from your website, your webserver will fetch and return smaller compressed files (the Gzip files) rather than the full fat versions. This, however, only works if the browser you are using understands compressed files. But you shouldn’t have to worry about that, all modern browsers understand and accept compressed files.
Image Sizes
Image sizes are another key component for loading time. Do you ever open a website and everything loads except that one image? You know, the one that loads line by line? Well that’s because the image file is too big, and Google dislikes this too as your page load time is longer than it should be.
The size of an image file can be measured in two ways. It can be measured by the file dimensions (width x height, measured in pixels) and/or the file size (measured in Kilobytes or Megabytes). These could almost be seen as “size” and “weight”.
If an image is too big it will not only increase the loading time but it will also give Google a reason to penalise the websites search ranking.
Images should not really be any larger than the container that houses them. For example, if you have a product image that only takes up half the width of the screen, it probably only needs to be about 700 pixels wide at the most.
Often people will take photos with their smart phone or use a professional photographer. These image sizes might be 4000 pixels wide, producing a very large file that needs to be downloaded. Remember to re-size the image before you upload it to your website.
Another aspect that can significantly effect the size of the file is the quality of the image. Naturally .jpeg images tend to be 100% quality when they are downloaded from your camera. But you can drop the quality down to somewhere between 50% and 75% to reduce the file size, without causing any detrimental effects to how the human eye interprets the image.
More reading about website images can be found here.
Server Caching
According to Google, as little as half a second difference in loading time can reduce website traffic by up to 20%. This means your loading time has to be as fast as possible. Page caching can help with this.
Most websites these days use Content Management System (CMS) such as WordPress. This uses multiple server technology such as PHP and MYSQL databases to build a HTML page. This build process takes time. Caching your pages means once the page has been built, or rednered on the server, a static version is kept on the server, so we no longer have to build the page again. This means that next time the browser opens that page it loads the static cached version.
Going back to the shopping analogy, it’s like arriving at the supermarket and all your shopping is ready to collect – no need to walk around collecting items off the shelf.
Browser Caching
When a web browser displays your webpage, it has to download several things such as your logo, your stylesheet (CSS file) and a whole lot of other resources. This will obviously take some loading time. But with browser caching, the browser stores webpage resource files on a local computer when a user visits that webpage. It “remembers” the resources that have already been loaded by the browser. This results in a faster loading time when the user visits another page or returns to that website as the logo, CSS files, etc. do not need to be loaded again.
Going back to the shopping analogy, it’s like having a cupboard full of spare items, so you needn’t go shopping for all your items as you already have a lot of items already.
Combining files
Often in modern CMS websites there are a lot of small files to download. So your browser makes multiple requests for these files. There is a way to reduce this however. By combining CSS and JavaScript (JS) files together, means means that only one CSS and one JS file has to be downloaded. This will result in less time being taken to load the CSS and JavaScript files which will reduce your overall loading time and server overheads.
Going back to the shopping analogy – Imagine having to go around 20 shops to collect different items for your weekly shop. That’s 20 trips, to 20 shops. By combining all files that are similar in nature, you can make significantly less trips and therefore reduce the time taken to do your weekly shop.
Summary
So as we now know, Google likes a fast loading website with smaller file sizes and images. Make sure you have all the correct tools and procedures in place to ensure you have the fastest possible loading time for your website.
