Page Speed: How to Make Page Load Faster and Significantly Enhance SEO

In our extremely fast modern world one of the main things that everyone hates is waiting. Is your website loading slow, with errors and delays? Bad news: this is why you’re constantly losing your potential customers. Good news: with a correct and professional approach this imperfection can be corrected and increase your chances of achieving success. Page speed impact on user experience and SEO is undoubtable. However, there are many other reasons for site load time importance as well. We’ll discuss them below. Moreover, we’ll provide you with the list of key metrics and tools for their measurement. As a bonus, we prepared Q&A session with the CTO of Perfsol. Wait no more to start reading!

Page Speed: How It All Started

Early period (1996-1998)
The history of this concept can be traced back around 30 years. The appearance of “page speed” is tightly related to the emergence of the Internet. When the use of the Internet became more and more popular, website creators faced the need to improve their user’s experience and ensure the fastest loading of pages and their content.

1998 became another important year in the history of page speed. Could you guess why? The thing is that Google, the most popular search engine giant, entered the market. People started to search a lot of information, and the speed of search, as you know, depends on the general page speed.

Development of new web technologies and emergence of the instruments to assess page speed (2000-2010)
In this period, developers and other tech experts were focused on creating the solutions that make it possible to measure page speed and optimize it. That's how WebPageTest appeared. It was one of the first instruments that helped developers assess site load speed and enhance the performance of their websites.

In 2009, Google presented its own solution called Google Page Speed that not only measures the speed of loading but provides effective recommendations on its improvement as well. In the following year, Google made the official statement regarding page load speed. Starting from it, page speed became one of the most important factors that impact search engine rankings.

Mobile Internet and the need of websites to adjust to its peculiarities (2011-2020)
With the growth of popularity of smartphones and other gadgets, the use of mobile Internet came first place. According to the new trends, Google updated its algorithms, boosting the websites that were adjusted to the mobile Internet specifics. Mobile SEO site speed became a new challenge for tech experts. In this period Google presented its Accelerated Mobile Pages (AMP) and additional updates to Google Page Speed. Moreover, Google integrated its core metrics to assess page load speed. They were called Core Web Vitals. Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift were defined as crucial factors that set the quality of general user experience and page speed for SEO.

Recent years (2021-till now)
Google Search Console and other analytical platforms appeared, making measurement of load time of website more convenient and simple. Tech experts started to use AI to analyze page performance, users behavior, and other important characteristics, providing recommendations on how to improve page speed for SEO and general customer experience. Moreover, some AI instruments demonstrated their ability to automatically optimize page speed. React, Angular, and Vue frameworks integrated new approaches and features to improve page load speed. Another prominent event was the creation of the 5G Internet. It boosts page speed significantly, however, if the website page is too large and not optimized properly, there can still be some problems with page loading speed. So the question “how to make page load faster” is still challenging and relevant nowadays.

Why Your Website Needs PageSpeed Optimization

As we have already mentioned in the previous paragraph, page load speed is of crucial importance for your website. Let’s take a closer look at statistics that will definitely make you think of how to make a page load faster:

• In average, website loads in 8.6 seconds in mobile (Tooltester).
• The pages that are in top of Google ranking loads in around 1.65 seconds (bloggingwizzard).
• More than 80% of online users stated that they want websites to load in less than 3 seconds (WebFX). Taking into account this fact, 40% of users claimed that they will leave the website if it will load longer.
• The loading speed of online shops is extremely important for 64% of users. They stated they will switch to another shop if they have to wait too long till the page loads (hobo).
• Around 80% of online shop visitors said that they will never visit the online shop again if the experienced poor page load speed (HUCKABUY).

In general, page speed optimization is important for the following reasons:

• It defines general user experience. If you don’t want to make your website visitors annoyed and want to ensure smooth and convenient interaction with your website, you need to take care of how fast the content is loading and how fast the website provides responses to the users requests.
• Better conversion = more income. The faster your website loads, the more chances that the user will implement the target action. And vice versa, if your customers have to wait too long, it’s completely predictable that they will leave the website and your bounce rate will grow.
• More organic traffic. Google identifies pages with great load speed and places them in higher SEO ranking. It means that more people can see and visit your website. So you will have more potential customers.
• Increased customer loyalty. Great experience with your website stimulates your visitors to return and make more target actions.
• Optimization of your resources. When your website loads fast, it reduces the load on servers and hosting costs.

