Increase website loading speed - Profit Hunter

Unfortunately, or fortunately, search engines today pay attention to how fast the site works. This affects how the resource will be ranked in the search. In addition, the speed of loading determines the behavior of visitors, which robots also take into account.

Here are some tips on how to make your site faster.

Inclusion of CSS at the very beginning

More precisely, in the Header page. So its elements will be loaded sequentially, from the title to the footer. What will it give? Of course, the convenience of working with the site for the user and increasing his loyalty. When CSS is connected at the very bottom, browsers refuse to gradually load elements. Therefore, the page should refer to the CSS file already in the head tag.

Increase website loading speed - Profit Hunter

JS - at the end of the code

Thanks to the connection of JS files at the very end of the download, the page with the main content that the user needs will be loaded first. The main rule is not to make the visitor wait for what he came for. And numerous beautiful elements can be loaded and then. By the way, while loading the script, other components of the page are not loaded, even from other hosts.

Using subdomains

Do you have a lot of graphic elements on your sites? Then you should consider transferring them to one or more subdomains, which are considered to be different servers for the browser. However, do not use dozens of subdomains: it only hurts the site. In all you need to know when to stop.

Number of HTTP requests

Most of the time various scripts, CSS files, photos and flash are loaded. It is desirable that browsers load a maximum of 2 page elements from the 1st host. As a result, it turns out that, the fewer of them, the fewer requests to the server.

However, the appearance of the site does not need to be changed because of this. There are other ways.

  • Inline graphics. By embedding it in CSS, and not in the page itself, you will get a reduced number of requests to the server, and the size of the pages will not increase.
  • Applying CSS Sprites. Their essence lies in the fact that instead of a few small images loaded one, but large. Using CSS code, it is divided into smaller images. For example, you can process several buttons in a row, combining them into one image. The less image downloads, the less HTTP requests.
  • Several files in one. If the template uses more than one css or js file, it is advisable to make one file of them.

Clean all JS and CSS files from unnecessary code

Remove commented lines, extra spaces, tabs. These irrelevant little things add weight to your files and, therefore, increase their volume. Special services are used to compress the code, so there is no need to edit everything manually.

Do not reduce the picture with the code

If the original size of the photo does not suit you, it is better to change it initially than to adjust with the help of a CSS code or img tag attributes.

Use CDN for frameworks

When frameworks are involved in a resource (such as jQuery), it is advisable to use a CDN (Content Delivery Network) for them - a cluster of servers that are geographically separated to ensure maximum speed of providing data to the client.

The server for content transmission is selected based on various criteria, for example, response time. As a CDN, you can use the Google API and the hosting of JavaScript libraries from Yandex.

Caching data in browsers

If you are actively using the JS connection and CSS scripts, then you vitally need to connect the cache. When you first access the site, the user's browser loads all codes from files, as well as graphic and flash components. If the Expires HTTP header is configured, then when the visitor returns, his browser will store all this data, and the pages will load faster.

Optimized images

Select the correct format for images, otherwise their size may increase. So, in the Gif format it is better to save pictures with several colors, and in JPEG - complex multicolored graphics (for example, photos). PNG is used when good image quality and a transparent background are needed.

To compress a picture in Photoshop, press "Alt + Shift + CTRL + S" at the same time (just do not break your fingers), and choose the optimal ratio size / quality.

Increase website loading speed - Profit Hunter

Do you like articles? Subscribe to the newsletter!

Search

Related Articles