If your website is slow to load, one of the first reflexes you will probably have will be to check the weight of the pages. With which tool to measure, and then, how to optimize to improve the loading speed?
Here are some tips to check and reduce the weight of your pages, in order to improve your site’s performance, user experience, your conversions, and crawling by search engines thanks to good Core Web Vitals metrics.
Indeed, since Google integrated Core Web Vitals into its algorithm with the Page Experience update , loading speed is not only crucial for the quality of the user experience, but it also takes on even more importance for your SEO.
Moreover, if you monitor your performance by referring to Google’s PageSpeed score , optimizing Core Web Vitals is a must since they represent 70% of the score awarded by Google. How do you go about it?
Let’s start with a status report. In 2021, Statista reports that the average broadband download speed is around 105 Mbps on desktop and 54 Mbps on mobile.
What about page weight? According to HTTP Archive , the median page weight is around 2170 KB on desktop and 1940 KB on mobile.
On these pages, images represent about 970 KB on desktop and 876 KB on mobile (about 45%), and JavaScript 490 KB on desktop and 444 KB on mobile (nearly 23%).
State of the Web in 2021: Weight of pages, images and JavaScript (medians – HTTP Archive 2021 data)
As you will have understood, optimizing the weight of images using compression techniques, as well as the code (JavaScript, but also HTML and CSS), will allow you to make your pages lighter and therefore faster to load for your users. Loading speed is a priority UX requirement for your visitors, and Google robots will also be very happy to be able to explore a maximum of pages on your site in a minimum of time.
Let’s first look at how to measure the weight of your website pages.
Measuring the weight and performance of a web page
We have mentioned PageSpeed Insights which indicates a performance score, but to move forward based on concrete elements for a webperf optimization project, you will need to go further in understanding what your pages are missing to be fast .
In practice, how do you measure the weight of your pages? Nothing could be simpler, WebPageTest – a reference tool in the webperf community – will give you the answer in just a few moments.
All you have to do is enter the URL of the page to test, and observe the results expressed in Bytes.
WebPageTest test result indicating the weight of a web page
Are you equipped to monitor your SEO? Tools such as Screaming Frog also allow you to evaluate the weight of HTML on your site’s pages.
Once the crawl is complete, the drop-down menu in the upper left corner offers an “HTML” choice which gives access to the list of pages crawled, and their respective weights.
Naturally, not all websites have the same constraints. A Wix or WordPress blog with only text and a few images cannot be compared to an E-commerce site with many features, third-party scripts (tracking, customization, A/B testing, etc.) and other essential images to highlight products.
To compare like with like, and to see where you stand in your market, consult our monthly web performance ranking on the JDN , it is a very good point of reference to know where your performance is.
With this information, what should you do to optimize the weight, and therefore the display speed of your pages? Let’s see what you need to do on the frontend side if you haven’t already.
Levers for improving loading speed on the backend and frontend side,
for a page with a loading time of 6.2 seconds. Frontend optimization is the most important lever.
What slows down a web page loading?
The more elements (and therefore KB) the browser has to load, the longer a page needs to display. But in concrete terms, what can slow down a site?
The impact of the DOM on display speed
Start by monitoring the size of your DOM. This is the guide that will inform the browser about the content and structure of the page, even before it is rendered. Thus, the more complex and heavy the DOM, the more likely it is to degrade loading speed from the outset .
Be aware that Lighthouse (another Google tool for evaluating performance, which you probably already use, and which is used as the basis for calculating the PageSpeed Insights score), reports when the DOM contains more than 800 nodes, and displays an error message when it exceeds 1400 nodes. If a DOM with many nodes is essential for your site, you can optimize the rendering of the page by simplifying the CSS selectors .
In particular, you can assess the size and complexity of your DOM with the free YellowLabTools tool .
The impact of image weight on loading speed
As we saw in the introduction, images represent nearly 45% of the weight of pages on average – a downward trend compared to a few years ago, when images could represent more than half of the weight of pages.
On an e-commerce site, these images are essential to promote products, and on a media site, they are necessary to document or illustrate a news story.
However, if they are too heavy and/or poorly sized, they can harm the quality of the user experience.
Considering that more than half of visitors leave a page if it doesn’t load within 3 seconds , it would be a shame if images were responsible for increasing your bounce rates , and if they degrade the user experience instead of improving it.
Through its Lighthouse and PageSpeed Insights performance measurement tools, Google recommends compressing images in WebP format to optimize loading speed.
You will need to automate this technique to apply it on the fly to all of your content, which our engine allows you to do, with the possibility of compressing your images in a format even more efficient than WebP: AVIF .
Video player
00:00
00:12
And that’s not all: our engine also allows images to be automatically displayed in the right dimensions according to the size of the users’ screen and window, which is essential, especially on mobile ( 64% of browsing worldwide in 2021). This optimization also prevents the browser from loading unnecessary pixels (and therefore bytes) if for an image that is not the right dimensions.
JavaScript and CSS, essential for “stylish” pages but to be handled with skill
We have also seen that JavaScript represents almost a quarter of the weight of web pages (median). For complex sites with multimedia content, customization, chat modules , etc., it is difficult to do without it.
This is a lever that you can act on to optimize your users’ experience, in particular to improve interactivity; in other words, the First Input Delay (one of the Core Web Vitals) and its equivalent the Total Blocking Time, as well as the Time To Interactive (these last two metrics are included in the calculation of Google’s PageSpeed score ).
So, cleaning up your third-party scripts and prioritizing them when loading your pages will allow your users to enjoy an experience that is both rich and fluid.
If your site contains many third-party scripts and you feel it as a thorn in the side for your performances, you will see thanks to this study (that we conducted) that the number of third parties matters less than the way they are implemented. And to address this point, know that our engine offers a feature that allows to intelligently and automatically defer the loading of JavaScript files ( DeferJS ).
Besides prioritizing the loading of JS files, the weight of the files themselves must be optimized, just like for CSS (and HTML) files.
The solution: concatenate and minify !
Unnecessary characters are then removed from the code, and the files are compressed to be transferred as quickly as possible between your server and your users’ browsers.
Obviously, there is no question of handling these tasks manually, they can be automated, our engine takes care of that too.
Are you using external fonts? Are you using Google fonts, like almost 90% of websites? They will behave like third parties ! But fortunately, we have also provided features to automatically optimize the loading and display of fonts .
Plugins and Extensions
WordPress / WooCommerce, Magento, Salesforce Commerce Cloud, Wshop, Shopify or Prestashop… You have certainly chosen your CMS for its performance and features.
But some of these features are not native and require the installation of plugins or extensions, and it is not free for your web performance!
Indeed, they will add weight to your pages, sometimes to the point of making the loading time frustrating for your visitors.
As with third-party applications we’ve already discussed, avoid multiplying plugins, also check their performance, and limit their installation to those you really need.
Load peaks
Promotions, private sales, sales, Cyber Week, end-of-year celebrations… Your servers are probably losing count of the occasions when they experience traffic spikes.
To make these periods 100% profitable for your business, optimize your frontend so that your pages load quickly, even during busy periods when your server has to process mass requests.
If your site has an international audience, going through a Content Delivery Network to relieve your origin is particularly interesting. For a local audience, the CDN remains a fundamental good practice for the performance of your site… And Fasterize is precisely a Next-gen CDN , which optimizes the frontend in addition to bringing the content closer to the users.
Finally, another good practice to apply to secure your sales (which you can deploy in no time with our SaaS solution): a load shedding page to curb traffic and inform your users when they have to wait a few moments before finalizing their order.
Now that we have seen how to measure the weight of web pages, and some essential techniques for optimizing loading speed, you are wondering what impact these optimizations can have on your business, and on the treatment of your site by search engines?
How the weight of your pages influences the quality of the user experience, your SEO and your turnover
Nearly 70% of customers say that loading speed impacts their intention to buy online , and half are willing to accept the absence of animations or video if it allows the page to display faster. This data really highlights the importance of offering a rich experience but not at the expense of loading speed!
In terms of conversions, optimizing site speed can result in rates increasing by up to 40% , as we have observed with some of our clients.
When it comes to SEO, some sites powered by our SaaS solution have seen their SEO traffic increase by up to 25% , and a 15-point increase in PageSpeed Insights score .
On a technical level, the impact is visible on the number of pages crawled by Google. We made this observation several years ago with Rue Du Commerce, well before Page Experience update: the optimization of the frontend allowed this E-commerce leader to significantly increase the number of pages crawled by Google , in addition to moving from 40th to 1st place in the JDN webperf ranking in one year!
Bonus: Optimizing page weight to reduce hosting costs
The loading speed of your website pages contributes to better conversion rates and supports your SEO strategy… and it is also a lever for optimizing your hosting costs !
Yes, the more compressed and lightweight your files and resources are, the less space they take up on your servers, and the less bandwidth they take up to transfer to your users’ browsers. It’s all good.
Optimizing page weight: an essential lever for a high-performance site
Each element of your pages has a weight, and while it may be anecdotal for certain resources, the accumulation can become fatal for the performance of your site (the last straw, the last straw…).
Thus, optimizing the weight of files and resources (images, fonts , HTML code, CSS, JavaScript, etc.) is essential so that your users can access your content without feeling frustrated by waiting for it to load; and so that search engines can easily crawl your site to index as many pages as possible.
And once your resources are optimized and the weight of your pages reduced, how do you evaluate the impact on all your webperf KPIs – Core Web Vitals, but also Speed Index, Time To First Byte, Start Render and First Contentful Paint…? Which metrics should you track based on your business needs and technical objectives?
Find out in our white paper dedicated to webperf metrics:
