Page speed optimisation is crucial for any website and is fundamental to its SEO and user experience. Furthermore, it has a major influence on your site’s traffic rankings and Google’s metrics. Page speeds can be measured and improved in a number of ways and this article will provide a basic overview of how. But first, a rough outline of how pages are loaded:
- A user goes to their website and puts in a website leading to a DNS request.
- This links them to the domain name provider who will redirect them to your server, where all your files are.
- The document object model (DOM) loads the HTML, CSS, and JavaScript for the page. The DOM usually needs to request additional resources from your server, which is where the major slowdowns occur.
As for how Google ranks page speeds there are 2 main metrics it takes into account:
- time to above-the-fold load: Elapsed time from the moment a user requests a new page and to the moment the above-the-fold content is rendered by the browser.
- time to full page load: Elapsed time from the moment a user requests a new page to the moment the page is fully rendered by the browser.
Factors Influencing Speed
There are a number of different things to look at when your website is slowing down. One of the first is images, as heavier ones can severely hamper loading. To solve this issue, you may have to compress and resize your pictures to get them up to scratch. As a rule of thumb, a page should not be larger than a megabyte (and most don’t even need to be that large). Image optimisation is the most common culprit, causing slowdowns on numerous pages because of negligence and not keeping track of how you upload images.
While CMS software like WordPress can do a decent job of resizing and compressing, it’s best to do it on your own. Leaving it up to WordPress often means that your files will be 15 percent to 30 percent larger than if they had been manually compressed before upload.
Hosting is another factor that can give your page a leg up. It’s important to pick a web hosting package that will help improve your site’s page load speed. This can be improved by having a server that has dedicated resources, which prevents other sites from hogging your processor and memory power. Similarly, having a better SSD hard drive and storing database and other resources directly on the web server also helps. You can also cache and minify resources, which will help improve your site’s speed.
Keep track of your plugins, apps and widgets. All 3rd party scripts can hamper your speeds immensely. What theme you’re using can also matter because heavier ones can be draining. The number of redirects it takes to get to the webpage can also mess with your page speed optimisation. You can also speed things up by using HTTP/2, prefetching, preconnecting, and preloading elements.
Page Speed Optimisation Tools
When it comes to tools, the ones Google provides are always a great starting point. This includes Chrome’s own user experience report and Google Lighthouse (which we covered in a previous article). While the Chrome Report is only useful for large websites, Lighthouse can run an audit on pretty much anything. Since both tools are from Google, they can provide just the data you need. Furthermore, Lighthouse also gives users feedback on what they can improve, similar to another tool: Page Speed Insights.
There are also non-Google alternatives like Pingdom and GTmetrix which can be useful in their own right. Similarly, tools are available on testmysite.thinkwithgoogle.com
Speed Metrics
First contentful paint is when the first bit of content appears. Ordinarily, this will be part of the search bar, where the name appears during loading. Next, is the First meaningful paint, which is when primary content first becomes visible. According to Google (who coined the term): “Let’s say you’ve got an e-commerce page and there’s an image that is critical to the page, then first meaningful paint requires that image to be visible”. This time can be crucial, as it gives the user some content to look at before they can interact with everything. If the loading at this part is slow, most users turn away and go to another page.
Following these 2 is the Time to interactive, which is when it’s visually usable and the user can properly interact with the page. Finally, there’s the point at which the page has the DOM content loaded. This refers to when the HTML is completely locked and loaded.