Top 10 tips on how to increase page loading speed
I think it’s no secret that page loading speed affects a lot of factors. If someone doesn’t know, then I’ll briefly say the following: loading speed not only affects whether a visitor waits for your site to load, but also SEO optimization. After all, to date, many search engines when ranking sites have begun to take into account the page loading speed. Therefore, the faster your site will load, the more visitors you can get from search engines, and, consequently, more money to make money on it.
Therefore, in this article I decided to collect the top 10 tips on how you can increase the speed of loading a web page and the site as a whole. The article does not claim to genius and is designed for beginners.
So, let's go:
')
1. Reduce the number of HTTP requests
80% of the page load is focused on the page components loading: scripts, photos, CSS files, flash. The HTTP / 1.1 specification advises that browsers in parallel download no more than 2 components of a web page from one 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 loading speed.
But how to reduce the number of requests to the server without affecting the appearance of the page?
In fact, there are several ways.
2. Place CSS files at the top of the page.
Placing the connection to the css files in the header of the page we get a gradual rendering of the page, i.e. the page will be loaded gradually - first the title, then the logo at the top, navigation, etc. - and this in turn serves as an excellent indicator of page load for the user and improves the overall impression of the site.
Placing CSS files at the bottom of the page prevents many browsers from rendering the page gradually. This is due to the fact that the browser “does not want” to redraw elements that may change style after page loading. So always connect all your CSS files at the top of the page in the HEAD section.
3. Place javascript at the end of the page
By placing the javascript files on the bottom of the page, we allow the browser to load the page with the content in the first place, and only then start downloading the javascript files. If your site keeps up with the times and contains all possible interactive gadgets, then there may be several javascript files and they can weigh several hundred kilobytes, therefore, before loading the page, forcing the user to wait until all your javascipt files are loaded is disastrous.
In addition, external .js files block parallel downloads. The HTTP / 1.1 specification advises that browsers in parallel download no more than 2 components of a web page from one host. Thus, if the pictures for your site are located on different hosts, you will get 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 the removal from the code of all nonessential characters in order to reduce the file size and speed up its loading. In the minimized file, all comments and insignificant spaces, line breaks, tab characters are deleted. Everything is simple here. The smaller the file size, the less time the browser will need to download it. And to minimize your code, these 24 online services will help to compress and optimize CSS code.
5. Use subdomains for parallel download.
As I said above, according to the HTTP / 1.1 specification, browsers are subject to restrictions 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’s better to put it on a separate subdomain or subdomains. For you it will be the same server, and for the browser - different. The more subdomains you create, the more files the browser will be able to download simultaneously 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. Very simple, but effective way.
6. Use browser cache
Caching becomes extremely important for modern websites that use extensive JavaScript and CSS connectivity. The fact is that when a visitor comes to your site for the first time, the browser will download all javascript and css-files, will also load all graphics and flash, but by correctly setting the Expires HTTP header, you will make the page components cacheable. Thus, when a visitor comes to your site again or goes to the next page of your site, some necessary files will already be in the cache of his browser and the browser will not need to download them again. Hence the gain in speed of loading the site.
Therefore, expose the Expires HTTP header wherever possible, for several days or even months in advance. In order for the Apache web server to give the Expires headers that comply with the recommendations, you need to add the following lines to the .htaccess file located in the root folder of the site:
This fragment of the Apache Web Server configuration file checks for the presence of the mod_expires module and, if the mod_expires module is available, includes returning the Expires HTTP headers that set the storage period for the above objects in the browser and proxy cache equal to one year since the first download. Having established such a lifetime of the browser cache, it may be difficult to update the files. Therefore, if you change the contents of a css or javascript file and you want these changes to be updated in the browser cache, you need to change the name of the file itself. Usually in the file name add its version, 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 is better to use a CDN to connect it.
A CDN (Content Delivery Network) is a set of web servers that are geographically separated to achieve maximum content delivery speed to the client. The server that will directly give the content to the user is selected based on some indicators. For example, the server with the smallest number of intermediate hops to it or with the shortest response time is chosen. In addition, the browser caches javascript files, and if you have visited sites that use this method, then this library is already in the cache of your browser, and it will not load it again.
One of these CDNs is Google Libraries. This is the CDN for popular open-source JavaScript libraries. Downloading popular javascript frameworks with Google Libraries allows you to increase page loading speed and reduce traffic to your server.
I wrote about how to load jQuery from the Google repository in this article “Increase page loading speed by loading jQuery from the Google repository” .
8. Optimize your images.
You need to determine the appropriate format for your images. Choosing the wrong image format can significantly increase the file size.
You can optimize the image in two ways: using programs or online services on the Internet to compress images. In the first case, you will need some knowledge to work with this or that program, but everyone can use online services. All you need to do is upload the necessary images, and the service itself optimizes them and gives you a link to download already compressed files.
Here are some online image optimization services:
9. Do not scale images
Do not resize the image with the width and height attributes of the tag, or with CSS. This also negatively affects the page loading speed. If you have an image of 500x500px in size, and you want to insert an image on the site with a size of 100x100px, it is better to change the size of the original image using the Photoshop graphic editor, or any other. The smaller the weight of the picture, the less time it will take to load it.
10. Use gzip-compression
As studies have shown, gzip-compression of a text file on the fly in 95–98% of cases allows reducing the time for file transfer to the browser. If you store archived copies of files on the server (in the memory of the proxy server or simply on the disk), then the connection generally can be released 3-4 times faster.
Starting with the HTTP / 1.1 protocol version, web clients specify which types of compression 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 apply a response compression using one of the methods listed by the client. When issuing a response through the Content-Encoding header, the server notifies the client of the method by which the response was compressed.
Content-Encoding: gzip
The data transmitted in this way is about 5 times less than the initial data, and this significantly speeds up 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 let's not pay attention to it.
In order to enable GZIP compression on your site, you need to register the following lines of code in the .htaccess file:
If this method worked, then fine, if not, then you can try this code:
But again, this code does not work on all servers, so it’s best to contact the support of your hosting provider and clarify this issue.
Well, that's all that I wanted to tell. In this article, I tried to list all the main ways of client optimization to increase the speed of loading a web page. In addition to client optimization, there is also server optimization. But this is 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. Thanks for attention!
Therefore, in this article I decided to collect the top 10 tips on how you can increase the speed of loading a web page and the site as a whole. The article does not claim to genius and is designed for beginners.
So, let's go:
')
1. Reduce the number of HTTP requests
80% of the page load is focused on the page components loading: scripts, photos, CSS files, flash. The HTTP / 1.1 specification advises that browsers in parallel download no more than 2 components of a web page from one 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 loading speed.
But how to reduce the number of requests to the server without affecting the appearance of the page?
In fact, there are several ways.
- Use CSS sprites . A CSS sprite is a combined image that contains several small images that are cut out at the right time for the desired element using the properties: background-image and background-position.
- Using inline-pictures. Inline images use the data : URL scheme to embed the image in the page itself. This, however, will increase the size of the HTML document. By embedding inline images in your style sheets you will reduce the requests to the server, and the size of the HTML will remain the same.
- Merge several files into one. If you connect more than one css or js file on a page, then you can combine them into one. This is a very simple but effective way to reduce the number of http requests to the server. How to do it on the fly, I wrote in my note here “Accelerate your website. Static compression of css and js files on the fly
2. Place CSS files at the top of the page.
Placing the connection to the css files in the header of the page we get a gradual rendering of the page, i.e. the page will be loaded gradually - first the title, then the logo at the top, navigation, etc. - and this in turn serves as an excellent indicator of page load for the user and improves the overall impression of the site.
Placing CSS files at the bottom of the page prevents many browsers from rendering the page gradually. This is due to the fact that the browser “does not want” to redraw elements that may change style after page loading. So always connect all your CSS files at the top of the page in the HEAD section.
3. Place javascript at the end of the page
By placing the javascript files on the bottom of the page, we allow the browser to load the page with the content in the first place, and only then start downloading the javascript files. If your site keeps up with the times and contains all possible interactive gadgets, then there may be several javascript files and they can weigh several hundred kilobytes, therefore, before loading the page, forcing the user to wait until all your javascipt files are loaded is disastrous.
In addition, external .js files block parallel downloads. The HTTP / 1.1 specification advises that browsers in parallel download no more than 2 components of a web page from one host. Thus, if the pictures for your site are located on different hosts, you will get 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 the removal from the code of all nonessential characters in order to reduce the file size and speed up its loading. In the minimized file, all comments and insignificant spaces, line breaks, tab characters are deleted. Everything is simple here. The smaller the file size, the less time the browser will need to download it. And to minimize your code, these 24 online services will help to compress and optimize CSS code.
5. Use subdomains for parallel download.
As I said above, according to the HTTP / 1.1 specification, browsers are subject to restrictions 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’s better to put it on a separate subdomain or subdomains. For you it will be the same server, and for the browser - different. The more subdomains you create, the more files the browser will be able to download simultaneously 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. Very simple, but effective way.
6. Use browser cache
Caching becomes extremely important for modern websites that use extensive JavaScript and CSS connectivity. The fact is that when a visitor comes to your site for the first time, the browser will download all javascript and css-files, will also load all graphics and flash, but by correctly setting the Expires HTTP header, you will make the page components cacheable. Thus, when a visitor comes to your site again or goes to the next page of your site, some necessary files will already be in the cache of his browser and the browser will not need to download them again. Hence the gain in speed of loading the site.
Therefore, expose the Expires HTTP header wherever possible, for several days or even months in advance. In order for the Apache web server to give the Expires headers that comply with the recommendations, you need to add the following lines to the .htaccess file located in the root folder of the site:
<IfModule mod_expires.c> Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years" </IfModule> This fragment of the Apache Web Server configuration file checks for the presence of the mod_expires module and, if the mod_expires module is available, includes returning the Expires HTTP headers that set the storage period for the above objects in the browser and proxy cache equal to one year since the first download. Having established such a lifetime of the browser cache, it may be difficult to update the files. Therefore, if you change the contents of a css or javascript file and you want these changes to be updated in the browser cache, you need to change the name of the file itself. Usually in the file name add its version, 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 is better to use a CDN to connect it.
A CDN (Content Delivery Network) is a set of web servers that are geographically separated to achieve maximum content delivery speed to the client. The server that will directly give the content to the user is selected based on some indicators. For example, the server with the smallest number of intermediate hops to it or with the shortest response time is chosen. In addition, the browser caches javascript files, and if you have visited sites that use this method, then this library is already in the cache of your browser, and it will not load it again.
One of these CDNs is Google Libraries. This is the CDN for popular open-source JavaScript libraries. Downloading popular javascript frameworks with Google Libraries allows you to increase page loading speed and reduce traffic to your server.
I wrote about how to load jQuery from the Google repository in this article “Increase page loading speed by loading jQuery from the Google repository” .
8. Optimize your images.
You need to determine the appropriate format for your images. Choosing the wrong image format can significantly increase the file size.
- GIF - ideal for images with multiple colors, such as a logo.
- JPEG - great for detailed images with lots of color, such as photos.
- PNG is your choice when you need a high quality image with transparency.
You can optimize the image in two ways: using programs or online services on the Internet to compress images. In the first case, you will need some knowledge to work with this or that program, but everyone can use online services. All you need to do is upload the necessary images, and the service itself optimizes them and gives you a link to download already compressed files.
Here are some online image optimization services:
9. Do not scale images
Do not resize the image with the width and height attributes of the tag, or with CSS. This also negatively affects the page loading speed. If you have an image of 500x500px in size, and you want to insert an image on the site with a size of 100x100px, it is better to change the size of the original image using the Photoshop graphic editor, or any other. The smaller the weight of the picture, the less time it will take to load it.
10. Use gzip-compression
As studies have shown, gzip-compression of a text file on the fly in 95–98% of cases allows reducing the time for file transfer to the browser. If you store archived copies of files on the server (in the memory of the proxy server or simply on the disk), then the connection generally can be released 3-4 times faster.
Starting with the HTTP / 1.1 protocol version, web clients specify which types of compression 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 apply a response compression using one of the methods listed by the client. When issuing a response through the Content-Encoding header, the server notifies the client of the method by which the response was compressed.
Content-Encoding: gzip
The data transmitted in this way is about 5 times less than the initial data, and this significantly speeds up 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 let's not pay attention to it.
In order to enable GZIP compression on your site, you need to register the following lines of code in the .htaccess file:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css <IfModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule> </IfModule> If this method worked, then fine, if not, then you can try this code:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html <ifmodule mod_gzip.c> mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$ </ifmodule> </IfModule> But again, this code does not work on all servers, so it’s best to contact the support of your hosting provider and clarify this issue.
Well, that's all that I wanted to tell. In this article, I tried to list all the main ways of client optimization to increase the speed of loading a web page. In addition to client optimization, there is also server optimization. But this is 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. Thanks for attention!
Source: https://habr.com/ru/post/137239/
All Articles