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.
Page speed 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 CrUX, 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.
In this article, we explain the most important measured values from Pagespeed Insights and other Page Speed Test tools. We also give tips on how to improve these measurements through website optimization.
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:
Figure 1: Page Speed measures according to the website © wao.io
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.
In Ryte's Website Success tool, the Time to First Byte is displayed in the Performance Report. Ryte also displays an additional measurement value: separately, which is regarded as part of the TTFB. This is also regarded as a part of the TTFB.
Figure 2: Page speed performance from Ryte
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.
To reduce the connection time, the path to the domain resolution can be optimized. Google's name server with the IP address "220.127.116.11" is still popular, as is the "18.104.22.168" 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. Our tip: Websites and online shops from Germany, Austria or Switzerland do not always use a globally designed CDN. Here you can easily save money without losing quality.
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.
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.
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.
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.
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.
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.
In order to align website optimization with the needs of the user, image optimization is essential. In Ryte Magazine you can read how to optimize images in the creation process. For online shops with thousands product pictures and web pages with many editorial contents, this can become however 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.
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.
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.
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
Optimize your page speed with Ryte for FREE
Published on 02/18/2019 by Roland Guelle.
As CTO of Sevenval Technologies GmbH, founded in 1999, Roland Guelle is responsible for research and development. With around 170 employees in Cologne and Berlin, Sevenval has specialized in frontend solutions that enable a modern, fast and, above all, secure user experience based on historically grown IT system landscapes. Roland still develops himself today and likes to speak at developer conferences.