Page speed is linked to almost every aspect of your website. From SEO to conversions, to user experience and beyond. A faster site usually means better results across the board. Yet improving site speed can be a complex process. From the hosting provider you choose to the platform you decide to work with, there are a lot of areas that can be tweaked to improve site speed. This article is about website optimizations you can implement yourself.
But first, how do we know site speed is important?
It came to prominence in 2010, when Google officially announced that site speed would be involved in calculating web search ranking. SEO optimizers everywhere quickly started trying to make sure that sites were fast enough to make the search engine cut.
On top of this, it was becoming increasingly clear that site speed also had a large effect on conversions. For eCommerce businesses, the statistic that a 1 second delay in page response can lead to a 7% reduction in conversions is often cited. Many users expect pages to load in 2 seconds or less, bouncing if load times take too long.
This article will look at some simple website optimization tools, tips, techniques, and more. Starting with how to test your site for speed, and then providing actionable and easy to implement website optimizations.
The first thing you’re going to want to do is to test your website’s current speed. This will help to give you a snapshot for before and after benchmarks during the optimization process.
A couple of website optimization tools you can start with are Webpagetest.org and Google’s Page Speed Insights. Make sure to run multiple tests and then average the results. Web Page Test will allow you to do this automatically in the settings menu. We also recommend selecting a testing location near to where your site is hosted to get the most accurate results.
The example above shows how we usually set up webpagetest.org for basic speed checks.
Page Speed Significance
Below you can see the results of a page speed test on the Magento demo site averaged out. We’ve picked out 3 of the most important and significant stats we want to use for optimizing the site.
|Load Time||Time To First Byte||Bytes In|
The first stat we’ve taken is load time. This shows us the complete time it takes to load our page. Remember, if a page takes over 3 seconds to load, you may be losing half of your potential traffic. This number is the most important for us to change.
The second stat is Time To First Byte (TTFB). We’ve talked about this previously and discussed how this is a generally overused statistic. While it can help to provide guidance, TTFB can be manipulated relatively easily and isn’t as important as some may think.
The third stat is the size of information being downloaded to the page. If this number is very large, it may be useful to take a closer look at what different page elements take what durations. You can do this by taking a peek at the waterfall.
Page Speed Waterfall
An example of what the waterfall looks like can be seen below. Here we’re able to isolate what elements are slowing down site speed the most.
Once you’ve looked at the waterfall, you should have a better idea of what can be improved. Above, we can see that some of the front end .js files can likely be sped up slightly. Lower down the waterfall (off the page), there are also some image files that take longer than many of the page’s other image elements. These may also be an area we can look into and improve on.
Image compression is one of the easiest ways to optimize site speed. Too often do web designers make images that adopt uselessly high resolutions. High-resolution images take up more storage space on a server and can increase load times significantly.
We highly recommend scaling images appropriately. If an image is only going to take up a 100 x 100 pixel space on your site, there’s no need to make it 1000 x 1000.
Image Type Extensions
When saving images, deciding on what extension to use generally falls into one of two different options: .jpeg and .png.
There’s a lot of false information out there about which extension should be used. Many say that .png (Portable Network Graphics) is the better option, with it being designed to compress images as much as possible without losing quality.
This is partially true. However…
.JPEG files actually work much better when using photographs.
Before settling on a file type, it can be beneficial to check how saving as each type affects file size and quality. If you notice a clear difference, opt for the better extension.
There are several ways to improve image optimization. You can use a third-party piece of software and do this yourself, or some CMS’ offer internal functionality, plugins or extensions to manage this for you. The EWWW Image Optimizer WordPress plugin is a great tool for getting started if you’re running a WordPress site.
Google recommend testing Gzip compression before implementing in a production environment. We recommend making use of a Dev Site environment that mimics your production environment if you’re planning on doing this.
Also note that there has been some evidence that compression can increase Time To First Byte durations – despite reducing overall page speed load times. Some SEO authorities have suggested that Google may, in fact, prioritize TTFB over overall page load times. Because of this, we recommend testing on single pages before making the switch sitewide.
When it comes to page load speed, less is almost always more. Instead of adding additional functionality to core pages, how about settling on something simpler and faster?
The fewer HTTP requests a site has, the faster it will load (usually).
In addition to improving site speed, simple web design has also been shown to improve user experience in many cases. In a UX study conducted by Google, it was found that users tend to judge a website’s aesthetics within 1/50th – 1/20th of a second, and that visually complex sites were almost always judged as being less beautiful than their simpler counterparts.
The more beautiful a website is perceived as, the better UX and SEO will be, and the more conversions will increase.
A simpler website design is one of the quickest methods for improving page speed within a short period of time. However, we recommend running A/B tests in order to see how changes actually perform and not making a 100% change straight away.
Caching is where repeat visitors are able to load your site much faster thanks to page elements being stored on their hard drive in a cache or temporary storage.
For WordPress and WooCommerce sites, we make use of W3 Total Cache to manage caching functions. This will come pre-installed and pre-configured when you purchase a WordPress optimized hosting solution.
In order to optimize site speed even more, the Hostdedi Cloud allows for use of the Cloud Accelerator. This can easily be turned on and off with the click of a button under the performance section of the Client Portal.
Unsure whether you should turn on Varnish or NGINX? Find out more about the difference between Varnish and NGINX in our Definitive Guide to Optimizing Magento 2.
Caching and CDN
Caching with a CDN (Content Delivery Network) in place is a more complicated process and can require advanced setup. However, a proper caching configuration with a CDN can help you to reach that global audience as though you were with a local host.
For WordPress and WooCommerce, check our guide on How to configure the Hostdedi CDN with WordPress and W3 Total Cache.
What Page Are You Optimizing?
You need to ask yourself: What page are you optimizing? Homepages are an important part of a website, but what other pages are users going to be interacting with a lot? All of these pages need to be speed checked and optimized.
For instance, it’s not good enough for us to just optimize Hostdedi.net, we also need to optimize Hostdedi.net/magento/hosting and Hostdedi.net/cloud/hosting.
Before you set out to begin this process, try to put together a plan for what key pages are drawing in the most conversions and attracting the most ROI.
Page Speed and SEO
We said earlier that page speed and SEO are heavily linked. However, we also mentioned that page speed is – by far – not the most important factor in determining rank. Google has said that if a page or site’s content is more relevant and people are willing to wait for it to load, then they will not penalize that site.
Page speed is an important part of optimizing, but content, quality, and user experience should always come first.