entranceHow to make pages loaded faster. Five ways to speed up page download time
Good day! Surely everyone comes to the time when it is necessary to increase the download speed of the site page for the reason that the site is loaded too long and users without waiting for its full boot, leave the site. In today's recording, I will tell you more detail about the tools that you want to use to optimize the site loading speed and which key points may interfere with the pages. In addition, you will also learn, with what services you can measure the download speed of the site page.
Services to measure the speed of the site page
From a variety of services that I used to check the download speed of the site page, I liked the service: pingdom.com, which clearly demonstrates every site detail and download speed of the required page, for example for main page Blog site, when selecting in the settings - "Amsterdam, Netherlands", the site download speed will be 1.08 seconds, which is not so bad. 
The following is provided to all the necessary information that is provided by the connection speed service, waiting and response as third-party servers, data from which are requested and the internal server. 
From the data provided, you can determine the slowest moments and improve the download speed of the site pages, affecting these places. This will help a wonderful tool that is developed by Google - Google Pagespeed Insights.
We optimize the download speed of the site pages using Google Pagespeed
In fact, everything is easier than it seems at first glance, but I want to celebrate the moment that use Google PageSpeed \u200b\u200bInsights is not visible of all moments that can worsen the download speed of the site page, but it will be quite suitable by performing all items at the request of the service, you can significantly improve the speed. For a more detailed analysis of factors affecting the site download speed, you need to use the Mozilla Firefox browser with Firebug addition and PageSpeed \u200b\u200bplugin for Firefox.
Why Firefox? For Firefox, this plugin looks more convenient, even the content that is displayed after analyzing the site pages plugin is more compact, so I advise you to analyze pages using Firefox.
So, after installing the plug-in and adding Firebug in the upper right corner, a button with the image of the beetle will appear.
Go to the site, the analysis for which you want to execute, click on the button with the beetle. The window will open before you, the last tab of which will be called a window with a button with a button. Page Speed. After clicking on the tab. Analyze Performance.You must click on the button and wait until the page is analyzed. Further, you will appear a list of all the recommendations that you want to execute to improve the download speed of the site pages. After a short manipulation over the contents of the blog pages, I achieved the result on pagespeed \u003d 94 out of 100 possible points, which is quite good, you can of course and improve the result, but so far it is not critical, the main thing is that all the main interfering moments eliminated. 
But green ticks seek that everything is in order, you can actually improve the indicator and reach the value of more than 94.
So, let's now consider the basic recommendations that you want to perform to optimize the download speed of the site pages:
Turn on compression - To configure XML compression, CSS, JS and HTML to GZIP format, you need to add the following code to file.htaccess on the FTP site server:
Provide images with the right proportions - In CSS files, you must specify a fixed proportion for images, instead of changing them using CSS.
Use the browser cache, here is the cache validator and item is performed. Specify the cache validator - It is necessary to use caching on the side of the browser, i.e. Client required Add V.HTaccess the following rows Code:
In this part of the code, caching for 7 days is implemented, do not forget that you do not always need to perform the requirements of search engines if the items of your site are updated often, you must configure caching for each separately.
Optimize images - In order to reduce the size of the pages and, accordingly, increase the download speed, you will need to use the principle of copying all the images of the site from the FTP server and batch download for further processing to the service http://www.smushit.com/, the procedure is long enough if on your service Site The number of images varies thousands. There may be errors that gIF files will be shifted in JPG or PNG, and the file name changes, it is required to consider this momentif there are images gif format, it is better to load them separately and then rule manually. Recommendations:
- After each package download, update the page, otherwise the images will be added to the current list.
- All optimized files are downloaded by an archive from this service, so before overloading to the server they need to be removed from the archive.
Java script syntax analysis deposition - you can run a script for some time loading time using the code:
Reduce JS scripts and CSS styles - You must use the service: http://www.refresh-sf.com/yui/, which removes extra spaces in the code, thereby saving the location of the file.
Reduce HTML - To reduce HTML Pages You can remove extra gaps and auxiliary characters of quotes that can be omitted in specific situations.
Specify image sizes - For all images, their dimensions must be spelled out, you do not need to lower the image size setting otherwise either the image will scalable crooked, or CMS will resort to self-prescribing CSS styles for images, thereby increase their size.
Specify the title Vary: Accept-Encoding - All files open to caching must return the title, it is enough to add V.HTaccess code on the FTP server:
P.S.: To reduce the number of requests to files, it is necessary to reduce the number of CSS styles and combine them in 1 file, JS scripts ideally also need to merge into 1 file.
Conclusion
The provided list of recommendations will help improve the speed of downloading the page of the site, but do not forget that in some points there may increase the load on the server, for example, when using the GZIP compression by the server tools and using caching on the browser side (client), it will be necessary to approach the optimization stages. the other side and prepare gzip files Alone, and V.HTaccess set up proper processing, and depending on the browser, provide users with compressed or uncompressed files.
Do not forget that the improvement of page loading speed has a positive effect on the Site SEO, and other things being equal, if your site will win in speed, it will be higher than competitors.
Successes to you in optimizing the speed of pages of the site!
I think it's no secret that the download speed of the page affects many factors. If someone is not aware, then briefly will say the following that the download speed affects not only if the visitor will wait when your site is loaded, but also on SEO optimization. After all, today, many search engines when ranking sites have begun to take into account the download speed of the page. Therefore, the faster your site will be boosted, the more visitors you can get from search engines, and, therefore, and more money on it.
Therefore, in this article I decided to assemble the top 10 tips on how you can increase the speed of the web page and the site as a whole. The article does not claim to be genius and designed for newbies.
So let's go:
1. Reduce the number of HTTP requests
80% of the page download is focused on downloading page components: scripts, photos, CSS files, Flash. The HTTP / 1.1 specification advises that browsers parallelly loaded no more than 2 webpage components from one host. By reducing the number of these components, we reduce the number of HTTP queries to the server and how the result increase the page loading speed.
But how to reduce the number of requests to the server without affecting appearance pages?
2. Place CSS files at the beginning of the page.
Connecting to CSS files in the page header we get a gradual rendering of the page, i.e. The page will be loaded gradually - first the title, then logo upstairs, navigation, etc. - And this in turn serves as an excellent page loading indicator for the user and improves overall impression from the site.
If you place CSS files at the bottom of the page, it does not allow many browsers to render the page gradually. This is explained by the fact that the browser "does not want" to redraw elements that the style may change after loading the page. So all your CSS files always connect at the top of the page in the Head section.
3. Place JavaScript at the end of the page.
Plyow javascript files down the page We allow the browser to upload a page with content first, and only then start downloading JavaScript files. If your site keeps up with the times and contains all possible interactive "bullshits", then these JavaScript files can be somewhat and weighing them can several hundred kilobytes, so before downloading the page to force the user to wait until all your JavaScipt files are loaded.
In addition, external .JS files block parallel loading. The HTTP / 1.1 specification advises that browsers parallelly loaded no more than 2 webpage components from one host. Thus, if the pictures for your site are located on different hosts, you will receive more than 2 parallel downloads. And when the script is loaded, the browser will not start any other downloads, even from other hosts.
4. Minimize CSS and JavaScript
File minimization is a removal of all insignificant characters from the code in order to reduce the amount of the file and accelerate its download. In a minimized file, all comments and insignificant spaces, string transplants, tabs, tabs are deleted. Everything is simple here. The smaller the size of the file, the less time it will be necessary to the browser on its download. And to minimize your code will help these 24 online services for compression and CSS optimization code
5. Use subdomains for parallel download
As I said above, according to the HTTP / 1.1 specification, restrictions are superimposed on the number of simultaneously downloadable components of the site, namely no more than 2 components from one host. Therefore, if you have a lot of graphics on your site, it is better to take it on a separate subdomain or subdomains. For you, it will be the same server, and for a browser - different. The more subdomains you create more files The browser will be able to simultaneously download and the faster the entire page of the site will boot. You can only change the address of the pictures to the new one. Very simple, but effective way.
6. Use the browser cache
Keching becomes extremely important for modern websites that use the extensive connection of JavaScript and CSS. The fact is that when the visitor went to your site for the first time, the browser will download all JavaScript and CSS files, also loads the entire schedule and flash, but correctly setting the HTTP header EXPIRES, you will make the components of the page cached. Thus, when the visitor goes to your site again or goes to the next page of your site, in the cache of his browser there will be some files And the browser will not need to upload them again. From here and winning the site loading speed.
Therefore, exhibit the EXPIRES HTTP header everywhere where it is possible for several days or even months ahead. In order for the Apache web server to give the appropriate EXPIRES HTTP header recommendations, it is necessary to add to file.htaccess, located in the root folder of the site, the following lines:
This apache web server configuration fragment checks the MOD_EXPIRES module and if the MOD_EXPIRES module is available, includes the return of the EXPIRES HTTP headers that set the shelf life of the objects listed above in the cache of browsers and proxy servers equal to one year from the time of the first boot. By installing such a life of the browser cache, it may be difficult to update files. Therefore, if you changed the contents of the CSS or JavaScript file and want these changes to be updated in the browser cache, you need to change the name of the file itself. Usually the file name adds its version, for example, as follows: styles.v1.css
7. Use CDN to download popular JavaScript Libraries
If your site uses a popular JavaScript framework, such as jQuery, then it is better to use CDN to connect it.
8. Optimize your images
It is necessary to determine the appropriate format for your images. Selecting an incorrect image format, can significantly increase the file size.
- GIF - ideal for images with several colors, such as logo.
- JPEG - are great for detailed images with large quantity Flowers such as photos.
- PNG is your choice when you need a high-quality image with transparency.
Here are several online services To optimize images:
9. Do not scaling images
Do not change the image size using the Width and Height attributes tag, or using CSS. This also negatively affects the download speed of the page. If you have an image of the size of 500x500px, and insert to the site you want an image with a size of 100x100px, then it is better to change the size of the original picture using the PhotoShop graphic editor, or any other. The smaller weight of the picture, the less time it is necessary for its download.
10. Use GZIP compression
As shown studies, Gzip compression text File "On the fly" in 95-98% of cases, reduces the time to transfer the file to the browser. If you store archived copies of files on the server (in the proxy-server memory or simply on the disk), the connection in the general can be released 3-4 times faster.
Starting from the HTTP / 1.1 protocol version, web clients indicate which compression types they support by installing the Accept-Encoding header in the HTTP request.
Accept-Encoding: Gzip, Deflate
If the web server sees such a header in the query, it can apply a response compression by one of the methods listed by the client. When issuing an answer, through the Content-Encoding header, the server notifies the client about how the answer is compressed.
Content-Encoding: Gzip
Data transmitted in this way is less than 5 times, and it significantly accelerates their delivery. However, there is one drawback: the load on the web server increases. But the issue with the server can always be solved. So we will not pay attention to it.
In order to enable GZIP compression on your website, it is necessary in the file.htaccess to register the following code lines:
If a this method worked, then excellent, if not, you can try this here is the code:
But again, this code It works not on all servers, so it is better to contact your hosting provider support and clarify this issue.
Well, in fact, all I wanted to tell. In this article I tried to list all the basic ways to client optimization to increase the boot speed of the web page. In addition to client optimization, there is also server optimization. But this is the topic for a separate article.
If you missed something or you have something to add - Write your opinion in the comments below to this post. Thanks for attention!
The slow site does not like anyone - neither users nor the search engines. With the current velocity of the Internet, people are no longer ready to wait for the page download. This is not a Dial-APA connection, where the wait was inevitable. And search engines, fighting for the quality of the search results, do not want to issue bad users (in this case, slow) sites. Therefore, with other things being equal, the slow site will be in the extradition lower than its more shumbling competitors.
What speed of loading is considered the norm
The faster the better. But on average, 2-3 seconds to download the main part of the page content is quite normal.
From which the download speed depends
In the download site, two parties are participating - a user browser and a server where the site files are physically located. Data exchange occurs between these parties.
Thug site loading can problems on each of the parties and in the interval between them.
- Slow server: may not be clogged random access memory Or nuclei in the processor, like a regular computer.
- Slow Site Engine (CMS): If the code was written in inexperienced programmers without taking into account its speed.
- The server is far from the user: for example, a server with the site files is physically in Moscow, and the user comes to the site from Vladivostok.
- Many files: To display the browser page you need to download many pictures, files, styles, scripts and fonts.
- Heavy files: plus these files weigh a lot.
All the steps to optimize the site speed are aimed at eliminating these problems.
How to check the site speed
From the set of online services for checking the site speed is the most popular, perhaps, is the Google Pagespeed tool. Work with him simply - specify the address of the site and click the "Analyze" button.
As a result, we will see such indicators (separately for computers and for mobile):
- After what time, the browser receives a response from the server and begins to draw the page content (FCP - First Contentful Paint).
- After what time, the user sees the main content in the browser (DCL - DOM Content Loaded).
- As far as the site is optimized in terms of boot speed.
- Specific optimization recommendations. By clicking on the links "How to fix", we see addresses of problem pictures and files with which you need to do something (mainly compress).
It is advisable to get into the green zone - and in the Site Speed \u200b\u200bblock (Page Speed) and in the "Optimization" block.
Another good service To check the download speed, however, in English - Pingdom. A distinctive feature - these are beautiful graphics (called Waterfall - waterfall) show which files, in what order and how much time is loaded:
And now to the point:
How to speed up the site
Step 1. Picture Optimization
Non-optimized pictures are the most "heavy" part of the site. Therefore, working with pictures can give a significant increase in speed.
What we look at:
Picture size (width and height)
If you have shot the goods and received photos of about 5000 pixels wide, you can safely reduce the width to 1600, in most cases it will be enough. The exception will be those sites (mainly, online stores), where you can consider the goods with the "magnifier", but also there is not immediately loaded, but only if a person decided to take advantage of this tool.
Picture weight (kilobytes)
Images from the camera can (and need) compress in the amount before displaying the site. Make it either in Photoshop (or another image editor), or through online services, such as Tinypng or Optimizilla.
Preview to big pictures
If you have photos of goods (or work performed) and there is a page with their list, it will reasonably make small previews (reduced pictures). Then the list of products, works or photos will be loaded faster.
For example, the Sportmaster uses pictures of goods in three versions:
Picture for the list of goods (weighs 7 kb)
Picture for the product card (weighs 18 KB)
Picture To view the goods with a magnifying glass (weighs 942 KB)
Imagine how long the list of goods would be loaded if the sportmaster used only the source pictures (those that are 900 with an excess kilobyte).
When checking the speed of the site through Google PageSpeed, you will receive a ready list for pictures that should be optimized:
Step 2. Gzip compression
GZIP is a program to compress files on the server (analog of zip-archives on a computer). With the GZIP server enabled, before you send the page code to the browser (as well as scripts, styles and other text information), first archives these files. The browser will receive an archive and unpack it on the user's computer. Compressed information will be transmitted faster between the browser and the server.
How to enable GZIP compression:
If you have access to the HTCCESS file, add such lines to it (at the end of the file):
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
If you do not have Apache, but nginx (who knows, he will understand), then you will need a nginx.conf configuration file. Add code to the http (...) section and restart the server:
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;
If you do not have access to HTACCESS or server configuration, write to hosting technical support that you need to enable GZIP compression.
If compression works, then in the results of checking PageSpeed \u200b\u200byou will see (in the "Included optimization techniques"):
Step 3. Caching on the side of the browser
When the browser loads the site, it saves some of the information from it (style files, scripts, pictures) in your own memory (cache, cache). Then on other pages of this site or when re-entering the current page, the browser will not request this information re-from the server (for a long time), and loads it from own memory (which is faster). Therefore, in the browser settings there are "Clear cache" buttons, and we all know the Ctrl + F5 key combination (refresh the cache cleaning page).
To use the browser's cache, you need to specify to it, what types of files from your site to save to the cache. How to do it:
Through the HTCCESS file (caching static files for 10 days):
EXPIRESATIVE ON.
EXPIRESDEFAULT "Access Plus 10 Days"
EXPIRESBYTYPE Image / GIF "Access Plus 10 Days"
EXPIRESBYTYPE Image / JPG "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"
For nginx, add to the configuration:
server (
...
location ~ * \\. (JPG | JPEG | GIF | PNG | ICO | CSS | JS | TXT) $ (
root /var/www/user/data/www/site.ru;
EXPIRES 10D;
}
...
}
If there is no access server settings, again we write to technical support and ask you to adjust the caching of static files.
Similar to the list of pictures, Google Pagespeed gives a list of resources for which caching is not configured, and it would be possible:
Please note that you can configure caching only for your resources. Change the cache settings, for example, for Yandex.metric scripts will not work.
Step 4. Minimizing CSS- and JS Files
Minimization is a shortage of a file by removing spaces, empty strings, comments, use shorter variable names, etc. The browser is still with what file to work - ordinary or minimized, and weighs such a file less.
An example of a regular code:
Speedometer-wrapper (
position: relative;
}
.speedometer-wrapper .list (
margin-top: 80px;
margin-left: -20px;
padding-Bottom: 85px;
}
After minimizing:
Speedometer-Wrapper (Position: relative) .Speedometer-Wrapper .list (Margin-Top: 80px; margin-left: -20px; padding-bottom: 85px)
Popular plugins and libraries (jQuery, Bootstrap, etc.) always have minimized versions of their scripts and styles - connect them to the site. For example, the usual version of the jQuery script weighs 265 KB, and its compressed version is 85 kb. Do you feel the difference?
The only minus ministry - the readability of the file is lost. If you need to make changes to compressed file - It will be difficult to do it, a person work with such a file is inconvenient (there is one solid string). Therefore, additional plugins to CMS are usually used to ministerize its scripts - they automatically compress CSS and JS files before downloading to the site. And the prohibitionmer can safely work with regular versions of files.
PageSpeed \u200b\u200band here carefully shows us a list of files whose size can be reduced by minimizing:
Step 5. CSS and JS-File Download Order
Browsers have their own algorithms for the most quick page loading (no one wants to play a "brake" browser). Therefore, having received the page code, the browser is trying to calculate which of the plug-in files you need to start uploading first. Sometimes it happens that the browser has already reached the drawing of some form on the page, and the file with styles has not yet loaded - then the draw will stop.
To make the browser to download the site files in an optimal way, all styles (CSS) and fonts are configured at the beginning of the page code (in tag
), and all script files (JS) - at the end of the page, in front of the closing tag.
...
rEL \u003d "STYLESHEET" HREF \u003d " //fonts.googleapis.com/css?family\u003droboto :00,400,500&subset\u003dlatin.Cyrillic"Type \u003d" Text / CSS "\u003e
rEL \u003d "stylesheet" href \u003d "/ inc / min / styles.min.css" Type \u003d "Text / CSS"\u003e
rEL \u003d "STYLESHEET" HREF \u003d "/ CSS / MAIN.CSS" TYPE \u003d "TEXT / CSS"\u003e
...
...
Then the browser will load the styles necessary for drawing, and starts to show the page to the user, in parallel downloading the necessary scripts (which will then provide interactive - sliders, tabs, etc.).
Step 6. Extra plugins or counters
Sometimes in the page code, there are links to plugins or modules that are no longer used on the site. For example, at first the proxigator connected one plugin for sliders, and then replaced it to a new one, but did not delete the old one. Or remain codes from counters, statistics for which you are no longer looking. Be sure to remove such a "garbage" from the code.
Try to optimize the use of additional scripts. For example, if you have sliders on three pages of the site, then on all pages, use the same plugin for the slider - you do not need to connect some particular script every time.
Step 7. Using CDN
CDN (Content Delivery Network, content delivery network) is a network from a variety of servers distributed geographically by country or around the world. Each of the servers duplicates content from the main server (the content is duplicated by the first user request and is stored for some time).
When a user, for example, from Khabarovsk, wants to load something from CDN, then it receives content not from the main server (which may be, for example, in Moscow), but from the server nearest to the user (which may be in the same Khabarovsk ). The country is my native, so the query Khabarovsk-Khabarovsk will pass faster than the request of Khabarovsk-Moscow. Let for milliseconds, but in multiplication to the number of files and their size it can give a good increase in speed.
As a rule, CDN is used in two cases:
- Loading third-party scripts. These are all the same jQuery, Bootstrap, Web Fonts fonts. For example, you can specify the browser to download them not from your server, but from the ruble servers, bootstrap or other CDNs.
- Loading pictures and scripts from your CDN. Large sites (Ozon, Avito, etc.) configure their own CDN using either their own servers, or (more often) CDN networks, such as Google Cloud or StackPath. Some CMS have already included CDN support in your functionality. For example, the Bitrix has a free module "Site Acceleration (CDN)".
Step 8. Reducing the number of HTTP requests
For the browser to do less calls to the server (and this is HTTP requests), you need to reduce the number of files you need. For example, if you have three separate scripts (for a slider, for modal windows And for pop-up tips), you can combine them into one file, and then also minimize (see step 4).
Since it is not entirely convenient to combine files manually (if you need to replace one of the scripts in the future), then you usually adjust their automatic fusion. Most CMS has its own plugins for this (for example, autoptimize for WordPress).
Confused caching for a browser (step 3) and deleting unnecessary scripts (step 6) also reduce the number of HTTP requests.
Step 9. Font Optimization
Try to use one single font on the entire site. This will not only add aesthetics site, but also reduce the amount of downloaded files to display fonts.
Also reduced the number of files can be refused to use outdated formats. Previously, each font was loaded in EOT, TTF, WOFF, SVG formats for correct display in browsers. Now modern browsers can only be limited to two formats - WOFF and WOFF2.
In addition, popular fonts can be downloaded from Google Fonts. First, it will remove the load from your server. Secondly, files with fonts will already be optimized, it shifts from your shoulders on Google (what, you see, nice).
Step 10. Reducing HTML Code
In addition to compressing style files and scripts (step 4), you can configure minimization and for the HTML code of the page itself. I think it is relevant for long pages - articles in blogs, large lists of goods, etc. To configure, it is worth looking for a suitable plugin for its CMS (for example, HTML minifier for Joomla).
Step 11. Server Optimization
If you have a dedicated server (your system Administrator Can manage its settings), you can try to profure its parameters. For example, add RAM or replace the processor. Also, the sysadmin can carry out "cleaning" on the server itself - delete unused and update the current modules.
In the case of a virtual hosting (without access to the server settings), you can look in the direction of the transition to more expensive tariffs if they are better specifications Server.
Step 12. Optimization of scripts and databases
One of the stages of the site download is the generation of the final HTML-code server, which he will give the browser. This code is generated by the site engine (CMS). If the engine is written illiterately, then it can "collect" a page very long, making unnecessary requests to files and databases using "slow" programming algorithms, etc.
Therefore, when selecting CMS for the site, it is recommended to look in the direction of popular engines (Bitrix, Open Cart, Wordpress, MODX, etc.), which have proven their speed and reliability. And since these systems are constantly being finalized (including in terms of speed), then the CMS should be regularly updated on its website.
No Slopokama
Take care of the rapid download of your site. Remember that there are many competitors in the search results, and the faster your site will boot, the smaller the other sites a person will have to open in the neighboring tabs.
If you need help optimizing the site download speed - write, let's see your site and tell if it is possible to speed it up.
Site loading time is one of the most important indicators affecting the behavior of the site users. Let's deal with.
Reducing the download speed of the page for 1 second entails:
- reduction of the number of views by 11%;
- reducing the user's satisfaction rate by 16%;
- reducing the conversion to 6%.
Below is a graph reflecting the growth of interest closed pages Due to the increase in the site loading time.
A couple of extra seconds of site loading time reduce the chances to interest visitors and sell.
Kissmetrics conducted a study on how the download speed of the site affects the behavior of users and buyers:
- 47% of users expect the page to open in less than 2 seconds;
- 40% of users close the site if it is loaded longer than 3 seconds;
- 79% of buyers who remained dissatisfied with the convenience of the site, most likely, will not buy through it in the future;
- 44% of Internet buyers will tell their familiar about sites that have not satisfied them.
The accelerated download of the site is especially important for users coming to the site from mobile devices. And since now the share mobile traffic It is constantly growing, then the acceleration on the mobile you need to make a special accent.
Patience of mobile Internet users
Increase site loading speed as a way to increase conversion
Site downloading time affects conversion. Consider on the example of the Walmart network.
Conversion indicator dependence on page load time
Here we see that the higher the speed of the page load, the greater the conversion rate.
According to the results of Walmart, it revealed that a decrease in the time loading time for a second helps to increase the conversion to 2%.
Effect of Site Download Optimization on Organic Traffic
In 2010, Google said that it would take into account the speed of downloading sites when the search results rank.
The reason why search engines need to do is quite obvious. If the search engine will offer you "slow" sites, you will most likely be less likely to use it.
Therefore, it is important to reduce the site download time so that your site is in the issuance of the higher competitors.
Summarizing the foregoing, we conclude that the acceleration of the site leads to:
- conversion growth;
- reduce the failure rate (the percentage ratio of visitors who left the site directly from the login page or viewed no more than one page of the site);
- lifting in search engines.
20 ways to speed up the site loading
1. Reduce the number of HTTP requests
According to Yahoo's research, most of the time when loading the page is spent on downloading images, style files and scripts.
To download each such file, a separate HTTP query is created. The more such requests, the longer the time passes until the page is fully downloaded.
Check how many HTTP requests are generated, it is possible to use the browser developer panel.
Consider the process on the example google browser Chrome.
The first step we go to the analyzed page, right-click on any empty page area and choose in context menu Item "View Code". The Chrome Devtools panel opens at the bottom of the screen. Go to the Network tab and reboot the page. We see a list of all requests, the statuses of their responses and the time of downloading files.
2. Combine and minifice CSS and JS files
Now, when we know how many requests are generated, we can proceed to reduce them.
The easiest way to reduce the number of requests is to merge and minify (compress) HTML, CSS and JavaScript files. It is more correct to put this task to developers. If there is no such possibility, you can try to do it yourself.
Open any text editorInserting the contents of all CSS files used in the order in which they are connected in the template. Next, using any minification service (for example, CSSMinifier), compress the code.
As a result, we reduce the number of queries, and the symbols (gaps, tabs, string transplants, etc.) are removed from the final code.
3. Implement asynchronous loading CSS and JS
We are all used to uploading a CSS file to HTML by inserting a tag
However, not all pieces of code are so critical that they should be downloaded immediately. For example, on the site there is a rarely used component of the comparison of goods. It makes sense to load styles and JS code for it directly at the moment when users want to take advantage of such a functionality.
To implement the asynchronous loading of CSS and JS is often able to only with professional developers. We only note that you need to watch either in the direction of using the preload value of the REL attribute together with the ONLOAD attribute, or load the styles of the JS script.
4. Configure a deferred download JavaScript code
To understand that such a deferred download of the JavaScript code for a start, we analyze how it is usually. In standard JavaSpit mode, files interrupt the HTML document parsing until all such files are received and executed.
Often we need to insert any particularly significant widget social networks In the basement of the site. It doesn't matter for us whether it will appear on the page immediately or a couple of seconds.
To implement a deferred load, or rather processing, such a script, we all need to register the attribute Defer tag