The loading speed of the site directly affects the behavioral factors and, consequently, the promotion in search engines. This is one of the ranking factors, plus how quickly the site loads depends on user behavior. The user will not wait 10 seconds to open the product page and go to the competition. Especially this factor is critical for mobile users.
In other words, in order for your site to promote itself better and for users to feel comfortable browsing it and taking targeted actions, pages should load as quickly as possible.
About how to check and how to increase the loading speed of the site – tell us in this article.
How to check the download speed of the site.
There are several services to check the loading speed of pages. The most popular is Google PageSpeed Insights. In addition to showing the speed of the service gives recommendations – what you need to do in each case to speed up the site.
To start checking, open Google PageSpeed Insights and enter the address of the page in the line. Press “Analyze”.
The service evaluates the speed of several parameters and gives a total score to the site. Fast sites are those that scored 90 – 100 points.
Below the score is displayed load time for 6 metrics and recommendations for optimization. Read more about how to use Google’s service in this article about Google PageSpeed Insights. It also describes these 6 loading metrics, by which the service measures the time and gives scores.
The optimal speed of page loading: 2-3 seconds, no more (ideally less). The most important are server response time (0.5 seconds) and rendering the first content (up to 1 second). Some more time is spent on loading all the content of the page and the ability to interact with it.
If the speed is higher than 3 seconds, you need to take action. Although…low speed doesn’t mean all is lost. After analyzing several large sites with high traffic, we found that some pages score as high as 49 on Google PageSpeed Insights (a low score). YouTube, on the other hand, does not fit the parameters of a fast site — it has only 45 points, and Vimeo has 65 points. Amazon also has low mobile speeds. But these resources are popular and their speed is not as critical for users as it is in the case of a new little-known site. If the page has been loading for 6-10 seconds, the user may think that he has a problem with the Internet and leave the site (or simply do not want to wait).
Conclusion: the loading speed of the site is important, but not a decisive ranking factor. And yet, the faster your resource is loaded, the better.
16 ways to increase site load speed
On the speed of loading pages on the site affects the weight of content, code and hosting. Accordingly, they need to be optimized. To speed up the site you can use the specific recommendations of Google PageSpeed Insights and similar services. But it is better to take care of the speed beforehand, than to correct errors later.
Let’s find out how to speed up your site and what you can do to avoid overloading it beforehand.
How to optimize the site code
Important: before you start any manipulations with the code (especially manual) make a site backup.
1. Compact HTML-code
There are several ways to do it:
– Manually. For example, through the compression algorithms gzip or brotli. Here you need to be a programmer, so this method is not suitable for beginners. You must either contact the experts or use other methods.
– Through code compressors. The principle of operation is that you upload the code to the service page, and it gives you a modified compressed code. You need to copy and paste it instead of the original code. An example of such a service is compressor.andona.click. It compresses HTML, CSS and JavaScript code.
But this method has its disadvantages. First, you still need to understand where to find the page code and how to replace it. Second, this method is suitable for sites with few pages and one-page sites. If you have a large portal, where content is regularly added, this work will be too time-consuming.
– If the site is on the engine, use plugins. For WordPress, the most popular ones are: Autoptimize, Hyper Cache, Minify HTML, Clearfy Pro, Fast Velocity Minify.
2. Remove unnecessary code parts
Remove unnecessary spaces, hyphenation, repetitions, unnecessary JavaScript libraries and other code. Again, code compressors are helpful here, but there are also things you can do manually. For example, if you write articles in Google Docs, then copy and paste them into the site editor, there will be extra “pieces” of Google Docs code in the code that need to be removed. In WordPress, this is done through the “Clear Formatting” tool (the eraser icon).
3. Set up caching
Caching allows you to not load the entire site every time the user opens the page, but to do it only the first time. Then the data are loaded from the cache for the configured period. For example, if you set the caching for a week, then the page will be reloaded once a week, all the rest of the time – from the cache.
Caching can be configured on the side of the user’s browser and on the server of your site:
– On the browser side is configured by adding code to the .htaccess file of the root folder of the site (if the server runs on Apache). One of the code options in this case:
Red indicates the number of days of caching for individual elements (text, code, images). Instead of days you can specify hours, months, weeks, years. Depending on header types (Expires, Cache-Control, Last-Modified, ETag), cache data and cache retention time the code will be different. That’s why it’s better to ask programmers about this too.
– For caching on the server side you can use plugins (if the site on the engine). For example, for WordPress with this task perfectly copes W3 Total Cache. By the way, in addition to caching it has a function of HTML-compression, so you can use this plugin instead of two separate caching and compressing the code.
P.S. On some hosting sites setting up the caching function is included into the price (mostly on VPS). It may be enough, and then third-party plugins are not needed.
Note: caching is usually applied to static content (it is the same for all users). Dynamic content is customized for each user. If you cache dynamic content with standard methods, you might end up with irrelevant version of content being loaded or an error displayed on the user side. Although there are already modern technologies, allowing to do this, for example, CDN (about it in a separate item).
4. Disable or remove unnecessary plugins
This concerns sites on the engines. The more plugins, the greater the load on the server. Leave only the most necessary. Some plugins can be replaced by adding code to the page or switching to another theme where the function is already implemented.
5. Switch to a fresher version of PHP
It is better to use version 7.4 or 8.0, but you need to make sure that all the site modules can work correctly with this version.
Learn what version you have installed in the settings for hosting. Make a request for a change there, too.
6. Move CSS code to the beginning of the page and JavaScript to the end
The first allows you to load the page gradually from top to bottom, and the second – to load the page content first, and then the scripts. This, too, should do programmers.
7. Get rid of unnecessary “visual bells and whistles
If the site is heavy animation, lots of effects, pop-up windows – all this can make the site heavier. Then we must either recycle code or get rid of all unnecessary and just make a nice static design. If you remove unnecessary images and code, it reduces the number of requests to the server and the page will load faster.
How to optimize hosting
1. Switch to a more resource-based plan
When the site’s traffic increases and the amount of content increases, more resources are needed on the server. The amount of consumed resources should be displayed in a personal cabinet hosting. Maybe it’s time to buy more RAM, add some space on your hard drive, or even move to a dedicated server (if you were previously on a shared hosting).
2. Move to hosting, which has built-in tools to optimize the site
Popular hosting offer additional tools to accelerate the site. An example of such tools on one of the hosting:
- Faster SSD drives instead of HDDs;
- free choice of hosting location from three options;
- LiteSpeed web server (5 times faster than Apache);
- built-in free caching plugin for WordPress;
- Ability to connect CDN CloudFlare.
3. Choose a server closest to your audience’s country of residence
If you have a site for a Russian audience, it is logical to choose hosting with a data center in Russia. If your audience is in the U.S. – in the U.S.A. On some hosting sites it is possible to choose not only the country, but also the city. Basically, this is a major city (Moscow, Peter).
4. Connect site to CDN
This method is suitable for resources with a large number of heavy files and sites aimed at an international audience. If the site is regional or for one country, then there is no special sense in the CDN, it is better to choose a hosting with a server in your country beforehand.
The essence of CDN-technology is that it is a network of servers located in different geographical areas and combined into one infrastructure. When a user visits the site, the information is loaded from the nearest server, reducing the load on the main server and speeding up the loading of pages. The connection is usually made through the hoster. If you think your site should connect to CDN, find out if your hosting has such an option and follow the instructions.
By the way, CDN additionally protects the site from DDoS attacks and makes it less vulnerable.
Also through CDN can be implemented caching of dynamic content.
If the site is on the designer and you do not have separate hosting:
In that case, you need to choose a constructor with the ability to optimize in advance. For example, on Tilda you can enable gradual loading of images, instant rendering of content, manually optimize images, connect to CDN.
How to optimize media content
Content can make a site very heavy. That’s why it’s better to:
1. Add videos through external resources
Instead of uploading the video to a hosting site, it’s better to add it with a link from YouTube or Vimeo. In some cases, it is advisable to add the video through code embedding (e.g., clips from Tick-Tock).
2. Don’t use too big picture sizes
The optimal image size is no more than 2,000 pixels in width and no heavier than 600 Kb. If you have a blog with a large number of images, you can use less. When choosing the size, also take into account the convenience of users, so they can consider the important information in the pictures. For example, if you make screenshots to the articles.
3. Compact your images before uploading them to the site
Special services allow you to reduce the weight of the file in the range of 70% – 80% percent. These are TinyPNG, iloveimg, ImageOptim, Compressor, Optimizilla.
You can also use plugins to compress all the pictures on the site that are already posted. The plugins are EWWW Image Optimizer, Resize Image After Upload, ShortPixel Image Optimizer, Imagify. The free version of the plugins may have a limit on the number and quality of compressions.
Important: when selecting a service or a plugin for image compression, keep in mind that there can be two modes – with lossy or without lossy quality. If high quality is important to you (for example, for a portfolio site) choose the second option.
4. Adjusting the Lazy Load mode for images
Lazy Load – this is the mode in which images are loaded as the page scrolls, not all at once. And if the user does not scroll to the end of the page, the bottom images are not loaded. This increases the time it takes to load the page.
Tilda has Lazy Load by default. On WordPress you can use the following plugins: Lazy Loading Feature Plugin, BJ Lazy Load, Lazy Load XT.
5. Switch to a lighter image format
The JPG format is lighter than PNG, and WebP is lighter than JPG. By the way, Tilda automatically converts images to WebP format. This allows you to get up to 35% less weight than a JPG without losing quality. PNG can be left for images where you need to maintain transparency and high quality.
Again, there are plugins for WordPress: WebP Express, WebP Converter for Media. But one of our recommendations states that it is better not to overload the site with plugins, so you can convert the image to the WebP format in advance of uploading to the site. For example, using the Convertio and Ezgif services. Of course, if there are too many pictures and manually convert them long – then use a plugin.