I think it is no secret that the page loading speed affects the traffic and visitors. For those who don’t know, the download speed depends not only on how long a visitor will wait, but also on the SEO optimization. After all, today for many search engines have begun to consider the page loading speed while ranking sites. Therefore, the faster your website will load, the more visitors you get from search engines and consequently, more money to make money.
Therefore, in this article I decided to compile the top 10 tips on how you can increase the speed of loading web pages and the whole site. This article does not jargon oriented and is designed for beginners.
So here you go:
1. Reduce the number of HTTP-requests
80% of the “slow” pages contain components like scripts, pictures, CSS files, flash. Specification HTTP / 1.1 recommends that browsers simultaneously process no more than 2 components of web pages from the same host. By reducing the number of these components, we reduce the number of HTTP-requests to the server, and as a result increase the speed of loading pages.
But how to reduce the number of requests to the server without affecting the appearance of the page?
In fact, there are several ways.
Using CSS-sprites. CSS-sprite – a composite image that contains a series of small images that are cut using properties: background-image and background-position.
Using Inline-images. Inline-images using URL-scheme data: for embedding images in the page itself. This, however, increases the size of HTML-document. By embedding inline-images in your style sheet, you will achieve the reduction of requests to the server, and HTML size will remain the same.
Merge multiple files into one. If you connect to more than one page or css- js-file, you can combine them into one. This is a very simple but effective way to reduce the number of http-requests to the server.
2. Place the CSS file on the top of the page
By placing the connection css files anywhere other than the top of the page, we get a gradual rendering of the page, ie, page will load slowly – first header, then the logo at the top, navigation, etc. – And this, in turn, serves as an excellent indicator of the download page for the user and enhances the overall impression of the site.
If you put the CSS files at the bottom of the page, it does not allow many browsers to render the page slowly. This is because the browser “does not want to” redraw the elements that can change the style after loading the page. So all of your CSS files, always connect at the top of the page in the HEAD section.
Minimizing the file – the removal of all non-essential characters of code in order to reduce the file size and speed up the download. Minimizing the file removes all comments and insignificant whitespace, line breaks, tabs. Here everything is simple. The smaller the file size, the less time browser will take to download it.
5. Use subdomains for parallel download
As I mentioned above, according to the HTTP / 1.1 specification for browsers there are restrictions on the number of simultaneous downloads site components, allowing maximum of 2 components with a single host. So if your site has a lot of graphics, it is better to make a separate sub-domain. The more you create sub-domains, the more files browser can simultaneously load and load the entire page faster. You can only change the picture to a new address. Very simple, but effective way.
6. Use the browser cache
8. Optimize your images
It is important to determine the appropriate format for your images. Choosing the wrong aspect ratio, can significantly increase the file size.
GIF – ideal for images with few colors, such as a logo.
JPEG – perfect for detailed images with lots of colors, such as photographs.
PNG – your choice when you need high-quality images with transparency.
Here are a few online services for optimizing images:
9. Do not scale the image
Do not change the image size by using the width and height attributes of the tag, or using CSS. This also puts a negative impact on page load speed. If you have a 500x500px image size and you want the image to the size of 100x100px, it is best to change the size of the original image with the help of graphic editor Photoshop, or any other. The lighter the image, the less time it will take to download.
10. Use compression Gzip-
As studies have shown, gzip-compressed text “on the fly” file the time to transfer the file browser in 95-98% of cases reduces. If you keep archived copies of files on the server (in-memory proxy-server or just on the disc), the compound in the general case it make it possible to load the page 3-4 times faster.
Since version of HTTP / 1.1, web clients indicate what compression types they support, setting Accept-Encoding header in the HTTP-request.
Accept-Encoding: gzip, deflate
If the web server sees this header in the request, it can apply compression answer one of the methods listed by the client. When issuing a response from the client, Content-Encoding header notifies the server about how the method of compressed response.
The transmitted data is thus less than the original about 5 times, and this speeds up their delivery. However, there is one drawback: increased load on the web server. But the server issues can always be solved. So we will not pay attention to it.
In order to enable GZIP-compression on your site, you must register the following lines of code to your .htaccess file.
But again, this code does not work on all servers, so it is better to contact support of your hosting provider and clarify the issue.
Well, here’s all I wanted to tell. In this article, I have tried to list all of the basic ways to increase web page download speed optimization. In addition to optimizing the client, there is also a server optimization. But that’s the topic for another article.
If I missed something or you have something to add – write your opinion in the comments section of this post. Thank you for attention!