How to increase the speed of loading pages.
At the moment, the speed of loading pages affects many indicators. On the speed depends on the visitor will stay on your site or not wait and go to another. Yes, and search engines, at the moment when ranking, also pay attention to the speed of loading pages of your site.
For SEO optimization, this indicator is also affected. Conclusion-the speed of loading pages depends on the number of users, and on them already and your income. In this regard, I want to give some simple tips for those who are just starting their career in this field. Brilliant ideas of course you will not find but a few useful recommendations never hurt anyone.
Reducing HTTP requests. Loading components: scripts, photos, flash, CSS files, takes about 80% of the total page load. You can increase the download speed by reducing the components that are loaded at the same time. I advise that the browser simultaneously downloads no more than two components.
Thus reducing the number of simultaneous requests sent to the server, increase the speed of loading pages. Most of the readers of the question. How to do this without compromising on page design? This can be achieved in different ways:
1. Using CSS-sprite. A CSS sprite is an image composed of multiple fragments. That is, the picture consists of several small. They are in turn used at the right time, using background-image and background-position.
2. The use of Inline images. Inline images are embedded directly into the page using the data URL scheme. But at the same time, the volumes of the HTML document. You can embed Inline images in style sheets, which also reduces the number of queries. It should be noted in this arrangement, the size of the HTML will not change.
3. File connection in one. This may be the case if the page connects several CSS or JS files, you can merge them. This is easy to do, and the result will again be a decrease in the number of requests to the server.
Place CSS files at the very beginning of the page. The whole point is that by placing a connection to CSS files in the header, you achieve step-by-step rendering of pages. The whole page is loaded gradually: title, logo, navigation and so on. Visually, this has a positive effect on users, he sees the process of loading the page visually. The visitor does not need to look at the blank screen.
In a situation when CSS files are located in the bottom of the page, render the page progressively most browsers can’t. Some elements of the page may change after loading, and the browser does not want to draw them. So the CSS files is better to place in the HEAD section.
To download use subdomains. Recall that browsers use the restriction, loading only two components of the site from the same host at the same time. If your site uses many graphic elements, it is better to place them on a separate subdomain or on several. The browser will treat this as a few different servers.
The number of parallel downloads depends on the number of created subdomains, the more of them, the more files will be downloaded at the same time and Vice versa. Page loading speed will also be higher. You will only need to change the addresses of the graphical components. It’s pretty simple.
Use the cache. Caching plays an important role for web sites, especially if they are extensive use of CSS and JS. When you visit a website the user first browser will load all CSS files, JS, flash, graphics etc, using the HTTP Expires header, you can cache page elements. If you configure the HTTP expires header correctly, you will achieve this. Result: when you visit your resource again or navigate to another page, the browser cache will store the files used to load the next page. So the reload of these files is not needed, the page loading speed itself increases.
We recommend that you place the HTTP Expires headers wherever possible. It is better to put them on for a period of several days to a month. The web server will issue the necessary HTTP commands to the headers.
With a long lifetime of the browser cache, sometimes there are problems with updates. To solve this problem is quite simple, if you make changes to css and js files, you need to rename them. This should be done in order to make changes to the cache. Without complicating your life, just add a version to the file name.
Use CDN to load JS libraries. For example, when your site has a popular JS framework, say jQuery, it is better to connect it using CDN. Content Delivery Network is a large number of web servers that span a large geographical area and achieve the highest download speed.
For example — one of the Google Libraries CDN. Such CDNs are intended for popular open-source JS libraries. When loading js frameworks with Google Libraries, it allows you to increase the speed when loading pages and reduce server traffic.
Optimization of images. First, you need to determine the optimal format for graphics on your site. The choice of format depends on the file size, if picked up incorrectly, you can increase the size, not decrease.
GIF-image consisting of several colors, it can be a logo, etc.
JPEG – a large number of colors, high detail. For example-photo.
PNG-transparency, very high level of detail, high image quality.
There are two ways to optimize graphics components. You can use the online services by compressing the image. Or use specialized programs. In the second case, certain knowledge and skills are needed. And for online services need only the Internet. It’s quite simple, upload an image, the server automatically performs optimization, and you only need to download the finished file.
Do not use image scaling. To edit an image you should not use width, height, tags, CSS. This can adversely affect the download speed. If you figure originally 500×500 and 100×100 you need. To change the size of the original better before you put it on the website, can use, for example, photoshopo. On the volume of the picture depends on the speed of its loading.
Gzip compression. Gzip-compression of files containing text information, in almost 100% of cases, makes it possible to reduce the time of file transfer to the browser. To release the connection three or four times, we recommend that you store the archive copies on a server, proxy server, or disk.
Web clients need to identify the types of compression they support. This information is specified in the Accept-Encoding header in HTTP requests. This gives the opportunity to the web server, reading a headline, use the right compression type for the response. Using one of the specified compression types by the client. The customer receives a notification about the type of compression used for the response using the Content-Encoding header.