Thanks to the development of technology and the Internet as such, the life of an ordinary person in 2024 picked up a speed that no other generation in the history of mankind had the equivalent of. Stock up on groceries for the week ahead through a mobile app without leaving your cozy armchair, choose new sneakers for your child on the website of a sports brand on the way home from work, or choose a suitable bouquet of flowers with urgent delivery right on an anniversary (which you happen to have forgotten about) – everything this allows a modern person to devote more time to himself. And, of course, we began to appreciate every free minute much more.
As for the speed of loading sites, the count goes even for seconds. And it doesn’t matter what your company is doing: selling fresh vegetables, sports shoes for children, or urgently delivering bouquets around the city. If your site is slow, no client will wait for the page to load, but simply go to the next request – to your direct competitors. Moreover, if problems with loading a company page are permanent, sooner or later search engines will simply exclude it from the top of the results.
You can measure the speed of loading a site using special services. One of the most popular and, probably, convenient for beginners is Google Page Speed Insight. By copying the URL of your resource, everyone will see the main parameters for the work of their resource:
- First Contentful Paint (FCP) shows the time between the start of the page loading and the appearance of the first block of text or image. To ensure a user experience, sites should strive to ensure that the time to first render content is 1.8 seconds or less.
- Largest Contentful Paint (LCP) – the time it takes to render a large block of text or image. To ensure a user experience, sites should aim for a maximum content rendering time of 2.5 seconds or less.
- Time to First Byte (TTFB) is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive. It is very important that your server responds to navigation requests quickly enough.
- Cumulative Layout Shift (CLS). Loading resources asynchronously or dynamically adding elements on top of pre-existing ones can cause page content to move unexpectedly. To avoid this problem sites should strive to ensure that the CLS score does not exceed 0.1 to ensure a user-friendly experience.
- and so on.
Moreover, based on the results of the analysis of the work of the resource, you can get a list of recommendations for specific steps to increase the loading speed of the website.
What is needed to ensure that the site, in which a lot of effort and money has already been invested, loads with lightning speed, and the company does not lose customers? We talked about this with Alexander Svadkovsky – CEO of is*hosting, which has more than 17 years of successful experience in the European and US markets – and managed to identify 10 quick ways to slow down your website loading speed.
Cache web page
Caching helps to reduce the TTFB (time to first byte) and allows you to rely on fewer resources required from the server to load the site page. This will allow you to store copies of your site files, minimize the work of the web page in the visitor’s browser and significantly increase the download speed. Caching can be done using special plugins or at the server level. This is another reason why choosing a reliable hosting provider is of the utmost importance.
Don’t forget to use browser’s cache
Caching is becoming increasingly important for modern websites that rely heavily on JavaScript and CSS. When a user visits the site for the first time, the browser will load all JS and CSS files, and also load all graphics and flash. By properly setting the Expires HTTP or Cache-Control HTTP response (when the cache period is specified in the max-age directive), you make page components cacheable. This way, when a visitor will be on your site again or goes to the next page of your site, their browser cache will already have some of the files they need and the browser won’t need to download them again. Hence the gain in site loading speed, albeit with a second visit mostly.
Reduce the number of HTTP requests
Behind the display of one page is often a group of requests to the server. The browser can simultaneously request different components of an HTML document – text, images, CSS style sheets, JavaScript scripts, and so on. The higher the number of such requests, the greater the amount of data transferred, as well as information in the request headers. Try to minimize the number of calls to the server.
Optimize CSS and JavaScript
Very appropriate even for the first visit. Code optimization is the process of removing unnecessary syntax from it that does not affect the functionality of the resource, such as comments, repeated indents, and spaces. This allows you to reduce the size of the original CSS/JS files. Minimization is usually achieved using local programs or when building on the CI side.
Therefore, the CSS should be connected in the upper head block. At the same time, put JS files at the end of the page. Due to this, the browser will first load the contents of the page, and only then process the scripts. You can also solve this problem using asynchronous or defer loading for your CSS and JavaScript files.
Use compression for .html, .css, .js sources
Server-side compression allows you to limit the size of files that require users to download. By archiving content, you can reduce the weight of pages and, as a result, the amount of data transferred. One of the most popular is Gzip – a format resulting from file compression. The server returns the information in a reduced gzip format, after which the browser decompresses and displays the page content in its original form. This speeds up the download process in general.
Use CDN for images, JS and CSS files
CDN (Content Delivery Network) allows decentralized download of files from servers in different regions, while choosing the one closest to the user. This is especially true for companies whose clients can be widely scattered geographically. Using a CDN, users in remote regions can load a page equally quickly and, as a result, be satisfied with the download speed.
Optimize your images
You need to determine the appropriate format for your images. Choosing the wrong image format can significantly increase the file size. These are the most popular:
- PNG (when you need a high quality image with transparency);
- JPEGs (are great for detailed images with lots of color, such as photographs);
- GIFs (images with multiple colors, such as a logo);
- WebP (popular lately compromise between quality and size from google);
- SVG (scalable vector graphics).
But note that Google, for example, prefers only the last two.
There are two ways to optimize an image: using programs or online services on the Internet to compress images. In the first case, you will need certain knowledge to work with a particular program. Online services are easier and accessible to everyone.
Using Lazy Load
Lazy loading is a technique for optimizing the loading speed of media files that are not critical to page display. It allows you to load images only on the first screen, and the rest after scrolling further. In this case, the browser needs to initially download only a part of the images, the rest – in the process of studying the site by the visitor. With lazy loading, the visitor immediately sees the working website, he does not have to wait until all the elements of the page are completed, which means that the site load time is reduced.
Get rid of unused plugins
Plugins are a very useful thing. However, do not forget that too many of them will inevitably slow down the site. Using an entire plugin for a pop-up window is not the smartest thing to do. Both the use of one of the hundreds of features of the library, and the use of plugins of other libraries with the appearance of a huge amount of unused code, negatively affects the loading speed of the site. The same pop-up window can be implemented through several lines of JS or through CSS. Try to keep plugins to a minimum. Also do your best to periodically check that they are supported and do not cause compatibility issues. Anything that doesn’t meet these criteria should be removed.
Hosting choice
Although there are several ways to increase the speed of loading a site, choosing a reliable hosting is a necessary basis, thanks to which it becomes possible to use these methods. Before you start cooperating with a hosting company, make sure that this is a company proven by many years of experience and constantly working on improvement, which uses only reliable and modern (especially in the case of processors and with priority use of SSD/NVMe over HDD) equipment.
Make sure that the company you choose provides exactly the types of hosting that are right for you. For small websites, the simplest virtual (shared) hosting is suitable. For growing online stores, VPS/VDS hosting is better. For sites with high traffic, you need to use only dedicated physical servers.
Pay special attention to the grid of tariff plans, which should not be chosen because of cheapness, but primarily from the ratio of price and the resources you need, taking into account potential scalability. Do not forget about the geographical location of the servers: the closer it is to the user, the higher the data transfer rate will be. It is unlikely that you will think about the speed of loading a site if it is often unavailable. And its trouble-free operation is, first of all, reliable hosting.
Conclusion
Today, site loading speed is one of the first indicators by which most customers form the first, often the most important, impression of the company’s work in general. Neither a wide range, nor a high level of service, nor other factors influencing the choice of a company by customers are important if they do not wait for the main page to load. That is why it is worth paying special attention to this issue.
