How to Measure PageSpeed

Why You Need To Measure Your Website Pagespeed

Google has updated PageSpeed Insights, and has now made it clearer than ever that there are several ways and values of measuring page speed. We’ll explain the most important of these measurements and show you how to optimize your website.

Google launches update for Pagespeed Insights

Pagespeed is becoming more and more important for Google. The search engine giant has commented on its handling of slow websites several times this year, and mobile websites in particular have been affected.
The new update of the in-house Page Speed Test tool fits into this series of activities. The fifth version of Pagespeed Insights is based on Lighthouse, a website optimization tool that is also available as an extension to the Chrome browser. It also uses data from the Chrome User Experience Report. At this point it becomes clear: Google understands Page Speed not only from a technical point of view, but also as part of the user experience.
After checking the speed of your website, you will notice that it has been significantly downgraded. This is mainly due to the fact that Google now consults more criteria for the rating and uses the speed on a mobile device with average bandwidth as a basis for its initial assessment.
If you’re not used to Lighthouse’s display, you’ll also notice that Pagespeed Insights now displays five different page speed readings. If this is not confusing enough, it also omits an important measurement value, which is traditionally one of the most important key figures.

The 4 most important Page Speed readings

What is Page Speed? Page speed essentially shows the period from the time a website is called up to the point at which it is rendered and ready for input in the browser. During this time, several complex processes take place, the duration of which depends on certain factors. In order to determine and optimize these, additional measured values are useful.
Top 4 measurements in chronological order:

• Time to First Byte (TTFB): The time between calling up the website and the first byte loaded by the web server.
• First Contentful Paint (FCP): The time at which a display element is displayed in the browser for the first time.
• First Meaningful Paint (FMP): The time at which the user perceives the website to be loaded
• Time to Interactive (TTI): The time at which the website has been rendered and is ready for user input.

Figure 1: Page Speed measures according to the website © wao.io

TTFB – Time to First Byte

The Time to First Byte measures the time period that begins with the call to the website and ends with the first byte received from the web server. In the context of the other measurements presented, the TTFB is an exception because it measures the request of a website alone and not its representation.

Figure 2: Page speed performance from Ryte

What influences the Time to First Byte.

The connection time is relevant because this can show the first factors of a slow page speed. To successfully connect to the web server, its IP address must be determined via the domain. This is done by resolving the domain name via the DNS server until the IP address is found. The browser then uses the IP address to connect to the web server via various routers on the Internet. Depending on the location and network connection, this connection contains latencies that cause a delay in transmission.
If you use an SSL certificate – and you should! – and the request runs over HTTPS, then the SSL handshake takes place, after which the secure encrypted connection is established. If the computer is connected to the web server, the browser sends a request via the HTTP protocol. The web server software now processes this request. The performance of this software and the utilization of the server hardware are decisive for the processing time.

• High latencies in connection setup
• Slow web server hardware and software

How to optimize for the TTFB

To reduce the connection time, the path to the domain resolution can be optimized. Google’s name server with the IP address “2.2.2.2” is still popular, as is the “1.1.1.1” from Cloudflare. But you can clarify this with your domain provider, who can help you. If it is particularly important for you to make your website globally accessible under equally good conditions, then you can use a Content Delivery Network, CDN for short.
A CDN can shorten the latency between the user and the web server. Web page content that can be stored in a cache is cached within the CDN and can therefore be accessed more quickly. Some CDNs offer functions that allow dynamic content to be retrieved more quickly, since the latencies are optimized by routing within the CDN.
If the time to first byte increases despite optimized latencies, it can be due to a bottleneck in the IT infrastructure or a generally overloaded web server. In this case, you should contact your system administrators or web-hosters. Changing the web server software can also have a positive effect on the TTFB.

• Clarifying the use of better DNS servers with the domain provider
• Use a CDN (only) if the website has a global audience
• Customize hosting when hardware reaches its limits

FCP – First Contentful Paint

After the first byte, all other data of the website follows, including the HTML code, stylesheet and script files, fonts and media files, such as images and videos. The First Contentful Paint measures the point in time at which the browser is able to render a page element on the screen for the first time. This is important for the user as they gets the positive feedback that the website is actually loaded.
In Pagespeed Insights, the First Contentful Paint forms the first measurement instead of the TTFB. This makes sense for the Google tool because it is intended for developers and mainly proposes measures for OnPage optimization.

