We Analyzed 5.2 Million Webpages. Here’s What We Learned About PageSpeed


  We analyzed 5.2 million pages for desktop and mobile. Here is what we learned about the speed of scrolling

We analyzed 5 million desktop and mobile pages to determine the factors that affect the speed of scrolling.

First, we established global reference points for TTFB, Visual Complete, and Fully Loaded loading time metrics.

We then examined the impact of image compression, CDNs, and hosting on the loading speed of sites.

Our data revealed very interesting (and surprising) information.

Here is a summary of our main findings:

1. In our analysis of 5.2 million pages, the average office TTFB speed is 1.286 seconds on the desktop and 2.594 seconds on the mobile . The average time needed to fully load a web page is 10.3 seconds on the desktop and 27.3 seconds on the mobile.

2. The average Web page requires 87.84% overtime to be downloaded on a laptop compared to a desktop computer.

3. Squarespace and Weebly compare leading content management systems with the best overall performance in mobile page speed . Wix and WordPress ranked near the bottom.

4. On the desktop, CDNs have the biggest impact on TTFB. However, on mobile devices, the number of HTML requests seems to affect the most TTFB.

5. The overall size of the page has a significant impact on the "fully visual" loading speed on desktop and mobile computers. Larger pages take 318% longer to load visually than smaller pages . We also found that gzip compression speeds up the loading of images on desktop and mobile computers.

6. The total weight of the page is the # 1 determinant of page speed at full load. Full loading of clear pages is 486% faster than large pages.

7. Wink and Gatsby are the fastest Javascript frameworks . Meteor and Tweenmax are the slowest. The fastest framework is 213% faster than the slowest .

8. Pages with very low or very high file compression have a higher than average processing speed (measured using the first pop-up painting).

9. Third-party scripts significantly slow down the speed of loading pages. Each third-party script added to a page increases the load time by 34.1 milliseconds .

10. We found that using responsive images provides the best overall image loading performance. The use of WebP has proven to be much less effective in reducing image loading times.

11. Web hosts GitHub and Weebly have the fastest overall TTFB performance. Siteground and Wix are the slowest hosting providers analyzed .

12. China, Japan and Germany have the fastest TTFB loading times. Australia, India and Brazil have the slowest TTFB times.

13. The use of the CDN correlated with a lower page rate performance . This is probably due to the fact that some CDNs work significantly better than others.

Benchmarks for key page load metrics

Our first task was to build benchmarks for important page rate metrics.

As you may know, "Page Speed" is actually composed of several distinct steps.

  Steps to Load the Web Page

Some of these steps occur at the server level. And others unfold in the user 's browser.

And to understand the speed with which pages load, we had to detail each of these steps.

More precisely, we have determined the average speed of:

  • TTFB: Time up to the first byte of the HTML doc response
  • StartRender: When rendering begins
  • Visual Complete: The user can see all the elements of the page
  • Speed ​​index: How fast does a user see a page load
  • onLoad: When all page resources (CSS, images, etc.) are downloaded
  • Fully Loaded: When a page is loaded to 100% in the user's browser

The Mean The TTFB speed is 1.286 seconds on the desktop and 2.594 seconds on the mobile.

  The average speed of TTFB on desktop and mobile

The average rendering speed is 2.834 seconds on the desktop and 6.709 seconds on the mobile.

  The average rendering start rate on desktop and mobile computers

The full visual average speed is 8.225 seconds on a desktop computer. 21.608 seconds on your phone.

  Complete visual average speed on desktops and mobiles

The average speed of the speed index is 4.7782 seconds on desktops and 11.455 seconds on mobiles.

  The average speed of the speed index on desktops and cell phones

The average speed in loading is 8.875 seconds on the desktop and 23.608 on the mobile.

  Average speed on desktop and mobile

The average full charge speed is 10.3 seconds on the desktop and 27.3 seconds on the mobile.

  Average full-load speed on the desktop and mobile phone

To remember: The loading speed of a web page is 10.3 seconds on the desktop and 27 , 3 seconds on the mobile. Pages loaded on mobile devices are 87.84% longer on average than on desktop computers.

Weebly and Squarespace offer the best overall speed performance. WordPress has one of the worst

To answer the question, what is the best CMS?

To answer this question, we determined the CMS used for all sites in our dataset. We then compared the TTFB performance of each of the CMSs we discovered.

According to our data, Weebly and Squarespace rank at the top for desktop computers.

  CMS page speed performance ranking

And for mobile page speed, Squarespace is # 1 … Adobe Experience Manager and Weebly top top 3.

  Performance ranking of speed of CMS pages (Mobile)

