Why does the website take a long time to load

We live in a fast world and we don't want to wait long. This is especially true when using the Internet. A long loading of the website makes us mad and we usually leave the unloaded page after a few seconds. However, do you know what are the factors involved in loading a website? There are many of them.

The data size of the page being loaded

The larger the page, the more data needs to be downloaded from the server to the browser to load. The site consists of many elements that can be optimized. However, the largest share is mostly done by pictures and videos. Furthermore, it can be due to huge structure of HTML code, i.e. DOM model, or the use of a large number of JavaScript and CSS libraries.

Images can be optimized in various ways, for example

• usage of the modern WEBP format instead of the classic JPG and PNG formats
• cropping or reducing images to the sizes that the page actually displays
• loading different image sizes for different screen sizes
• use the so-called lazy loading, which loads the images only after loading the rest of the page

Loading a large number of resources

Each file that a page must download separately from the server slows down the loading of the web page. These files are HTML document, CSS and JS files, images, videos, fonts etc. There are several options for limiting the number of files loaded, for example

• usage of system fonts
• elimination of unnecessary images, graphics, libraries
• merging and minimizing styles and scripts

The location of the server where the site is hosted

Although if the site itself is well optimized, slow loading can be caused by our geographic distance from the server hosting the site. Therefore, large sites that offer content around the world use a variety of techniques to cover geographic distance. For example, it is possible to use so-called CDN (Content Delivery Network), which allow you to replicate web content between servers in several places around the world. The site's resources are then downloaded from the nearest server.

However, sometimes the speed itself can be reduced by ISP (Internet Service Provider). This then depends on the tariff of services that we have agreed to pay for. Websites also generally take longer to load on mobile devices because the mobile network is typically slower than traditional one. For this reason, it is very important to optimize the website specifically for mobile devices.

Inappropriate or no caching

Cache, or temporary memory, means keeping preloaded content in another location from which content can be retrieved more quickly. There are several types of caches. The basic division can be into server and client. The server cache allows the browser to serve pre-prepared HTML code, which eliminates the need to call server scripts too often. This is useful if the HTML page is generated once and then does not change often. The client cache allows you to retrieve some resources from your computer instead of from the server if you have previously visited the site and have already downloaded the resources. The correct expiration policy for these resources, set on the server, will allow resources to remain in the browser for a long time and, conversely, resources that change frequently to expire frequently.

Inefficient scripts on the server

Each dynamic website consists of a server part, the task of which is to compile an HTML page or a document of another format. Excessively complex or inefficient calculations required to build a page not only prolong the server's response, but also use the CPU of the server on which the page is hosted. In the case of third-party solutions, such as WordPress, this can cause an excess of plugins used, or inefficient code for a single plugin. For your own code, it is necessary to pay attention to the simplicity and purity of the code, to limit or group queries into the database, to limit the use of cycles, to use the built-in methods of the used backend language, etc.

Scripts in the browser unnecessarily block the rendering the page

Non-essential scripts, such as various analytical tools, setting events or loading external advertisements, must be inserted in the HTML document after the visible content itself, i.e. typically before the last character of the HTML document body.

Inappropriate redirects

Website settings should eliminate unnecessary redirects. Typically, inappropriate redirection is combined with HTTPS and the www prefix when accessing a page without the www prefix and over the HTTP protocol. You will first be redirected from http://example.com to http://www.example.com and then redirected to https://www.example.com. It is best to catch this with a single redirect. It is also advisable to use the so-called HSTS (HTTP Strict Transport Security).

Unused compression

Another beneficial improvement is to set the compression of the web page before sending it to the browser. Such a page is smaller in size, which speeds up the transmission of the page over the Internet. Compression can typically be set in the web server configuration.