George S. SEO Expert

What does website loading speed depend on?

Web pages loading speed affects the overall impression of the website. On the Internet, there is high competition between companies, and user requirements for the quality of sites are growing. If visitors have to wait for a long time for pages to load, they will leave that resource, and as a result, it will bring fewer conversions.

In this article, we will tell you about the factors affecting the rendering time of content in the browser. Website speed optimization involves analyzing them and finding suitable solutions.

How does website speed affect rankings?

When ranking, search engines consider the relevance of the content to the search query and the overall convenience. Page display time is one of the main parameters that affect its position in the SERP.

Google had some experiments to determine the relationship between loading time and user behavior. The bounce rate of slow pages, when visitors leave the site, was high. The search engine included this as a criterion for evaluating the quality of a resource.

In 2020, the Core Web Vitals report appeared in the Google Search Console service. To assess the speed, two new indicators LCP and FID were introduced, which have threshold values ​​in time. LCP or Largest Contentful Paint is the time the largest segments of a page are rendered on the screen. FID or First Input Delay refers to the response time of the site as soon as the visitor clicks on any of its elements, such as a button or a link.

In 2021 Google began to take into account the Core Web Vitals of the site. Studies have shown that pages that meet the recommended thresholds have a 24% reduction in bounce rates.

How is the page rendered?

Each web page is an HTML file hosted on a server. It is an HTML (HyperText Markup Language) markup language document consisting of code and file links that the browser interprets as interface and content.

What the site visitor sees on the screen is the result of the exchange of data between the browser and the server. When a user navigates to a page, the browser contacts the server to get the content and display it on the screen.

A page can consist of different components such as a menu bar, buttons, texts, pictures, videos, and to display them, the server must process many requests. The sizes of files that the browser downloads from the links specified in the code are also reflected in the total download time.

8 factors affecting web page display time

In this section, we'll take a closer look at which page elements affect page speed. Working with them will reduce the load on the server and thereby increase the performance of the resource for users.

1. Number of HTTP requests to the server

The transfer of HTML page data from the server to the browser occurs using HTTP (HyperText Transfer Protocol) protocols. The number of HTTP requests processed by the server affects the download speed of the content.

Solution: Reduce the total number of HTTP requests. To transfer page content in full and speed up its processing time, you need to optimize the total number of page files, for example, combine several CSS or JS documents into one.

2. Content caching

A cache is a copy of previously downloaded content. When the browser displays them to the user on a revisit, they don't need to render the entire page again. Thus, caching is positively reflected in the speed of rendering the website on the screen.

Solution: keep copies of content by caching. This method is often used for CSS and JS code, because these files can be large, but their content rarely changes. Caching can be implemented both on the browser side and on the server side. HTTP headers such as Expires and Cache-Control are used to control how long data is stored in the cache.

3. Size of CSS and JS code

CSS (Cascading Style Sheets) and JS (JavaScript) are pieces of code that are responsible for the design of the page. CSS is used to determine the colors of the background, buttons, menus and other interface elements, and JavaScript makes the site interactive. When CSS and JS elements are large, it slows down page rendering time. At the same time, part of this code may be redundant, for example, double spaces, line breaks, developer comments.

Solution: minification of CSS and JS code. Minification is the cleansing of code from elements that do not carry functional value. This helps to reduce the size of the CSS and JS components and, as a result, the overall size of the HTML file.

4. Placement of CSS and JS elements on the page

The browser processes the page code from top to bottom until it has completely loaded it. The appearance of the page can depend on the sequence in the placement of tags, scripts and links. Especially when loading time is affected not only by internal, but also by external factors - speed Internet, hosting provider, etc.

Solution: Place CSS elements at the top of the page and JS at the bottom. To render quickly and consistently, the tag of the page places priority blocks of code or links.

For example, when CSS styles are placed at the top of a page, the browser renders the base style elements and then the rest of the page's content. Putting CSS at the bottom can block the display of the entire page. Conversely, large JS files that complement the design, but are secondary content, are best placed at the bottom of the HTML document.

5. Image size and format

As a rule, visual files are an important part of the page. But if you add images to the website without prior optimization, the browser will spend much more time displaying them. The speed is affected by image parameters such as weight, size and extension. All of them require special attention.

Size

The larger the image, the higher the traffic consumption. Some photos in their original form have a size of several MB, and there may be some of them on one page. Thus, the total size increases significantly and prevents normal loading. At the same time, the volume of optimized, that is, compressed files, can be several times smaller than the original ones.

Resolution

The width and height of the picture affects its clarity and quality, but when adding a photo to the page, you need to take into account the size of the devices from which the website will be viewed more often, that is, a PC and a smartphone. In addition, images are usually assigned to certain segments of the page, limited to smaller parameters than the original file. Since it often does not make sense to use very large images, the speed of a site with medium and small photos is higher.

Format

The most common photo format is jpeg. PNG images tend to be larger, which makes the page load slowly. According to some research, the best in terms of quality and data savings are the modern WebP and AVIF file formats.

Solution: image optimization. Use special programs and online services to compress images. They can load many graphic files at the same time, resulting in their copies being smaller. The width and height of the photo is changed in graphic editors: Photoshop, Paint, and so on. The photo extension is edited in the same way, for example, by saving the png file in jpeg format.

6. Number of page redirects

Redirects are a chain of URLs that automatically redirect users from one page to another. Usually they are used if the page has been deleted or its address has been changed. The redirect happens quickly, after which the user sees the content at the new URL instead of a 404 (“Page not found”) error message.

If the page has a redirect, the browser makes another HTTP request to display the actual page. Usually this is not a problem for a chain of two redirects, but if there are several redirects, there will be more requests and, as a result, they will take more time to process.

Solution: Minimize the number of redirects. This can be done by reducing the number of URLs to two - the original and the new one. If the site is configured to redirect to the mobile version, then to speed it up, it is better to use adaptive design, when the page adjusts to the screen size, but its address remains the same.

7. Using the CDN system

The geographical remoteness of the user and the server can affect the download speed, depending on whether the CDN (Content Delivery Network) is configured.

When a browser requests a page, its data passes through the nodes connecting the servers and reaches the user's device. The task of CDN is to choose the shortest path for transferring content. Caching is used to reduce the size of transferred files.

Solution: Connect a content delivery network. CDN technology will be especially relevant for resources with a great number of large files. When choosing a CDN provider, you should study the map of its servers and choose the option with nodes located close to the target regions in which the company is interested.

8. Setting up file archiving

If your site is configured to compress HTML pages and CSS/JS files, the amount of data sent to the server will be less. One common technology is archiving text content in gzip format. The browser receives the code in a reduced form, after which it unpacks it. This has a positive effect on the content playback time.

Solution: Use gzip compression. The advantage of the technology is that it is supported by most browsers and servers. The possible gzip compression level is from 1 to 9. The archiving process takes place on the server side. This service is often provided by the hosting provider.