It is interesting to note that WordPress is only the 14th best CMS we have analyzed.

  WordPress ranks 14th among CMS for mobile page scrolling speed

Another very popular CMS, Wix, also scored poorly on desktop and mobile desktop loading speed.

  Wix is ​​near the bottom for desktop and mobile computers. page rate

Although WordPress has about 30% of sites this is clearly not optimized for the page load speed. This does not mean that WordPress is a bad CMS. It has other advantages (such as ease of use, a large library of plugins and SEO) that make it the ideal content management system for many site owners.

However, if you look strictly at the loading speed of the website, it appears that other CMS already have a distinct advantage over WordPress.

Remember: Among the leading content management systems, Squarespace and Weebly offer the best performance in reading mobile pages. WordPress and Wix rank near the bottom.

The use of a CDN can help the TTFB office. It is essential to minimize HTML queries for TTFB mobile

We have analyzed the impact of various page features on TTFB (elapsed time up to the first byte).

Here is what we found:

  Factors Affecting TTFB for Desktop and Mobile Computers

As you can see, using a CDN seems to improve TTFB for desktop computers and mobile devices. However, CDNs seem to be more useful on desktops than on mobiles. On pages loaded via a mobile device, the number of HTML requests had the greatest impact on TTFB.

Although we found a relationship between different page characteristics and TTFB times, page-level factors do not establish or break TTFB. TTFB is largely determined by the response time of the server, which we will discuss a little later.

To remember: The use of a CDN and the reduction in the number of HTML requests can accelerate TTFB, both on the desktop and on the mobile.

Large pages take 381% more time to "fill visually" compared to smaller pages

"Visually complete" is the loading of all visual content from a web page into the browser. A user.

  Visually complete

These can be scripts and other resources that load off-screen. However, from the point of view of the user, the page is loaded.

Visually complete is an important metric of page throughput, as it affects the subjective experience of the user on the speed or slowness of loading a page.

As long as the user can see. and use the page, it is fully loaded … even if there can still be loading and rendering of assets behind the scenes.

We found that the page size (TOTAL bytes) had a significant effect on mobile workstations and desktops.

  Factors with a complete visual impact on desktop and mobile computers

However, the page size is larger on mobile than on desktop computers.

On a desktop computer, the use of a CDN was more strongly correlated with a faster, visually more complete loading speed. The size of the page comes in second place.

On mobile devices, a CDN is only the fifth most important factor.

So if improving the charging speed of mobile phones is a top priority for you, I would advise you to do it as much as possible. you can reduce the size of your pages. This can mean the removal of third-party scripts. Or compress images. The exact steps will depend on your site. However, it is clear that when it comes to visually complete speeds, it's all about HTML size.

Keep in mind: CDNs can dramatically improve the speed of visually complete pages on desktop and mobile computers. However, CDNs have a much greater impact on the loading of workstations. For mobile devices, the total size of the page is the most important factor for full load times.

The total weight of the page is closely related to the loading speed of the "Full Loading" page

Finally, we have examined the factors that affect the loading speed of the "Full Loading" page. .

As the name implies, Full Loaded is the loading and rendering of 100% of the elements of a page.

The total size of a page is by far the most important factor. desktop and mobile.

  Factors Affecting Full Load on Desktop and Mobile Computers

The number of requests also plays a role in how quickly a page loads completely.

What is interesting about these data is that there is a strong overlap between desktop and mobile. Unlike many other measures that we have analyzed, Fully Loaded for desktops and mobile devices appear to be affected by the same set of variables (ie, page size and total number of HTML requests ).

However, the importance of page size and HTML queries should not This is not a big surprise.

Image compression, caching, and other steps typically reduce the loading time of a page. But they can only go so far. At the end of the day, for a page to be "fully loaded", a browser must load all the assets of a page. And the more assets to load, the longer the page will take to load.

It is probably for this reason that CDNs do not seem to have much impact on the loading speed of the fully loaded page (3rd in overall importance on the desktop, 10th on mobile). CDNs can improve the loading times of images . But they do not do much to help third-party scripts and other resources that can slow down the process.

Remember: The total speed of the fully loaded page is greater than any other variable in the two workstations. and mobile. Large pages (<.83 MB) take 486% longer to fully load compared to smaller pages (> 3.49 MB).

Wink and Gatsby are the fastest JavaScript frames for medium-sized web pages

When it comes to setting the priority of items to load on a page (and when), actually a lot of heavy work.

That's why 74% of websites use these frames to create effective, secure and standardized pages.

