[tta_listen_btn]
October 14 2016
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.
3. Place the end of the page JavaScript
Placing JavaScript-file down the page will allow the browser to load the page with the content in the first place, and only then start downloading the JavaScript-file. If your site is up to date and contains all possible interactive “gadgets”, then those JavaScript-files can be weighty , may be a few hundred kilobytes, so forcing the user to wait to download all your JavaScript-files detrimental to the page load.
4. Minimize the CSS and JavaScript
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
Caching is becoming extremely important for modern Web sites that use JavaScript and CSS extensive 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 also load all the graphics and flash, but before the HTTP-header expires, you make components cached pages.
Thus, when a visitor goes to your site again, or go to the next page of your site, the browser cache it will already find some required files and the browser would not need to download them again. Hence, the boost in site speed.
7. Use CDN to load popular JavaScript libraries
If your site uses a popular JavaScript framework such as the jQuery, then it’s better to use a CDN to connect it.
CDN (Content Delivery Network) – a set of web servers, geographically dispersed in order to achieve a maximum speed of content returns to the client. The server that will send content directly to the user is selected on the basis of certain indicators.
For example, select the server with the least number of intermediate hops to it or with the smallest response time. Besides the browser caches JavaScript-files, and if you visit a site that uses this method, the library is already in the cache of your browser, and it will not upload it again.
One of these CDN is Google Libraries. This is CDN for the popular open-source JavaScript libraries. Loading popular JavaScript framework with Google Libraries can speed up page load times and reduce traffic on your server.
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:
- www.punypng.com
- Smush.it
- www.jpegmini.com
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.
Content-Encoding: gzip
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.
