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.
Direct Line
Who are we
Largest agency Internet marketing outside the Moscow Ring Road:
1200+projects
65specialists
fourteenyears on the market
TOP 10 the best online promotion companies in Russia 2020
Commercial offer
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:
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):
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.
In the last article, we looked at WordPress, Joomla, Bitrix and DLE systems. Now let’s move on to the...
Read More
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.