We first benchmarks the frequency of use of each framework on the web.

  Using the JavaScript framework

React is by far the most used JS framework (25.3% of sites use it). TweenMax (10.3%) and RequireJS (9.5%) are also quite popular

Next, we wanted to know which JavaScript frameworks worked best on small pages (<1,264,374 Bytes) medium (1,264,374 and 4,019,332 Bytes) and large (> 4,019,332 bytes).

For small pages, RightJS has arrived. on top.

<img class = "" src = "https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/impact-of-javascript-framework-on-fcp-page-weight- less-than-1264374-bytes.png "values ​​=" (max-width: 1400px) 100vw, 1400px "srcset =" https://cdn-backlinko.pressidium.com/wp-content/uploads/2019 / 10 /impact-of-javascript-framework-on-fcp-page-weight-less-than-1264374-bytes.png 1400w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/ 10 / impact-of-javascript-framework-on-fcp-page-weight-less-than-1264374-octets-146×300.png 146w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10 /impact-of-javascript-framework-on-fcp-page-weight-less-than-1264374-bytes-768×1573.png 768w, https://cdn-backlinko.pressidium.com/wp-content/uploads/ 2019 / 10 / impact-of-java script-framework-on-fcp-page-weight-less-than-1264374-bytes-500×1024.png 500w, https://cdn-backlinko.pressidium.com/wp-content/uploads/ 2019/10 / impact-of-javascript-framework-on-fcp-page-weight-less-than-1264374- bytes-1164×2384.png 1164w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/impact-of- javascript-framework-on-fcp-page-weight-less-than-1264374 -octets-709×1452.png 709w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/impact-of-javascript-framework-on-fcp-page- weight-less-than- 1264374-octets-582×1192.png 582w "title =" Impact of the JavaScript framework on the FCP, page weight <1 264 374 bytes "alt =" Impact of the JavaScript framework on FCP, page weight < 1,264,374 bytes" style="max-width: 700px !important"/>

For medium pages Wink and Gatsby performed better.

 Impact of the JavaScript framework on FCP, page weight between 1,264,374 and 4,019,332 bytes

And for large pages, Gatsby and Riot had the fastest FCP times.

 The riot is suitable for large pages

However, for small pages, it is significantly less effective (15 hours in total).

 The riot is not suitable for small pages

Point to remember: [ There is no "better" JavaScript framework for each situation. RightJS is your best choice for sites with many small pages. Gatsby seems to be ideal for websites containing mostly large pages.

Pages with low or high compression levels have the fastest loading times

Compressing page files on a server is a double-edged sword. On the one hand, the compression of files significantly reduces the weight of the pages .

However, compressing files before sending them from the server requires additional work on the browser because the client must uncompress them before rendering them.

As part of this analysis, we attempted to answer the following question: Does file compression really improve page processing speed?

To answer this question, we classified the FCP into three categories (Fast, Medium, Slow):

Fast: 0-1000ms
Average: 1000ms-2500ms
Slow: <2500ms [19659003] We then compared the speed of the FCP and compression levels of small, medium and large pages.

For smaller pages, lower levels of compression were associated with faster FCP loading times. However, loading times increase at very high compression levels (90-100%).

<img class = "" src = "https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/ impact-of-compression-on-fcp-page-weight-less- than-880337-bytes.png "sizes =" (width-max: 1400px) 100vw, 1400px "srcset =" https: // cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/impact-of -compression-on-fcp-page-weight-less-than-880337-bytes.png 1400w, https: //cdn-backlinko.pressidium .com / wp-content / uploads / 2019/10 / impact of compression on the page fcp-weight-less-than-880337-bytes-300×241.png 300w, https: //cdn-backlinko.pressidium.com/wp-content/uploads/ 2019/10 / impact of compression on the fcp-weight page -less-than-880337-bytes-768×618.png 768w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/impact-of- compression-on-fcp-page-weight- less-than-880337-bytes-1024×824.png 1024w, https://cdn-backlinko.pressidium.com/ wp-content / uploads / 2019/10 / impact of compression on fcp-page-weight-less-than-less 880337-bytes-1164x 936.png 1164 w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/impact-of-compression-on-fcp-page-weight-less-than-880337-bytes-709×570.png 709w , https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/impact-of-compression-on-fcp-page-weight-less-than-880337-bytes-582×468. png 582w "title =" Impact of compression on the FCP, page weight <880 337 bytes "alt =" Impact of the compression on the FCP, page weight < 880,337 bytes" style="max-width: 700px !important"/>

The medium sized pages had a similar distribution :

 Impact of compression on FCP, page weight 880 337-3 625 927 bytes

Large pages had an inverted bell curve distribution even more extreme:

 Dive into the FCP performance for pages compressing a moderate number of files

Specifically, pages compressing between 60% and 80% of their files produce the worst .

Therefore, with regard to improving the scrolling speed, very low or very high compression levels tend to work better. Low compression levels reduce the work required by the browser. And high levels of compression outweigh the imposing load on the client side with a smaller payload.

Remember: Pages with very low or very high compression perform better than pages with moderate compression. 19659130] Third party scripts have a negative impact on load time

