How to make your website load faster: 15 effective methods

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:

• HTML-compressor

HTML-compressor

• Minify Code

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.

Autoptimize

• 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.

Format

• 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:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
</IfModule>

Enabling gzip compression on Nginx

Open the nginx.conf file, find the http block and add the following lines to it:

gzip on;
gzip_static on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

After that the server should be rebooted.

4. Browser side caching

The essence of the method lies in the fact that a part of the files or code will be cached on the user’s computer, and subsequent requests involving this data will not contact the server.

Most of the ready-made CMS already have such functionality out of the box, but if there is no such option, then we write the following conditions in the .htaccess file:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 10 days"
  ExpiresByType image/jpeg "access plus 10 days"
  ExpiresByType image/png "access plus 10 days"
  ExpiresByType image/svg+xml "access plus 10 days"
  ExpiresByType text/css "access plus 10 days"
</IfModule>

The conditions say that files with the listed extensions will be stored on the user’s side for 10 days.

Similarly, for Nginx, the commands are written in the nginx.conf file (if there is no access, you can use the call to technical support):

server {
  
  location ~* .(jpeg|png|css|js|txt)$ {
    root /var/www/user/data/www/site.ru;
    expires 10d;
  }
  
}

5. Using CDN

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”).

Click “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.