With the internet getting faster all the time, it might seem like webpage loading times really aren’t an issue. However, the speed that your page loads, and in what order, is one of the most important elements to getting your site on the front page of Google and making users happy. Important acronyms such as TTFB, FCP, FID and CLS are explained in this article.
- Page speed and SEO
- TTFB – Time to first byte
- What can you do to improve your site’s TTFB?
- FCP – First contentful paint
- How do I improve a site’s FCP?
- FMP – First meaningful paint
- What can I do to get a better FMP?
- FID – First input delay
- How do I get a better FID?
- TTI – Time to interactive
- How do I achieve a fast TTI?
- LCP - Largest Contentful Paint
- CLS - Cumulative Layout Shift
- DomContentLoading
- OnLoad Event
- Conclusion
When it comes to back-end search engine optimisation (SEO) there’s a range of web page speed, and page build measurement to consider. We’re going to explore the most important, and answer the questions:
- What is actually getting measured?
- What does a good result look like?
- How can I improve my results?
- Giving you all everything you need to get your page ready to get ranked.
Page speed and SEO
There’s no use in a website that no one can find. Google is now used for over 86 percent of search queries, so getting your pages in the first few results is vital to drive traffic, which can then be converted into leads and sales but it if the loading experience is poor, that’s going to affect your users.
Google recently announced that Core Web Essentials – page speed and loading experience measurements – will become a ranking factor in 2020. The measures that it looks at can be confusing; first contentful paint? First meaningful paint? There’s a lot to take in.
All of the metrics come down to the user experience. The order in which your website loads, as well as how fast it works, dictate whether your user is going to stick around to consume the content. Getting these measures right will not only impress Google; they’ll delight your consumers too.
Here’s an overview of each of the measures you need to know about.
TTFB – Time to first byte
Time to first byte measures the responsiveness of your site and servers. The measure looks at a three-step process to give a response in milliseconds:
- The time it takes to send the HTTP request
- How long it takes for the server to process the request
- Getting the first byte of data from the server
You want your TTFB to ideally be below 100ms, whilst 200-500ms is decent, and you need to look at improving things if you’re 500ms – 1s.
What can you do to improve your site’s TTFB?
There are a few things that you can do to get your number as low as possible. Having lots of dynamic content on your site slows it down so only have movement when necessary. Other potential improvements can be made by using a faster server, redesigning databases to be faster, and improving your networking.
FCP – First contentful paint
First contentful paint is when your website first shows something useful to the user. It doesn’t mean background colours or layout, but things like photos, text, and canvasses. Historically, Google had measured web page rendering just by the first paint, using FCP focusses more on the user experience.
The measure looks at how long it takes from when the page starts to load to when the first piece of useful content is rendered. Ideally, you want this to be within 1s.
How do I improve a site’s FCP?
FCP is all about getting your content on to the page fast, so using HTTP caching will help with return users. You can also use text compression techniques such as minifying your content. Reducing the JavaScript that runs on loading can also get the content on to your page fast.
FMP – First meaningful paint
Very similar to FCP, first meaningful paint is about how fast the user can start getting something meaningful from your site. Meaningful content is the stuff your user is there for, such as a video, your text, or images, known as the page’s hero elements.
You want your FMP to be below one second. The number is derived from the time between the page loading request is made, up to when the primary, above the fold content appears to the user.
What can I do to get a better FMP?
Working on how your images affect your web page speed is a good place to start. Some image optimisation techniques to look at include:
- Optimise images for loading
- Render a thumbnail first
- Use a placeholder image before the full image loads
Using caching and optimising your critical rendering path are other options to look at.
FID – First input delay
To measure how quickly your site becomes functional for a user, Google measures the first input delay. It tells you how interactive and responsive your website is by looking at how soon your site responds the first time a user tries to interact by clicking or tapping on a button.
The measure focusses on the first interaction a user makes with a page until the browser starts to process the event handlers; it’s not about how quickly the request is handled overall. Ideally, you want your FID to be below 100ms for at least 75 percent of your users, with between 100-200ms being acceptable.
FID is one of the measurements used to evaluate Core Web Vitals and is shown in the Lighthouse performance report.
How do I get a better FID?
To see an improvement in your site’s FID, there are a few options. You can work to reduce the impact that third-party code has on the site and reduce the time to get JavaScript executed. If you’re able to achieve low request counts and small transfer sizes, you should also see a lower FID.
TTI – Time to interactive
When your page is fully ready and has completed all its functions is the moment when the TTI timing finishes. In years gone by, people working in back-end SEO would focus on the page being visible quickly, rather than being ready to use. TTI shifts that focus to having the whole page functional as well as looking ready.
Timing starts from the initial request and the page needs to have rendered all the content and all the event handlers are registered and ready to respond within 50ms to a user input. Here’s the timings you need to be aware of:
- Up to 3.8 seconds is fast
- 3.9 – 7.3 seconds is reasonable
- Over 7.3 seconds needs attention
How do I achieve a fast TTI?
Getting your TTI into the reasonable or fast parameters can be done getting rid of and JavaScript that’s completely unnecessary. You can also introduce caching, get your content well-structured, and use easily rendered fonts.
LCP – Largest Contentful Paint
This is another measure of loading speed. In this case, the measurement shows how long it took to load and present the largest block content to the user.
LCP is a metric used to evaluate Core Web Vitals and is shown in the Lighthouse Report.
CLS – Cumulative Layout Shift
It’s important to know whether a half-loaded site is stable or whether there is a large change in the layout at a later stage in the loading process. CLS defines how much the layout changed during the load. It’s not a speed figure, but a way of determining how often a user might have to react to layout changes during the load.
CLS is one of the measurements used to evaluate Core Web Vitals and is available in the Lighthouse report.
DomContentLoading
This isn’t a measure per se, but a point in the page loading time that’s critical to get the page rendered. It’s the point when a web page is ready to be rendered without any stylesheets blocking JavaScript being ready. Most JavaScript coding won’t kick in until a rendering has got to DomContentLoading.
OnLoad Event
The OnLoad Event, or Load Event, is when a page is fully rendered. This is the last event that shows the browser that everything has been completed and that secondary processes can start, where needed. When the OnLoad event fires in the code, the website is fully ready and that’s then the TTI will finish counting.
Conclusion
Google is the most important search engine and the way most websites are discovered on the internet. It’s important as a web developer to know what Google is looking for in a site and how to get your site performing up to par.
There are lots of measures and some of them can be a challenge to meet. It’s important to understand that you’re not just working to satisfy an algorithm, the work that you do will actually make your users happier and help your business or organisation meet its aim.