So it's no wonder we've found that third-party scripts (such as Google Analytics, social share buttons and video hosts) resulted in slower FCP times.

 Third-party scripts have a negative impact on page loading time

In fact, we found that each third-party script increased page loading time by 34.1 milliseconds.

Our results are consistent with those of others ( like this one ). these third-party scripts have a huge impact on page speed.

Obviously, the impact depends on the script used. Some third-party scripts (such as Hotjar) load quite quickly. Others, including Salesforce, are notoriously slow.

In short, third-party scripts result in longer loading times. And the higher the number of scripts on a page, the slower its loading.

Idea to Remember: Every third-party script used on a page increases the loading time of a 34.1 millisecond page.

Improve the loading times of pages more than lazy Loading and using WebP

Images play an extremely important role in the performance of a website for two main reasons:

First, images occupy much of the total size of a page ].

Second, the attention of the user tends to be centered on the images appearing on a page . And if these images load slowly, it can have a negative impact on UX.

As the images can improve or reduce the loading speed of a site, we decided to compare the performance of 4 different methods of image optimization:

  • WebP: [19659144] by Google WebP is an image format whose size can be reduced compared to other file formats, but which allows to obtain a quality level of. similar image.
  • Enhanced Images: The versions of an image are broadcast based on the user's device, location, and so on. We have included the use of CDN (Content Delivery Network), image compression and other web optimization services in this category.
  • Report Offscreen Images When images below the fold load when a user selects that point on the page. page.
  • Reactive Images: When images dynamically adapt to the size of the browser window.

And when we compared these different approaches to Lighthouse Speed ​​Scores Responsive Images Arisen

 Reactive images are correlated to the lighthouse's best speed score

also analyzed which approach led to the highest number of lighthouse scores . And the results were very similar.

 Sensitive images are correlated to a higher percentage of 100/100 lighthouse speed scores

Note: Although WebP can improve image compression compared to the PNG and JPEG format, very few sites have so far implemented this new image format. Instead, most fast sites tend to focus on responsive images.

GitHub and Weebly Hosting offers the best TTFB performance. Siteground and Wix Have The Worst

We compared the transmission speed performance of the leading providers of web hosting.

Since the response time of the server has the largest impact on TTFB we analyzed the behavior of different key metric hosts.

Specifically, we classified the TTFB into three categories (Fast, Medium, Slow). And we looked at the percentage of appearance of each host in each category.

Here are the TTFB performance of each desktop web hosting provider:

 TTFB Performance Among Top Web Hosting Providers (Desktop Computer)

Github, Weebly and Acquia were the three main players in the TTFB workstation. Automattic, Wix and Siteground were the worst off.

We performed the same analysis for the mobile TTFB. Here are the results:

 The performance of TTFB among the leading web hosting providers (Mobile)

As you can see, Github works extremely well on both mobile and computer. Who, considering that Github Pages only serve static resources, should not surprise. This means that, in many ways, Github is not a 1: 1 comparison to "normal" web hosts.

Seravo, Netlify and Weebly complete the top 4 group. Wix and Automattic are at the bottom of the list. 19659003] What is retained of this analysis?

The TTFB is only one of many factors to consider when choosing a host. There are also costs, availability, customer support, features, and so on.

That said, when it comes to loading pages quickly on desktops and mobiles, Github Pages is by far the best option among major hosts. Wix and Automattic hosts typically have slow TTFB delays.

Remember: Among the leading hosting providers, Github and Weebly had the best desktop results. According to our analysis, GitHub and Seravo were the fastest mobile hosts. However, it should be noted that Github Pages only serves static pages, which gives it an intrinsic advantage over the other hosts scanned.

China, Japan and Germany benefit from the fastest TTFB loading times

We compared TTFB loading times for eleven countries in our dataset.

Here is a country-by-country breakdown for office speeds:

 TTFB Loading Times by Country (Office)

And Mobile:

. loading time by country (mobile)

