Website page loading speed affects the quality of SEO promotion in general. The optimal page load time is considered to be 2 seconds for desktop and up to 4 seconds for mobile devices. In most cases, projects do not meet these values - this is a great opportunity to gain a competitive advantage. Let’s take a look at the top ways to optimize website speed.
Who are we
Largest agency Internet marketing outside the Moscow Ring Road:
fourteenyears on the market
TOP 10 the best online promotion companies in Russia 2020
1. Reducing the size of the code
The essence of the method is to reduce the size of an HTML page by minifying its code. This can be done by removing unnecessary characters from the code: spaces, comments, line breaks, block separators. All this will not affect the integrity of the file, but will reduce it in size. However, the file will become difficult to read because after minification, all information will be placed on one line.
The minification process itself can be done manually, using services, or using plugins for CMS that process HTML files on the fly. The following stand out from the services:
Minify Code service
Just paste in a snippet of HTML code, run minification and get the optimized code. The first tool shows by what percentage the code size was reduced.
Among the plugins for WordPress, we recommend the following:
Autoptimize – contains a set of tools for website optimization, including the ability to minify the code.
WE – Minify HTML is a simple plugin that performs the only function to optimize the code. The problem is that it optimizes CSS and JS files too, you can’t turn this off.
2. Image optimization
In most cases, graphics are the most heavyweight component on the site, and it is with them that it is recommended to start optimizing the loading speed.
Images are most often published in JPEG and PNG formats. The first one is suitable for photographs, the second one for graphics that the designer has drawn. But in most cases, it is better to give preference to images in the JPEG format, it allows you to compress images more, while maintaining an optimal level of quality.
For images containing geometric shapes, it is recommended to use the vector format – SVG. Its plus is that such an image retains high quality when scaled.
Modern formats: JPEG 2000, JPEG-XR and WebP, allow compressing images from 20 – 75% with virtually no loss of quality. However, these formats are not supported by all browsers.
How to increase website loading speed using modern image formats and solve the problem of their poor browser support? Indicate two download options: one of the modern formats + JPEG / PNG.
Quality and resolution
Often the source of the image is saved in the maximum available quality, respectively, the file weight is too large. Therefore, before publishing on the site, it is recommended to compress such an image (tracking the appearance of artifacts), for example, in Photoshop – when saving for WEB, set the quality value from 60 to 80 percent.
Compressing an image in Photoshop
If we talk about permission, then in most cases it is also more than necessary. Here you should proceed from the size of the block on the page in which the image will be published. You should not reduce the resolution of photos using CSS styles – physically the size of the loaded data will not decrease, as well as the loading time, in addition, search engines will consider the page unoptimized.
Image compression service
There are a lot of online services and programs for optimizing the size of images. One of the most popular is Tinyjpg… In the free version, the source file size is limited to 5 MB.
As a test, an image of 4.1 MB was loaded, after optimization the file began to weigh 1.9 MB (-59%).
Image compression service Tinyjpg
Also, this service has a plugin for WordPress, which allows you to process images “on the fly” when uploading to the site.
Other services and plugins, we discussed in detail in the article on optimizing images for the site.
3. Gzip compression
Gzip is a server-side script that allows you to compress page components before sending them to the browser. The scheme is simple: the code is compressed into an archive, which is sent to the user, on his side, the browser unpacks and reproduces the data.
In CMS WordPress, this function is enabled initially, also sometimes this function is activated by the hosting provider (if not, then you can additionally ask to enable it through the support service), in any case, the fact of its presence can be checked by the service GidZipTest…
Enabling gzip compression on Apache
To do this, find the .htaccess file in the root of the site and enter the following commands:
CDN (Content Delivery Network) is a network of third-party servers that can host static files from your website. Those. when loading a page, for example, some of the images may be on the CDN, the user’s browser determines its own location and downloads these images from the server closest to the user. This function is often used by large interregional or global companies, for example, Ozon.
6. Reducing the download time of the first byte
Time to First Byte (TTFB) is a measure of the responsiveness of the server, in other words, the time it takes for the browser to wait for a response after sending an HTTP request. This parameter is influenced by the time it takes to send data (this part is optimized using CDN implementation) and the time it takes to process the request on the server (there are many optimization options, for example, load balancing, database tuning, etc.).
7. Lazy loading of scripts
Deferred (asynchronous) loading of scripts can also speed up your site. By default, all scripts on the page are loaded simultaneously, increasing the time for the first content to appear. With lazy loading, scripts are loaded sequentially: from the most critical to the additional ones.
8. Lazy loading of images
You can do the same with images, loading them sequentially as you view the page. This is especially true when the page contains a large amount of graphics. This technology is called Lazy load.
By the way, if there are too many images, then it is better to use a preview, and make the full image available on click, this will significantly increase the site loading speed.
9. Working with fonts
It is recommended to use a limited number of fonts on the site, remember that the more of them, the higher the load on the server. Don’t use outdated fonts like woff or eot.
An even bigger plus will be the use of fonts located on Google servers (Google Fonts).
10. Removing unused CSS and JS code
Large projects often contain unused pieces of CSS and JS code that take up resources on load. To find such fragments, you can use a free tool – Chrome DevTools in the Chrome browser:
Open the “Code Inspector” page.
Go to the Console tab.
Go to the “Console” tab
In the additional menu item we find “Coverage” (in this case, “Coverage”).
Reload the page.
The loaded scripts on the current page are shown here, as well as the percentage of code used from them. Each script can be expanded and the code fragments of interest can be found for further optimization.
View all scripts
11. Disable unnecessary plugins
Plugins are often useful and close gaps in the functionality of the CMS, however, if too many of them are activated, then this can create an increased load on the server, slowing down its work. When conducting a comprehensive site optimization, be sure to study the installed plugins and the appropriateness of their use.
12. Reducing the number of requests
It is logical that the more requests to the server, the lower the website loading speed (all other things being equal). If, for example, the page requires loading 5 different script files, it will be better if they are combined into one.
In WordPress, the above-mentioned Autoptimize plugin will help solve this problem.
13. Minification of CSS and JS code
As with HTML, CSS and JS can be minified. This is achieved by removing unnecessary characters and spaces, renaming variables, etc. As a third-party service, we can recommend JScompress…
14. Database optimization
Keep in mind that most servers support database query caching. You can clarify this point through the hosting technical support.
In addition, the CMS must be able to competently work with databases, not create unnecessary queries. And speaking about ready-made CMS, it is recommended to periodically update them.
15. Setting up AMP pages in Google and turbo pages in Yandex
These are relatively new solutions to speed up the loading of site pages.
AMP on Google
The technology for loading pages for mobile devices, which is implemented through the introduction of special tags on the site – content markup. The downside is the limited functionality, i.e. the method is suitable for pages with simple content: blogs, magazines and other information sites. The plus is the improved ranking of such pages due to good optimization for mobile devices in terms of the size of the loaded code.
Yandex Turbo Pages
A roughly similar technology, but from Yandex, aimed at increasing the reach of the mobile audience. According to the developers, the content loading speed can be increased 15 times, while the page weight is reduced up to 10 times.
Unlike AMP pages, Yandex Turbo pages have a little more functionality.
So, we have answered the question of how to speed up website loading by listing the most effective optimization methods. We hope that the implementation of these methods will give a good result for your site.