What can delay the First Contentful Paint?

The download volume of the website is important for fast display in the browser. The larger this is, the longer the transmission takes. In addition to latency, uncompressed source code inflated with comments and large script libraries can also increase the transmission time and thus slow down page speed. While the bandwidth has no influence on latency, it is decisive for the speed of the transmission and becomes more and more important with increasing website size.
Script files are divided into CSS and JavaScript. CSS is responsible for displaying the HTML elements in the browser, so the browser blocks the rendering of the website until the CSS is fully loaded. JavaScript is required for the functionality and interactive control of the website on the user side. The display of the website does not begin until the JavaScript boot has taken place.

• Uncompressed code
• Large CSS and JavaScript libraries

Website optimization for the FCP

A fast, structured transfer of website data from the web server to the browser is important. In order to keep the download volume low, the data can be compressed by GZIP or Brotli. HTTP/2 (also called H2) can be activated in the web server for faster transmission and parallel downloads thanks to persistent connections. Prerequisite for this is an SSL certificate, but as already mentioned, you should use this anyway. Meanwhile they are even free with Let’s Encrypt. Please contact your hoster or the system administrator if the change is possible.
So that you don’t have to request all content from the web server again when you reload a website or load a subpage with similar content, you can use clever HTTP caching to determine how long certain elements should be cached on the user’s computer.
By specifying CSS files for certain viewports, you can reduce the render block to those specified CSS files. JavaScript and CSS libraries can often be customized to download only the content you really need, not the full content.

• Compress data
• Enable HTTP/2
• Determine by caching which content does not need to be reloaded
• Minify code, set up CSS for viewports, purify libraries

FMP – First Meaningful Paint

As soon as all page contents for the current position of the viewport have been loaded, the user feels that the page has been loaded. Although the interactive elements are not loaded yet and the other elements “below the fold” do not have to be available yet, the loading process for the user is completed here.
The transition from First Contentful Paint to First Meaningful Paint is clearly visible in the screenshot of the website, which is displayed below the measured values. Visually, nothing changes here until Time To Interactive. This makes optimization for the FMP all the more important.

Negative influences on the First Meaningful Paint

Besides the source code and the script files, media files are also transferred. Images account for almost half the download volume of a modern website, more for online shops. Accordingly, a high number of high-resolution images can enormously slow down page speed.
This has an effect on the First Meaningful Paint, since the display of these images is decisive for the perceived perception of the finished loaded website. The First Meaningful Paint can be unnecessarily lengthened, especially in product overviews where many of the images are only visible to the user after scrolling.

Image Optimization is the Key to FMP

In order to align website optimization with the needs of the user, image optimization is essential. For online shops with thousands product pictures and web pages with many editorial contents, this can however become very complex. The problem can be solved by automated image optimization.
For product overviews and other websites that display many images only after scrolling, we recommend dynamic integration through so-called lazy loading. This means that the images are only requested by the server when they are actually to be output on the viewport. In the meantime, placeholders and progress indicators are displayed so that the layout is not changed and the user notices that the images are being loaded. With the tool of wao.io Lazy Loading can be set up automatically for websites.

• Manual or automated image optimization
• Lazy Loading for websites with lots of pictures

TTI – Time To Interactive

The last measurement in this series is when the website is loaded and ready to interact. Most page speed tests use this value as the basis for their analysis.
If you have considered all the problems described and implemented the corresponding measures, especially those for the First Contentful Paint and the First Meaningful Paint, then you are also prepared for a good TTI value.

Conclusion

We compared the top 4 measured values to determine the page speed and showed performance blockers as well as possible solutions for optimization. It turned out that Page Speed can not only be measured as one value. The measuring stations from the page call to the finished rendered website each have their own meaning for the human being and the machine.
The most important findings on the measurements presented are summarized here once again:
Time to First Byte:
✓ Important key figure to determine problems in the server-side process
✓ Detect latency and eliminate bottlenecks
First Contentful Paint:
✓ User recognizes that the website is being loaded, bounce rate drops
✓ Use caching, only load what is needed
First Meaningful Paint:
✓ User has the feedback that the loading process of the website has been completed.
✓ Image optimization and lazy loading make the top fold appear earlier
Time to Interactive:
✓ The most important measured value in most page speed tests: website ready for input
✓ Optimization is not a one-time measure but a permanent process.