Remember: China has the best TTFB performance for desktop and mobile computers. Next are Japan and Germany with page speeds above the world average. France, the United Kingdom, Canada, the United States and Russia have an average page speed. Australia, Brazil and India have speeds below the world average.

CDN pages have worse performances than those without CDN

One of our most surprising discoveries is that pages using a CDN actually worse than those that do not. 39, did not use CDN

This was the case for both desktops:

 The use of CDN was correlated to a faster speed of computer pages de bureau

Et mobile:

 Utilisation

En théorie, parce qu'il offre un contenu proche du lieu où se trouve l'utilisateur, un CDN devrait permettre d'accroître la vitesse de transmission des pages.

 Comment fonctionne un CDN

Toutefois, ce n’était pas le cas dans notre analyse

Nous avons émis l’hypothèse que tous les CDN ne sont pas créés égaux. Dans de nombreux cas, l&#39;utilisation d&#39;un CDN mal optimisé peut réellement ralentir les choses.

Et lorsque nous avons analysé les performances des 18 meilleurs fournisseurs de CDN, nous avons en fait découvert une différence de performances considérable. [19659099]  Performances de vitesse de page parmi les principaux CDN

Plus précisément, nous avons constaté que (sur le bureau), le meilleur CDN affichait une performance 3,6 fois supérieure à celle du pire. Ce qui aide à expliquer pourquoi les CDN n&#39;améliorent pas automatiquement les performances.

Pour faciliter la détection des personnes dont les performances sont médiocres, nous avons comparé les performances des CDN à la moyenne mondiale.

<img class="" src="https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/page-speed-performanace-among-major-cdns-compared-to-the-average.png" sizes="(max-width: 1400px) 100vw, 1400px" srcset="https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/page-speed-performanace-among-major-cdns-compared-to-the-average.png 1400w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/page-speed-performanace-among-major-cdns-compared-to-the-average-237×300.png 237w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/page-speed-performanace-among-major-cdns-compared-to-the-average-768×972.png 768w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/page-speed-performanace-among-major-cdns-compared-to-the-average-809×1024.png 809w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/page-speed-performanace-among-major-cdns-compared-to-the-average-1164×1473.png 1164w, https://cdn-backlinko.pressidium.com/wp-content/uploads /2019/10/page-speed-performanace-among-major-cdns-compared-to-the-average-709×897.png 709w, https://cdn-backlinko.pressidium.com/wp-content/uploads/2019/10/page-speed-performanace-among-major-cdns-compared-to-the-average-582×737.png 582w" title="Page speed performance among major CDNs compared to the average" alt=" Les performances de rapidité des pages parmi les principaux CDN par rapport à la moyenne [19659035] Nous avons ensuite placé chaque CDN dans l&#39;un des trois compartiments suivants:

  • Bon (% rapide et lent% sont supérieurs à la moyenne de tous les fournisseurs)
  • Moyenne (% rapide ou lent% sont supérieurs à la moyenne de tous les fournisseurs) )
  • Mauvais (% rapide et lent% sont pires que la moyenne de tous les fournisseurs)

Voici un résumé des performances de chaque fournisseur:

Ordinateur de bureau

Bon: Airee, Amazon Cloudfront, CDN Azure, CacheFly, EdgeCast, Fastly, Pages GitHub, Google Cloud, KeyCDN, MaxCDN, Netlify
Moyenne: CDN77
Mauvais: Akamai, ArvanCloud, Cloudflare, Fireblade, Sucuri

Mobile

Bon: Airee, Amazon Cloudfront, Azure CDN , CDN77, EdgeCast, Fastly, Pages GitHub, Google Cloud, KeyCDN, MaxCDN, Netlify
Moyenne: Lame de feu, Incapsula, Sucuri
Négatif: Akamai, ArvanCloud, Cloudfare

A retenir: L&#39;utilisation d&#39;un CDN n&#39;améliorera pas automatiquement les performances de vitesse de page. Certains CDN fonctionnent nettement mieux que d&#39;autres. Par conséquent, il est important de choisir un CDN performant sur les ordinateurs de bureau et sur mobile.

Conclusion

Si vous souhaitez en savoir plus sur la manière dont cette analyse a été réalisée, n&#39;hésitez pas à consulter nos méthodes d&#39;étude PDF

.

J&#39;aimerais maintenant vous entendre:

Quelle conclusion vous a été révélée par cette étude?

Ou:

Sur quelle conclusion comptez-vous agir? ] Dans les deux cas, faites-le moi savoir en laissant un commentaire ci-dessous.



Source link

Leave a Reply