How to speed up site loading: 7 optimization tips for beginners

King Servers support service is often contacted by site owners who do not understand why their resources are loading slowly. As a result, we decided to create a simple instruction for optimizing download speed for beginners - we present it to your attention.

Note : at the end of the article there is a list of resources for further study - we will be grateful if you can supplement it in the comments.
')

Introduction: how sites are loaded

The article titled “ What happens when a user types in the address of Google.com ” describes in detail all the processes associated with visiting the site. In short, in the meantime, a site visitor enters his URL into the address bar and gets an answer, in general, it goes through several stages:

First, the browser will make a DNS request for the site name.
Next, a TCP connection is initiated to the server on which this site is located.
Following is established connection http or https.
Then the required page is requested and its HTML code is loaded.
Starting HTML parsing.
After that, the browser begins to load external resources associated with the page (styles, images, scripts, and so on).
As a result, the final version of the page with all the content is rendered.
Then the JS code is executed - the scripts may require processing additional network requests, modify the page or its template, so a new rendering circle is possible.

Some of these steps can be optimized on the client side, the other part - on the server side. This is what we are going to talk about today.

Step One: Understand What Hinders

Former Facebook engineer and founder of Pave startup Justin Mitchell in a thread on Quora described the beginning of work on optimizing the site load:

Before you begin to repair, you need to know what is broken. If your server generates a page for 5 seconds, using the CDN does not help, if you download 10 megabytes of images for each page view, adding memcache to the backend architecture is also pointless.

There are various tools for analyzing site performance. For example, you can use the free service from Google , which analyzes the performance of the site and gives recommendations for its improvement:

There are several important metrics of site performance. One of them is the time to the first byte (TTFB - time to first byte), which shows how quickly the browser begins to receive data from the server after sending the request. It is also important to measure the beginning of the page rendering and the load time.

At the same time, it is important to analyze not only the performance indicators themselves, but to consider them in relation to the attendance of a particular page. If the page is not popular with users, then no matter how fast it loads.

Here are the steps for server optimization to speed up site loading most often used.

Expansion of server resources

If the server itself is slowly running, then there is no point in wasting time and effort on client optimization. In the case of small projects with increasing load, the site often begins to slow down precisely because it no longer has enough hosting resources - for example, CPU and disks.

As a first step, it is logical to consider the purchase of additional resources. However, this method works until a certain point, and then the cost of hosting services can grow so much that it will be easier and more profitable to use other ways to optimize the load. That's what they can be.

Caching

One of the site acceleration tools is server caching. As mentioned above, the process from following a link to a site to displaying a page in a browser can include many steps:

Image: CrazyEgg

Some elements can be cached and not downloaded every time you visit the site. This allows you to significantly reduce load times:

Image: CrazyEgg

With all the advantages - this is not the only worthwhile optimization method. Firstly, not everything can be cached; secondly, you need to think about how to reset the cache in the future; thirdly, this method helps speed up the site for those users who already have it, and does not help new visitors.

Image compression

Everyone always talks about the need to compress images, but beginner site owners often do not have all the subtleties and can use to scale large CSS images. As a result, the user's browser still loads the image in full size.

There are several tools for compressing images, including TinyPNG, Kraken.io and JPEGmini. In addition, it makes sense to try to enable the conversion of images in WebP format. It was developed by Google, and according to the company, such images are 26% lighter than PNG files and 25-34% smaller than JPEG images.

To activate the conversion, you can add the following code to the .htaccess file:

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp

Unfortunately, at the moment the WebP format is not supported by all browsers - so far only Chrome and Opera are among them.

CDN

Another “infrastructural” method for reducing delays is the use of content delivery networks (CDN). Such networks consist of servers in different parts of the world. When the site is connected to the network, its servers create copies of the web resource files, and then the user is given data from the server closest to him - as a result, the download speed increases.

Using Gzip

Gzip is a simple method for compressing site files to save feed resources and speed up download. With Gzip, files are compressed into an archive, which the browser can load faster, and then unpack and display the content.

Turning on using Gzip is quite simple - you just need to add a few lines of code to the .htaccess file. For example, when using the Apache web server, the mod_gzip module is available to webmasters, in order to activate Gzip, in this case you need to enter this code into .htaccess (for more details, see the tutorial on SitePoint )

 mod_gzip_on Yes mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_include mime ^application/json$ mod_gzip_item_include mime ^text/.*$ mod_gzip_item_include file .html$ mod_gzip_item_include file .php$ mod_gzip_item_include file .js$ mod_gzip_item_include file .css$ mod_gzip_item_include file .txt$ mod_gzip_item_include file .xml$ mod_gzip_item_include file .json$

Site Code Optimization

There are a number of best practices for creating site code that allow you to optimize its work without the slightest cost. First of all, experts advise to place the CSS code at the beginning of the page, and place the scripts at its end. This is useful, because in this way, the browser has the opportunity to start drawing the page even before running all the scripts - they can not be executed at all quickly.

Inline CSS and JS code should also be avoided. In this case, browsers will cache these external resources, which will save load time. Also, JS and CSS should be minified - you can do this with tools like JSMIN, YUI Compressor and Packer.

Using Nginx + Apache bundle

To increase the speed of loading pages, you can use a bunch of Apache and Nginx. These are the two most common web servers in the world, the popularity due to the power of Apache and the speed of Nginx. In addition to the advantages, each tool has its drawbacks: for example, Apache has server memory limitations, while Nginx, effective for static files, needs the help of php-fhm or similar modules for loading dynamic content.

Nevertheless, it is possible and even necessary to combine two web servers for greater efficiency, using Nginx as a static frontend and Apache as a backend. Such a decision will positively affect the speed of loading pages on the site.

Conclusion: useful resources and articles on the topic of optimizing the work sites

Below we have collected a number of useful articles in Russian and English:

Source: https://habr.com/ru/post/346956/

All Articles