If you have a website or eCommerce, you should carefully consider one of the most important factors that determine its performance: the loading speed of web pages.
Do you know how long your site takes to load?
If you still can’t answer this question, in this article I’ll explain how to do a website speed test, how to read pagespeed Insights data and how to implement some of the most important optimization techniques to solve any errors or problems.
The loading speed of the pages of the site is a very important metric both for people and for positioning on Google.
What is the website speed test
Have you ever done a speed test of your website?
If you can’t deal with it or you think it’s too complicated, and you want to ask, contact us to rely on our professional support, understand how your site is going, what problems it records and how to correct them. You will have a clear picture with references explained and illustrated.
If you want to do it yourself, you can start with a speed test with Google pagespeed Insights, or with an analysis to measure the loading time of web pages, identify any critical issues and follow the instructions to correct errors.
The test can be performed with online tools, specific software and free, and is based on different parameters, including Core Web Vitals, file size (images, scripts, CSS, etc.), the amount of HTTP requests, the server response time, the code with which the site is written, etc.
Speed test with pagespeed Insights: the data that provides the analysis
To measure website speed, Google created this free tool that uses Lighthouse (open source tool integrated into Google Chrome devtools).
Let’s get to it. It should be noted that generally those who test the speed of the site, use more tools because the results can vary and with them also the correction specifications that can be more or less detailed.
In fact, in the dedicated paragraph, I point out other free software among the most valid to measure the performance of your site.
That said, before starting the speed test with the various software, it is good to consider two factors that affect the output (the result):
- the cache: it is good to test the site with both cache enabled and cache disabled, observing how it can change the result to a cross-check with multiple tools
- the location: considers the geographical proximity to the server, which affects the loading times of the pages. To solve this problem, if the content is also enjoyed by people from distant countries, you can enable a CDN system – content distribution network, distributed server network.
To start the analysis with pagespeed Insights just enter the URL of your website in the search bar and press “Analyze”.
Once the analysis is complete, pagespeed Insights makes an overall assessment of the performance of the site, expressed with a score between 0 and 100.
The score is divided into three categories: poor (0-49), average (50-89), and good (90-100). Obviously, the higher the score, the better the site performs, distinguishing between performance on Mobile and Desktop Devices by taking the url twice, once with a mobile user-agent and once with a desktop-user agent.”
The advice is not to rack your brain too much to reach 100!
It is not so much the number that matters, but resolving reported errors, especially those that mar mobile browsing.
In addition to the overall rating, PageSpeed provides information on accessibility, best practices and search engine optimization (SEO), and a set of data related to themetrics of the Core Web Vitals, that is, Google’s set of metrics that measure user experience on the website based on three key factors:
- page loading
- interactivity
- visual stability.
Some of the metrics that PageSpeed Insights examines:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- First Contentful Paint (FCP)
- Interaction to Next Paint (INP)
- Time to First Byte (TTFB)
- Total Blocking Time
- Speed Index
What are the most important metrics of pagespeed Insights
The whole point is to understand which metrics are the most important for the loading speed of your pages. Among those that most affect page load speed, you should consider:
- Page Load Time (Page Load Time).
This metric takes into account the total time it takes to fully load a page.
- Time To First Byte (TTFB)
The Time To First Byte indicates the time elapsed between when an HTTP request is made to when the first byte of response data is received by the server.
In practice, it represents the time taken by the server to start sending data in response to the request.
Poor TTFB scores can be the spy of a website populated by many large files or it can be the signal that you have to change servers to increase the performance of the site.
- Number of HTTP requests
The number of HTTP requests is a key factor that can affect the performance of a website. Each time a page is loaded into the browser, multiple HTTP requests are made to get all the necessary items between images, CSS files, JavaScript files etc.
A high number of HTTP requests can slow the overall loading of the site. If there are too many requests to manage at the same time, the server and browser may become overloaded, causing significant delays in loading pages.
- Core Web Vitals
Largest Contentful Paint: il tempo che impiega per caricare l’immagine o l’elemento di testo più grande di una pagina.
First Input Delay: il tempo necessario per l’interazione dell’utente con una pagina sulla quale compie delle azioni, come per esempio fare clic su un link o uno scroll.
Cumulative Layout Shift: questo parametro misura la stabilità degli elementi in pagina, ovvero se i vari elementi si spostano una volta caricata la pagina.
Be careful!
Recently (at the time of writing this article it is May 2023) Google announced that one of the core metrics of Core Web Vitals will be eliminated and replaced with a new metric that better represents the user experience.
The new metric is called “Interaction to Next Paint” and it has currently moved from the experimental state to the waiting state.
we’re standing by.
Here the Google’s announcement.
INP is no longer considered experimental and will instead be considered a metric of Core Web Vital waiting for confirmation. This is a new designation to indicate that INP has demonstrated its readiness to replace FID, but we are not making the change yet.
To give the ecosystem time to adapt, INP will officially become a stable Core Web Vital metric in March 2024.
Just to give a preview of the new metrics:.
INP measures more accurately the time it takes a page to become responsive. A poor value occurs when you click on an object, the intended action (such as enlarging an image) does not happen quickly.
What are the errors that slow down a website
What are the errors that slow down a website
Factors / errors that cause a site to slow down are several, among them:
- technical factors, such as image size and file compression
- hosting factors, such as server speed and bandwidth
- Website development factors, such as CMS selection and code writing.
Among the errors that can cause a site to slow down include the use of unoptimized images, excessive HTTP requests, use of heavy plugins and scripts, inefficient hosting, and use of custom fonts.
1. Unoptimized images are often the main cause of slow websites. If images are not optimized, they can take up too much space and slow down the page load time. To avoid this problem, it is important to use images with adequate resolution and compress them to reduce their size.
2. Too many HTTP requests: every time a browser requests a resource (image, CSS file or JavaScript) from the server, an HTTP request is made. If there are too many requests, the page load time increases. To avoid this problem, it is important to limit the number of HTTP requests by combining CSS and JavaScript files.
3. Cache has not been configured/enabled: The browser cache allows the site’s files to be temporarily stored on the user’s device, in order to reduce page load times. If the cache is not enabled, the browser will have to download all the site files all the time, every time the user accesses the page, slowing down the loading time.
4. Heavy plugins and scripts can fatigue and slow down the site. Unless strictly necessary, I recommend minimizing them or avoiding those that can be replaced with (well-written) code.
5. Inefficient hosting: The choice of provider is very important to ensure that the website performs well. Slow or inefficient hosting is a critical factor that is often underestimated. Instead, it accounts for at least 50 percent of a website’s best performance. It is no coincidence that many sites with larger, forward-looking goals are migrating from traditional hosting to cloud servers.
6. Custom fonts: Aesthetic side I understand the desire to make the site more attractive, performance side however I urge that custom fonts slow down the site. A good compromise would be to use them but compress them.
How to improve site speed
The other side of the coin presents everything that can instead improve site performance by reducing the file size with Gzip, optimizing images, reducing the number of HTTP requests, enabling browser caching, resorting to the use of a Content Delivery Network (CDN), and resolving the critical issues highlighted by the Core Web Vitals.
In practice, the steps to be taken to improve page load times:.
- Reduce page size: try to reduce the total size of the web page by removing any unnecessary files and reducing the resolution of images (enable compression of large files and images via Gzip and an ad hoc plugin if you use WordPress).
- Takes advantage of the browser cache to temporarily store and retain static website files on the user’s device, so that it is not necessary to request them again each time the site is visited.
- Compress CSS files, JavaScript, the larger elements that a web page must load and you should minimize or eliminate redundant ones, duplicate data, to reduce the number of requests and downloads that a client and server must perform to properly load the page.
- Remove JavaScript render-blocking, that is, a portion of JavaScript code hinders and blocks the page loading process. Third-party scripts are to be blamed.
- and then…have the most important content load first, such as the text of an ‘above the fold’ page, which should be loaded before the third-party widgets.
This can be done by specifying the order in which scripts are loaded or by using techniques such as prefetching and preloading, in deferring the loading of scripts; in making them asynchronous, so that the browser can load other elements at the same time; inserting small external JavaScript resources within the HTML document to reduce the number of requests the browser has to make.
Basically, to prevent the loading of JavaScript files from slowing down the loading of the main content, you can use the “async” or “defer” attribute in the script. This way the browser continues to load the rest of the page while the JavaScript file is being downloaded in the background.
Inline CSS critical: The critical or “above the fold” CSS contains the essential style rules for the initial display of the page. You can embed this CSS directly into the <head> element of the page, so that it loads immediately along with the rest of the HTML structure. This avoids the delay caused by loading an external CSS file.
Deferred Loading: You can apply deferred loading or also known as lazy loading for images and other non-essential elements.
This will delay the loading of images, videos or scripts until they become visible in the user’s visual space, and allow you to load important content first.
- Uses a Content Delivery Network (CDN), which is the network of servers that allows content to be distributed globally while reducing latency and loading times.
- Use optimized and compressed images: images with appropriate resolution for web browsing.
- Choose quality hosting, if you want to improve site speed, you need to invest in a web host that ensures a server response time that is not slowed down by factors related to poor provider efficiency. This involves migrating to new hosting.
Other tools to measure website speed
Not all tests or page speed tools will give the same results. That’s why it’s important to cross-check multiple tools.
In addition to Google PageSpeed Insights, other free tools to try include:
- GTmetrix
- Pingdom
- WebPageTest
- KeyCDN
- DareBoost
- Web Page Analyzer
- YSlow
- Chrome DevTools
- Site Relic
- dotcom-monitor
Why website speed is important
A survey conducted by Google found that the bounce rate of websites is as high as 31 percent with loading times of one to three seconds. This means that people leave the site that does not load within those few seconds.
Slow loading times is one of the strong>most impactful technical errorson site performance, especially when browsing from mobile devices.
speed is now a critical factor in improving Google rankings, attracting/retaining visitors and increasing conversion opportunities.
But especially in this age of great digital transformation, riding a revolution that is changing the world practically, a slow site lacks the basic prerequisites for competing online.
A site that loads slowly is a source of frustration for visitors and is bound to be abandoned before they read its contents, because we have all become accustomed to speed and expect pages to load sooner rather than later.
So even if you have outstanding content, the risk is that no one sees it. In fact, the site is abandoned because of the bounce rates of slower pages.
As a result, Google, receiving an abandonment signal from the user, ends up undermining the site by making it decline in ranking.
This happens because Google, in this case, wants to guarantee a more than excellent experience for those browsing through the results of its search pages.
In this regard, he clearly expressed that the loading speed of web pages is a ranking factor for desktop and mobile search results.
Here is a summary of the reasons why you should optimize your site or eCommerce speed:.
- Slow site frustrates people = Unsatisfactory user experience: users expect fast page load times on mobile and desktop devices. The slower your page is, the longer it takes for the first interaction and the higher the bounce rate. This negatively impacts both metrics and profits.
- Slow site frowned upon by Google: Google places importance on page speed in its ranking algorithms, especially on mobile, but how much these affect ranking rankings is unknown.
- Slow site = poor functionality of high-converting pages: Page speed also affects the entire operation of the site because it can affect, for example, the loading of shopping carts or blog posts, which cause high bounce rates.
Slow site = poorly made site, low authority and trust: A slow site “by the skin of its teeth” does not inspire trust or authority, suggesting that if it is slow it means it suffers from technical problems. It is poorly constructed and does not have well-written code.
As much as site speed is critical, it is also important to remember that other elements contribute to making a site perform: the quality of the content and structure of the site, its architecture and how information is organized within the pages; simple, if neat, graphics; and absolutely responsive.
To conclude, I think it is quite obvious the importance of speed testing a website and reading PageSpeed data for any website associated with a company with an online business.
Website loading speed has a significant impact on user experience and search engine rankings, so it is really important to offer high performance and fast loading times to our customers.
A “one-size-fits-all” solution does not exist, but with our experience and customized solutions, we can help optimize the performance of your website.
Contact us if you want to improve the performance of your site or eCommerce: we can support you with our hosting and cloud solutions.