Page Speed: Key Metrics and Tools for Measurement

Now let’s discuss in more detail on what metrics you should focus to ensure the best loading page speed:

• Largest Contentful Paint (LCP) it’s time when all page content (images, videos, text, etc) become visible. The most optimal amount for this indicator is 2,5 seconds.
• Cumulative Layout Shift (CLS) it’s about unexpected layout movements that can happen during page loading. The more stable your page layout is, the better.
• Time to First Byte (TTFB) how much time does it take for a browser to receive the first byte of data from the server? If more than 200 milliseconds, you should think of improvements.
• First Input Delay (FID) this indicator helps to define the duration of the delay between the user’s action (for example, tapping the button) and server’s response.
• First Contentful Paint (FCP) characterizes how much time is needed for the browser to show the first part of content after the page loading.

The following tools will help you measure these indicators correctly:

• Google PageSpeed Insights it’s free of charge, created by Google, able to evaluate both mobile and desktop website versions and provide valuable insights.
• GTmetrix is popular due to its detailed analytics and reports that are easy to compare. Also it provides great visualization and ability to pick different locations for testing.

Make Page Load Faster: Technical Aspects

Now let’s dive into the Q&A session with the Perfsol Co-Founder and CTO Mykola Breslavskyi. He has extensive experience in site load speed optimization, so knows the drill and is more than happy to share his experience!

1. What are the primary factors affecting our website's loading speed?

Factors affecting website loading speed:

• The number of libraries used on the client side
• The size of images and fonts, as well as their loading strategy
• The number and optimization of styles
• The use of third-party scripts that can temporarily block page rendering
• Pages with a lot of content will load longer than those with less content
• The presence or absence of caching
• The server location where the website is hosted and the use or non-use of a CDN
• The presence of heavy server requests - it's better to break a large request into several smaller ones and load the components that receive this information sequentially
• Clear styling. Try to style each element as clearly as possible - by class or ID. Minimize the use of complex selectors.
  The choice of a styling library. For example, Tailwind needs to load its core styles first and in a specific sequence, which makes it impossible to isolate critical CSS. In contrast, CSS-in-JS libraries support this capability automatically.

2. How do you prioritize the optimization tasks for improving page speed?

You can start by implementing best practices, such as using built-in components like Image, Script, and Link in Next.js. The next step is to check if all the libraries we send to the client side are necessary. After that, the focus should be on improving the code - code splitting, proper use of server and client components, using modern array methods instead of outdated ones, and more.

3. Can you explain the difference between First Contentful Paint (FCP) and Largest Contentful Paint (LCP)?

FCP (First Contentful Paint) is a metric that shows how much time has passed until the first element appears on the screen, while LCP (Largest Contentful Paint) is the time when the largest element present on the screen appears. FCP primarily depends on the speed at which the server responds to the request. This is influenced by the server's location relative to the client, the use of SSG, SSR, and the number of libraries loaded on the client side. LCP depends on how quickly the browser can process all the components that need to be displayed on the first screen. If there is a large image on the first screen, it makes sense to add priority loading to it so that it preloads along with the critical content. Additionally, LCP can be increased by third-party scripts with high loading priority or complex computations occurring in a component higher than the one Google Pagespeed uses to calculate LCP.

4. How to reduce page load time in JavaScript?

• Remove unnecessary or non-essential libraries
• If possible, defer the loading of heavy libraries
• Split the code into logical parts so the browser can load them separately
• Defer the loading of images and elements that are not on the first screen
• Optimize styles by creating a critical styles file and loading only it initially
• Remove scripts that block the rendering process if possible
• Break large backend requests into several smaller ones
• Utilize caching
• Maximize the use of server components
• Use dynamic imports
• Avoid or minimize the use of querySelector. If you need access to an element after it has been created, use a ref.
• There might be scenarios where heavy computations occur inside a component, but their results are displayed only under certain conditions. In this case, it's better to perform these computations conditionally. This might slightly delay the display of the result but will improve the overall performance of the site.

5. How does image optimization impact page load time, and what techniques do you recommend for it?

