entranceHow to make pages load faster. Five ways to speed up page load times
Good day! Surely everyone comes to the moment when it is necessary to increase the speed of loading the pages of the site for the reason that the site takes too long to load and users leave the site without waiting for it to be fully loaded. In today's post, I will talk in more detail about the tools that you need to use to optimize the speed of loading pages on your site and what key points can interfere with loading pages. In addition, you will also find out with the help of which services you can measure the speed of loading pages on the site.
Services for measuring the speed of loading site pages
Of the many services that I used to check the speed of loading pages on a site, I liked the service: Pingdom.com, which clearly demonstrates every detail of the site and the speed of loading the required page, for example, for home page blog site, if you select "Amsterdam, Netherlands" in the settings, the site load speed will be 1.08 seconds, which is not so bad. 
Below is all the necessary information that is provided by the service on the speed of connection, waiting and response of both 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 speed of loading pages on the site by affecting these places. This will help a wonderful tool developed by Google - Google PageSpeed Insights.
Optimizing the speed of loading site pages using Google PageSpeed
In fact, everything is simpler than it seems at first glance, but I want to note the moment that when using google PageSpeed Insights does not see all the points that can worsen the speed of loading the pages of the site, but it is quite suitable, by completing all the points at the request of the service, you can significantly improve the speed. For a more detailed analysis of the factors affecting the website loading speed, you need to use the Mozilla Firefox browser with the Firebug add-on and the PageSpeed plugin for Firefox.
Why Firefox? For Firefox, this plugin looks more convenient, even the content that is displayed after analyzing the site pages by the plugin is more compact, so I advise you to analyze the pages using Firefox.
So, after installing the plugin and the firebug add-on, a button with a beetle image will appear in the upper right corner.
Go to the site for which you want to perform the analysis, click on the button with the beetle. A window will open in front of you, the last tab of which will be called Page Speed. After clicking on the tab, a window with a button will appear. Analyze Performance, you need to click on the button and wait while the page is analyzed. Next, you will see a list of all the recommendations that you need to follow to improve the speed of loading pages on the site. After a short manipulation of the content of the blog pages, I achieved a result on PageSpeed = 94 out of 100 possible points, which is quite good, you can certainly improve the result, but so far this is not critical, the main thing is that I have eliminated all the main interfering points. 
But the green checkmarks seem to say that everything is in order, in fact, you can improve the indicator and reach a value of more than 94.
So, let's now look at the main recommendations that you need to follow to optimize the speed of loading pages on your site:
Turn on compression- to configure xml, css, js and html compression in gzip format, add the following code to the .htaccess file on the site's ftp server:
Provide images with the proportions you want- in CSS files it is necessary to set fixed proportions for images, instead of changing them using CSS.
Use browser cache, here the cache validator is specified and the item is executed Specify a cache validator- it is necessary to use browser-side caching, i.e. client, you need to add to .htaccess following lines code:
This part of the code implements caching for 7 days, do not forget that you do not always need to fulfill the requirements of search engines, if the elements of your site are updated frequently, you need to configure caching for each separately.
Optimize images- in order to reduce the page size and accordingly increase the loading speed, you will need to use the principle of copying all site images from ftp server and batch upload for further processing into the service http://www.smushit.com/, the procedure is quite long if the number of images on your site changes in the thousands. Errors may occur that gif files will be compressed into jpg or png, while the file name changes, you need to take into account this moment if there are images gif format, it is better to download them separately and then edit them manually. Recommendations:
- Refresh the page after each download of the package, otherwise the images will be added to the current list.
- All optimized files are downloaded by the archive from this service, so they need to be extracted from the archive before uploading to the server.
Deferral of parsing java script - you can run a script for some time loading a document using the code:
Shorten JS scripts and CSS styles- you need to use the service: http://www.refresh-sf.com/yui/, which removes extra spaces in the code, thereby saving file space.
Minify HTML- to reduce HTML pages you can remove extra spaces and auxiliary quotation marks, which can be omitted in specific situations
Specify image sizes- for all images, their sizes must be prescribed, there is no need to omit the setting of the image sizes, otherwise either the images will be scaled crookedly, or the CMS will resort to self-prescribing css styles for the images, thereby increasing their size.
Specify Vary header: Accept-Encoding- all files opened for caching should return a header, just add the code to .htaccess 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 into 1 file, js scripts, ideally, also need to be combined into 1 file.
Conclusion
The provided list of recommendations will significantly help to improve the speed of loading site pages, but do not forget that at some points the load on the server may increase, for example, when using gzip compression by means of the server and using caching on the browser (client) side, here you will need to approach the optimization steps with the other side and prepare gzip files independently, and configure the correct processing in .htaccess, and, depending on the browser, provide users with compressed or uncompressed files.
Also, keep in mind that improving page load speed has a positive effect on site SEO, and all things being equal, if your site wins in speed, it will outperform the competition.
I wish you success in optimizing the speed of your website pages!
I think it's no secret that page load speed affects many factors. If someone is not in the know, then I will briefly say the following that the loading speed affects not only whether the visitor will wait for your site to load, but also on SEO optimization... Indeed, today many search engines, when ranking sites, have begun to take into account the page load speed. Therefore, the faster your site loads, the more visitors you can get from search engines, and, consequently, more money to earn on it.
Therefore, in this article, I decided to collect the top 10 tips on how you can increase the speed of loading your web page and the site as a whole. The article does not claim to be a genius and is intended for beginners.
So let's go:
1. Reduce the number of HTTP requests
80% of page loading is focused on loading page components: scripts, photos, CSS files, flash. The HTTP / 1.1 specification recommends that browsers download no more than 2 components of a web page in parallel from a single host. By reducing the number of these components, we reduce the number of HTTP requests to the server and, as a result, increase the page load 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
By placing the connection to the css files in the page header, we get a gradual rendering of the page, i.e. the page will load gradually - first the title, then the logo at the top, navigation, etc. - and this, in turn, serves as an excellent indicator of page loading for the user and improves general impression from the site.
Placing CSS files at the bottom of the page prevents many browsers from rendering the page gradually. This is because the browser "does not want" to redraw elements, which may change their style after loading the page. So always include all your CSS files at the top of the page in the HEAD section.
3. Put javascript at the end of the page
By placing javascript files at the bottom of the page, we allow the browser to load the page with the content first, and only then start loading the javascript files. If your site keeps up with the times and contains all possible interactive "gadgets", then there can be several of these javascript files and they can weigh several hundred kilobytes, so making the user wait until all your javascipt files are loaded is fatal before loading the page.
Also, external .js files block parallel loading. The HTTP / 1.1 specification recommends that browsers download no more than 2 components of a web page in parallel from a single host. Thus, if the images for your site are located on different hosts, you will get more than 2 parallel downloads. And when the script is loaded, the browser won't start any other downloads, even from other hosts.
4. Minify css and javascript
File minification is the removal of all non-essential symbols from the code in order to reduce the file size and speed up its loading. In the minified file, all comments and insignificant spaces, line breaks, tabs are removed. Everything is simple here. The smaller the file size, the less time it will take for the browser to download it. And these 24 online services for compressing and optimizing CSS code will help you to minimize your code.
5. Use subdomains for parallel downloads
As I said above, according to the HTTP / 1.1 specification, browsers are limited on the number of simultaneously loaded site components, namely, no more than 2 components from one host. Therefore, if your site has a lot of graphics, then it is better to place it on a separate subdomain or subdomains. It will be the same server for you, but different for the browser. The more subdomains you create, the more more files the browser will be able to simultaneously download and the faster the entire page of the site will load. You just have to change the address of the pictures to a new one. A very simple but effective way.
6. Use the browser cache
Caching is becoming increasingly important for modern websites that rely heavily on JavaScript and CSS. The fact is that when a visitor visits your site for the first time, the browser will load all javascript and css files, also load all graphics and flash, but by setting the Expires HTTP header correctly, you will make the page components cacheable. Thus, when a visitor visits your site again or goes to the next page of your site, some required files and the browser doesn't need to download them again. Hence the gain in site loading speed.
Therefore, expose the Expires HTTP header wherever possible, for several days or even months in advance. In order for the Apache web server to send the Expires HTTP headers corresponding to the recommendations, you need to add the following lines to the .htaccess file located in the root folder of the site:
This snippet of the Apache Web server configuration file checks for the mod_expires module and, if mod_expires is available, enables HTTP Expires headers that set the above objects to be kept in the browser and proxy cache for one year from the time they were first loaded. Having set this lifetime for the browser cache, it can be difficult to update the files. Therefore, if you have changed the content of the css or javascript file and want these changes to be updated in the browser cache, then you need to change the name of the file itself. Usually, the version of the file is added to the name of the file, for example: styles.v1.css
7. Use CDN to download popular JavaScript libraries
If your site uses a popular javascript framework, for example jQuery, then it's better to use a CDN to connect it.
8. Optimize your images
It is necessary to determine the appropriate format for your images. Choosing the wrong image format can significantly increase the file size.
- GIFs are ideal for images with multiple colors, such as a logo.
- JPEG - great for detailed images with big amount colors such as pictures.
- PNG is your choice when you need a high quality image with transparency.
Here are a few online services to optimize images:
9. Don't scale images
Do not resize the image using the width and height attributes of the tag, or using CSS. This also negatively affects the page load speed. If you have an image with a size of 500x500px, and you want to insert an image with a size of 100x100px on the site, then it is better to resize the original image using a graphics editor Photoshop, or any other. The lower the weight of the image, the less time it will take to load it.
10. Use Gzip compression
Research has shown that gzip compression text file"On the fly" in 95–98% of cases allows you to reduce the time for transferring the file to the browser. If you store archived copies of files on the server (in the memory of a proxy server or simply on a disk), then the connection in the general case can be released 3-4 times faster.
Beginning with HTTP / 1.1, web clients indicate which compression types they support by setting the Accept-Encoding header in the HTTP request.
Accept-Encoding: gzip, deflate
If the web server sees such a header in the request, it can compress the response using one of the methods listed by the client. When issuing a response using the Content-Encoding header, the server notifies the client about which method was used to compress the response.
Content-Encoding: gzip
The data transferred in this way is about 5 times less than the original, and this significantly speeds up their delivery. However, there is one drawback here: the load on the web server increases. But the issue with the server can always be resolved. So let's not pay attention to it.
In order to enable GZIP compression on your site, you need to write the following lines of code in the .htaccess file:
If this way worked, then great, if not, then you can try the following code:
But again, given code does not work on all servers, so it is better to contact the support service of your hosting provider and clarify this issue.
Well, that's actually all I wanted to tell you. In this article, I have tried to list all the main methods of client-side optimization to increase the speed of loading a web page. In addition to client optimization, there is also server optimization. But this is already a 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. Thank you for the attention!
Nobody likes a slow site - neither users nor search engines. With the current internet speed, people are no longer ready to wait long for a page to load. This is not a dial-up connection where waiting was inevitable. And search engines, fighting for the quality of search results, do not want to give users bad (in this case, slow) sites. Therefore, all other things being equal, a slow site will be lower in the search results than its faster competitors.
What is the normal download speed
The faster the better. But on average, 2-3 seconds for the main body of the page's content to load is quite normal.
What determines the download speed
There are two parties involved in loading the site - the user's browser and the server where the site's files are physically located. Data is exchanged between these parties.
Site loading can be slowed down by problems on each side and in between.
- Slow server: may be trite to be missing random access memory or cores in a processor, like a regular computer.
- Slow site engine (CMS): if the code was written by inexperienced programmers without considering its performance.
- The server is far from the user: for example, the server with the site files is physically located in Moscow, and the site is accessed by a user from Vladivostok.
- Lots of files: To display the page, the browser needs to load a lot of images, files, styles, scripts and fonts.
- Heavy files: Plus these files are heavy.
All steps to optimize site speed are aimed at eliminating these problems.
How to check site speed
Of the many online website speed testing services, Google's PageSpeed is arguably the most popular. It's easy to work with it - we indicate the site address and press the "Analyze" button.
As a result, we will see the following indicators (separately for computers and mobile):
- After what time the browser receives a response from the server and starts rendering the page content (FCP - First Contentful Paint).
- How long does it take for the user to see the main content in the browser (DCL - DOM Content Loaded).
- How optimized the site is in terms of loading speed.
- Specific recommendations for optimization. By clicking on the "How to fix" links, we see the addresses of problem images and files with which you need to do something (mainly compress).
It is advisable to get into the green zone - both in the “Page Speed” section and in the “Optimization” section.
One more good service to check the download speed, however, in English - Pingdom. Distinctive feature- such beautiful graphs (called waterfall) show which files, in what order and how long are loaded:
And now to the point:
How to speed up your website
Step 1. Image optimization
Unoptimized images are the "hardest" part of the site. Therefore, working with pictures can give a significant increase in speed.
What are we looking at:
Picture size (width and height)
If you have captured the product and received photographs with a width of about 5000 pixels, you can safely reduce the width to 1600, in most cases this will be enough. An exception will be those sites (mainly online stores) where you can view a product with a "magnifying glass", but even there the enlarged picture is not loaded immediately, but only if a person decides to use this tool.
Image weight (kilobytes)
Images from the camera can (and should) be compressed in volume before publishing on the site. They do this either in Photoshop (or another image editor), or through online services, for example, TinyPNG or Optimizilla.
Preview for large pictures
If you have photos of products (or completed works) and have a page with their list, it would be wise to make small previews (thumbnails). Then the list of products, works or photos will load faster.
For example, Sportmaster uses product pictures in three versions:
Picture for the list of products (weighs 7 Kb)
Picture for product card (weighs 18 Kb)
A picture for viewing the product with a "magnifying glass" (weighs 942 Kb)
Imagine how long it would take to load the list of goods if Sportmaster used only the original images (those with more than 900 kilobytes).
When checking site speed through Google PageSpeed, you will receive a ready-made list of images that should be optimized:
Step 2. Gzip compression
Gzip is a program for compressing files on a server (analogous to zip archives on a computer). When Gzip is enabled, the server, before sending the page code to the browser (as well as scripts, styles, etc. text information) will archive these files first. The browser will receive the archive and unpack it on the user's computer. The compressed information will be transferred faster between the browser and the server.
How to enable Gzip compression:
If you have access to the htaccess file, add the following 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 need the nginx.conf configuration file. Add the 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 the hosting support that you need to enable gzip compression.
If compression works, then in the results of the PageSpeed check you will see (in the "Implemented optimization techniques" block):
Step 3. Browser-side caching
When the browser loads the site, it saves some of the information from it (style files, scripts, pictures) in its own memory (cache, cache). Then, on other pages of this site or when you re-enter the current page, the browser will not request this information again from the server (which is a long time), but will load it from own memory(which is faster). Therefore, in the browser settings there are buttons "Clear cache", and we all know the keyboard shortcut CTRL + F5 (refresh the page with clearing the cache).
To use the browser cache, you need to tell it what types of files from your site to save to the cache. How to do it:
Through the htaccess file (we cache static files for 10 days):
ExpiresActive 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 to the server settings, again write to technical support and ask to configure caching of static files.
Similar to the list of images, Google PageSpeed produces a list of resources for which caching is not configured, but you could:
Please note that you can only configure caching for your own resources. You won't be able to change the cache settings, for example, for Yandex.Metrica scripts.
Step 4. Minify css and js files
Minification is the reduction of file size by removing spaces, blank lines, comments, using shorter variable names, etc. The browser does not care which file to work with - normal or minimized, and such a file weighs less.
An example of regular code:
Speedometer-wrapper (
position: relative;
}
.speedometer-wrapper .list (
margin-top: 80px;
margin-left: -20px;
padding-bottom: 85px;
}
After minimization:
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 - include them on the site. For example, the regular version jQuery script weighs 265 Kb, and its compressed version is 85 Kb. Do you feel the difference?
The only drawback of minification is that the readability of the file is lost. If you need to make changes to compressed file- it will be difficult to do this, it is inconvenient for a person to work with such a file (there is one solid line). Therefore, to minify your scripts, additional plugins for the CMS are usually used - they automatically compress css and js files before uploading to the site. At the same time, the layout designer can easily work with regular versions of files.
PageSpeed here, too, carefully shows us a list of files, the size of which can be reduced by minimizing:
Step 5. Order of loading css and js files
Browsers have their own algorithms for the fastest loading of pages (no one wants to be branded as a "slow" browser). Therefore, having received the page code, the browser tries to figure out which of the included files it needs to start downloading first. Sometimes it happens that the browser has already reached the rendering of some form on the page, and the file with the styles for it has not yet loaded - then rendering will stop.
In order for the browser to load site files in an optimal way, it is recommended that all style (css) and font files be included at the beginning of the page code (in the tag
), and all script files (js) - at the end of the page, before the closing tag.
...
rel = "stylesheet" href = " //fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin,cyrillic"type =" text / css ">
rel = "stylesheet" href = "/ inc / min / styles.min.css" type = "text / css">
rel = "stylesheet" href = "/ css / main.css" type = "text / css">
...
...
Then the browser will load the styles necessary for rendering, and will start showing the page to the user, while simultaneously loading the necessary scripts (which will then provide interactive - sliders, tabs, etc.).
Step 6. Extra plugins or counters
Sometimes in the code of pages there are links to plugins or modules that are no longer used on the site. For example, first the layout designer connected one plug-in for sliders, and then replaced it with a new one, but did not delete the old one. Or there are codes from counters, statistics for which you no longer look. Be sure to remove this "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 use the same plugin for the slider on all pages - no need to include any special script every time.
Step 7. Using CDN
A CDN (Content Delivery Network) is a network of many servers distributed geographically across a country or around the world. Each of the servers duplicates content from the main server (content is duplicated at the first request by the user and is stored for some time).
When a user, for example, from Khabarovsk, wants to download something from a CDN, then he receives content not from the main server (which may be, for example, in Moscow), but from the server closest to the user (which may be in the same Khabarovsk ). My native country is wide, so the Khabarovsk-Khabarovsk request will pass faster than the Khabarovsk-Moscow request. Albeit in milliseconds, multiplying by the number of files and their size, this can give a good speed increase.
Typically, a CDN is used in two cases:
- Loading third-party scripts. These are all the same jQuery, Bootstrap, Web Fonts. For example, you can tell the browser to download them not from their own server, but from Google servers, Bootstrap, or other CDNs.
- Downloading images and scripts from your CDNs. Large sites (Ozon, Avito, etc.) set up their own CDNs, using either their own servers, or (more often) servers of CDN networks, for example, Google Cloud or StackPath. Some CMS have already included CDN support in their functionality. For example, Bitrix has a free "Website Acceleration (CDN)" module.
Step 8. Reducing the number of http requests
In order for the browser to make fewer requests to the server (and these are http requests), you need to reduce the number of files it needs. For example, if you have three separate scripts (for the slider, for modal windows and for tooltips), then you can combine them into one file, and then also minify (see step 4).
Since it is not very convenient to merge files manually (if you need to replace one of the scripts in the future), they usually set up their automatic merging. Most CMS have their own plugins for this (for example, Autoptimize for WordPress).
Configured caching for the browser (step 3) and removing unnecessary scripts (step 6) also reduce the number of http requests.
Step 9. Optimizing fonts
Try to use one consistent font throughout your site. This will not only add aesthetics to the site, but also reduce the amount of downloadable files for displaying fonts.
You can also reduce the number of files by eliminating the use of outdated formats. Previously, each font was loaded in eot, ttf, woff, svg formats for correct display in browsers. Nowadays modern browsers allow us to limit ourselves to only two formats - woff and woff2.
Alternatively, popular fonts can be downloaded from Google Fonts. First, it will take the load off your server. Secondly, the files with the fonts will already be optimized, this is shifted from your shoulders to Google (which, you see, is nice).
Step 10. Shrinking the HTML code
In addition to compressing style files and scripts (step 4), you can configure minification for the HTML code of the page itself. I think this is relevant for long pages - blog articles, large product listings, etc. To configure it, you should look for a suitable plugin for your CMS (for example, Html Minifier for Joomla).
Step 11. Optimizing server performance
If you have a dedicated server (your System Administrator can manage its settings), you can try to upgrade its parameters. For example, add RAM or replace the processor. Also, the sysadmin can carry out a "cleaning" on the server itself - remove unused and update the current modules.
In the case of shared hosting (without access to server settings), you can look towards switching to more expensive tariffs, if they are better specifications server.
Step 12. Optimizing scripts and databases
One of the stages of website loading is the generation of the final HTML-code by the server, which it will give to the browser. This code is generated by the site engine (CMS). If the engine is written illiterately, then it can "collect" the page for a very long time, making unnecessary requests to files and databases, using "slow" programming algorithms, etc.
Therefore, when choosing a CMS for a website, it is recommended to look towards popular engines (Bitrix, Open Cart, WordPress, MODx, etc.), which have proven their performance and reliability. And since these systems are constantly being improved (including in terms of speed), you should regularly update the CMS on your website.
No sloops
Take care of fast loading of your site. Remember that there are many competitors in the search results, and the faster your site loads, the fewer other sites a person will have time to open in neighboring tabs.
If you need help in optimizing the speed of loading a site - write, we will take a look at your site and tell you if it is possible to speed it up.
Site load time is one of the most important indicators affecting the behavior of site users. Let's figure it out.
Reducing the page load speed by 1 second entails:
- decrease in the number of views by 11%;
- decrease in user satisfaction rate by 16%;
- reduction of conversion up to 6%.
Below is a graph showing the rise in interest closed pages due to the increased loading time of the site.
A couple of extra seconds of website loading time reduce the chances of engaging visitors and making sales.
KISSmetrics has conducted a study on how website load speed affects user and customer behavior:
- 47% of users expect a page to open in less than 2 seconds;
- 40% of users close the site if it takes longer than 3 seconds to load;
- 79% of buyers who were dissatisfied with the usability of the site, most likely, will not buy through it in the future;
- 44% of online shoppers will tell their acquaintances about sites that they are not satisfied with.
Faster site loading is especially important for users visiting the site from mobile devices. And since now the share mobile traffic is constantly growing, then special emphasis should be placed on acceleration on mobile.
Patience of mobile internet users
Increasing website loading speed as a way to increase conversion
Site load time affects conversion. Let's look at the example of the Walmart network.
Conversion rate versus page load time
Here we can see that the higher the page load speed, the higher the conversion rate.
Walmart found that decreasing page load times by a second can increase conversions by up to 2%.
Impact of website load optimization on organic traffic
In 2010, Google said it would take site loading speed into account when ranking search results.
Reason for which search engines the need to do this is obvious enough. If a search engine offers you "slow" sites, you are likely to use it less often.
Therefore, it is important to reduce your website load time so that your website is ranked higher than the competition.
Summarizing the above, we conclude that website acceleration leads to:
- increase in conversion;
- a decrease in the bounce rate (the percentage of the number of visitors who left the site directly from the entry page or viewed no more than one page of the site);
- rise in search engines.
20 ways to speed up website loading
1. Reduce the number of HTTP requests
According to research by Yahoo, most of the time a page loads is spent loading images, style files, and scripts.
A separate HTTP request is created to download each such file. The more such requests, the longer it takes until the page is fully loaded.
It is very easy to check how many HTTP requests are generated - use the browser developer panel.
Let's look at the process using an example google browser Chrome.
The first step we go to the analyzed page, right-click on any empty area of the page and select in context menu See View Code. The Chrome DevTools panel will open at the bottom of the screen. Go to the Network tab and reload the page. We see a list of all requests, their response statuses and file upload times.
2. Combine and minify CSS and JS files
Now that we know how many requests are being generated, we can start reducing them.
The easiest way to reduce the number of requests is to combine and minify (compress) HTML, CSS and JavaScript files. The most correct way to set this task is to developers. If this is not possible, you can try to do it yourself.
We open any text editor, we insert into it the contents of all used css files in the order in which they are included in the template. Next, using any minification service (for example, CSSminifier), compress the code.
As a result, the number of requests is reduced, and characters that are insignificant for the interpreter (spaces, tabs, line breaks, etc.) are removed from the final code.
3. Implement asynchronous CSS and JS loading
We are all used to loading a CSS file into HTML by inserting a tag
However, not all pieces of code are so critical that they should be loaded right away. For example, the site has a rarely used product comparison component. It makes sense to load styles and js-code for it directly at the moment when users want to use such functionality.
Asynchronous loading of CSS and JS is often done only by professional developers. We only note that you need to look either towards using the preload value of the rel attribute in conjunction with the onload attribute, or load the styles with a js script.
4. Configure lazy loading of javascript code
To understand what lazy loading of javascript code is, let's first analyze how it usually happens. In standard mode, javascript files interrupt parsing an HTML document until all such files are received and executed.
Often we need to insert some not particularly significant widget social networks to the footer of the site. It doesn't matter for us whether it appears on the page immediately or after a couple of seconds.
To implement lazy loading, or rather processing, such a script, we just need to register the defer attribute to the tag