How to speed up site loading?
10 real ways
The loading time of the portal affects the number of applications from your web resource. Today we will tell you how to track download speed and speed up the site.
Yandex reports that the vast majority of people leave the site if it loads for more than 3 seconds. 79% of users will not go to the site anymore if they are not satisfied with the speed of its opening at the first visit. And just one extra second lowers the conversion by 7%.
What is the optimal duration for opening a site? Strangeloop company statistics are as follows:
- 1 second – perfect;
- 2-3 – normal;
- 4-7 – revision required;
- 8-10 – bad;
- 11 and longer – immediate work is required to optimize the loading of the site.
The shorter the opening time of a web property, the higher the conversion. Moreover, the download should be equally short for both desktop and mobile devices. 85% of smartphone and tablet users expect the same download speed from the mobile version of the site as on a PC. Not getting a normal result, they leave the site.
Programs for measuring speed
A popular way to check metrics is to use Google PageSpeed Insights. The service works simply: you download the URL of a web resource and get an estimate. If it is below 50, then the result is bad, if above 90 – excellent. Below are recommendations for optimizing site speed.
PageSpeed alone should not be limited. To complete the picture, you should use a number of other services. For example, these are GTMetrix , PingDom , WebPagetest , Dareboost and others. Most programs not only give an estimate, but also tell you how to make the download faster.
But how to speed up the download yourself? There are 10 easy ways.
Method 1. CSS files in the header
Include css files at the top of the page. So you will get a gradual re-rendering, since the pages will load gradually: first a title, then a logo with navigation, etc. All this serves as a loading indicator for the client and will improve the impression of the site. If you put css files in the “basement”, browsers will begin to be capricious. They need to re-form the elements that changed their style after loading. To do this is problematic. Therefore, css elements need to be connected at the top, head section.
Method 3: Reduce the number of HTTP requests
80% of the load is related to the loading of components: images, scripts, flash, CSS, etc. Remember HTTP / 1.1 again: browsers must unload at most 2 page components from a single host. By reducing the number of components, we reduce the number of HTTP requests to the server. But how to speed up the site without affecting its appearance? There are several ways:
- Compose multiple files into one. If more than one js or css file is connected on the page, try combining them into one.
- Using CSS sprites. This is a combined image containing several small images.
- Using Inline Pictures. The image is embedded in the page itself using the data URL scheme. But this will increase the HTML size of the document.
Remove all non-essential files from the code in order to reduce its size. The shortened file does not contain comments, insignificant spaces, tabs or line breaks. The smaller the file weighs, the less time it takes the browser to download it. To shorten the code, there are many different programs.
Method 5. Using the browser cache
Method 6. Using subdomains for parallel download
If the website has a lot of graphics, it should be moved to a separate subdomain (remember the HTTP / 1.1 specification). The browser will consider this as having multiple servers. How to speed up page loading several times? The algorithm here is simple: the more you create subdomains, the more files the browser will upload at the same time. In this case, your task is to change the address of the images to a new one.
Method 7. Image Optimization
Determine the appropriate format for the pictures. Choosing the wrong format will significantly increase the file size. You can choose:
- GIF Suitable for pictures with a small number of colors.
- Jpeg. Suitable for bright detailed pictures.
- PNG. Choose this format if you need a high-quality image with transparency.
Method 9. Using Gzip Compression
If you keep archived copies of files on the server, you will be able to provide a connection 3-4 times faster. Gzip compression is an excellent website accelerator. Compressing text files on the fly in the vast majority of cases reduces the time it takes to transfer the file to the browser. Starting with the HTTP / 1.1 protocol version, web clients indicate which compression types are supported.
Method 10. Opt out of image scaling
Do not resize images using CSS or the width and height attributes of the tag. This negatively affects page loading. If you are wondering how to reduce the size of the site, use the Photoshop graphics editor when changing the image. Moreover, the smaller the weight of the image, the less time it takes to download it.
What do you need to remember?
Having worked through each of the listed items, you will reduce the duration of loading a web resource. But remember that website acceleration is only part of the optimization process.
Do not overdo it in the pursuit of eliminating the extra seconds. Pictures should be of good quality, navigation convenient, and information useful. Even animations on the site are a useful thing. Do not allow a situation in which a faster download will cause a further drop in conversion.