Using images of appropriate size and quality significantly impacts loading speed, as images are usually the heaviest part of the page. Next.js provides a built-in Image tag for automatic image optimization, which helps deliver the right image for the visitor's device. Additionally, you can offload image storage to third-party services like Cloudinary, which use CDNs to deliver images. Regarding the use of icons, you have three options:

• Third-party icon libraries
• Importing SVGs as components
• Using SVGs within the Image tag

The first option allows you to use a wide variety of icons without importing or storing each one individually and enables quick customization. The second option allows you to select only the needed icons while maintaining ease of use. However, both options have the drawback of potentially slowing down the site. From this perspective, the optimal solution is to use the Image tag. Our experience in replacing icons as components with the Image tag resulted in a 4-5 point increase in Google Pagespeed scores.

6. What are the best practices for leveraging browser caching?

Caching is an essential aspect of optimization, as it significantly increases the loading speed during repeat visits to the site. It is important to find a balance between user convenience and the frequency of content updates on the site. Next.js has its own caching mechanism, allowing for content updates on the site at regular intervals or on-demand. Additionally, modern hosting providers like Vercel have their own caching systems. Another way to improve cache utilization is to update content only when changes have been made to the database. This requires additional configuration, but ultimately, you will achieve excellent optimization of your resources.

7. How do you approach reducing server response time?

To achieve this, it is advisable to choose a server located as close as possible to your main visitors and to optimize requests by making them as simple and small as possible. One effective solution is to use a CDN. Additionally, avoid performing heavy computations on the server unless necessary. Such computations should be deferred until they are truly needed.

8. Can you explain the benefits of using a Content Delivery Network (CDN) for our website?

As we mentioned previously, website speed is affected by the distance between the client and the server. A CDN allows you to reduce this distance by duplicating the code on several servers and choosing the one that is closer to the client.

9. How do you handle render-blocking resources in our site's CSS and JavaScript?

Blocking resources need to be reduced in size and minimized in quantity. For example, the code for displaying a CAPTCHA can be loaded when the visitor starts interacting with the form. To minimize CSS, it's necessary to separate critical and non-critical styles. Third-party services can help with this. Modern CSS-in-JS libraries perform this procedure automatically. To reduce JavaScript, minimize the use of third-party libraries and verify the correctness of their imports. For example,
import {xor} from 'lodash
and
import xor from 'lodash.xor
yield fundamentally different results. In many cases, using large libraries with diverse functionality is unjustified from an optimization perspective. It often happens that only three components from a large library like AntDesign are used, two of which can be replaced with native code, and one with a library that is 5-10 times smaller than a single AntDesign component.

10. Can you discuss the importance of lazy loading for images and videos?

For most cases, this approach is best practice. The only exception is the images on the first screen, which should be loaded as soon as possible.

11. How do you ensure that third-party scripts don’t negatively impact our site’s performance?

You can check the impact of third-party scripts on website speed using Google PageSpeen Insights and Lighthouse, as well as by running a code analyzer. Large libraries that are sent to the client will negatively affect the site speed.

12. What methods do you use to optimize the critical rendering path?

First, we need to minimize critical resources, as well as minimize the impact of CSS. Focus on the effective management of JavaScript as it can block page rendering. Then compress assets, integrate lazy loading, and prioritize the loading process.

13. Can you explain how reducing the number of HTTP requests can enhance page speed?

Each request takes time to execute and process the result, so a large number of requests will slow down the site. On the other hand, by using streaming, you can break the page into logical parts that receive data gradually rather than all at once. This positively affects the site's loading speed, as the page will be delivered to the client in parts. Additionally, it is important to check for unnecessary requests. Due to incorrect dependencies, a request might be executed twice. Alternatively, there might be content that is critically needed in several components or on multiple pages, and instead of making a single request and storing it in a state manager, you repeatedly request it anew each time.

14. How do you address issues related to Time to Interactive (TTI)?

All the recommendations we discussed above will come in handy. In the context of TTI, the parameters of blocking (and its reduction) and the correct distribution of code between server and client components will be especially important.

15. How do you stay updated with the latest trends and techniques in PageSpeed optimization?

At conferences dedicated to SSR frameworks, a lot of attention is always paid to website optimization and new tools that appear for this purpose.

Hope that our article was useful for you! If you need expert consultation on how to make pages load faster, if you want to improve page performance and enhance pagespeed and SEO, reach out to Perfsol! Can’t wait to help you improve your SEO website speed and user experience!