Gzip compression js / css / html site acceleration - how to enable in .htaccess

print · Время на чтение: 9мин · - · Опубликовано · Обновлено

playListen to this article

Gzip compression js css html.Greetings, dear readers! Today we will talk about gzip js compression | css | htmlto speed up site loading. How to enable it with .htaccess file. I will also tell you why you need to enable file compression on the server side at all.

This topic is directly related to the technical optimization of the site. Allowing fairly simple manipulations, significantly speed up the loading of the site. A fast site is a significant success in search engine promotion.

The content of the article:

What is the purpose of enabling Gzip file compression in .htaccess?

How to enable Gzip compression of pages on the site.

As I have said in many of my articles! The site at the initial stage has a fairly large weight. And those. optimization is needed precisely to reduce the weight of our site. By all means, we need to reduce the amount of code, the weight of pages, images and other things. The general task is to give the user a light and fast loading version of the site.
Thus, we give away information quickly. The transition between pages and sections takes place in a fraction of a second. At the same time, visitors will quickly see all the loaded design elements and other interactive elements of interaction.

GZIP compression - provides uninterrupted archiving of transferred files. Thus, we get lossless compression of the quality of the source. All data comes to its original state after unpacking already in the user's browser. The implementation itself is due to several work algorithms. These include basic DEFLATE using LZ77 and Huffman.

Of course, this kind of compression (compression) is not an ideal solution. But the implementation of Gzip brings us to a balance between speed and compression ratio. This method is the most popular among other ways to speed up the site. Moreover, the implementation of a more global method on the server will take a lot of time and testing. And it may not give the desired result! Gzip compression in this regard is the most reliable way to speed up file downloads.

Gzip compression - for which files is it acceptable? What servers does it work on?

In fact gzip compression covers a large list of files. But it has a small downside! When a user visits a site, the server needs to compress a large amount of data on the fly. This leads to a certain load on the server. But it is not critical in most cases. All supported file formats after transfer are perfectly displayed in popular browsers.

The main ones include:

  • text/plaintext/html;
  • text/xml application/xml application/xhtml+xml application/xml-dtd;
  • application/rdf+xml application/rss+xml application/atom+xml image/svg+xml;
  • text/css text/javascript application/javascript application/x-javascript;
  • font/opentype application/font-otf application/x-font-otf;
  • font/truetype application/font-ttf application/x-font-ttf.

Gzip file compression is used on the main Apache and Nginx servers. With valid work modules and server capabilities.

For example: Nginx - used for static. It compresses and processes static files well. Compression happens thanks to the ngx_http_gzip_module and ngx_http_gzip_static_module modules. Uninterrupted on-the-fly compression is carried out with the replacement of the main extension with “.gz”.

Example of a standard configuration

gzip on; gzip_min_length 1000; gzip_types text/plain application/xml;

Apache is the most requested server. Of course, the compression on it will be more ambitious and customizable. Gzip compression on this server is done using the mod_deflate module. By providing compression on the fly before being sent to the user's browser.

Example of a standard configuration

# Enable GZIP - enable compression AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilter ByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript

Compression with a slow algorithm to reduce the load on the server:

RewriteEngine On AddEncoding gzip .gz RewriteCond %{HTTP:Accept-encoding} gzip RewriteCond %{REQUEST_FILENAME}.gz -f RewriteRule ^(.*)$ $1.gz [QSA,L]

PHP is a less popular option. But it also has the ability to organize compression using the zlib module. This method is not recommended as it is extremely slow.

Example of a standard configuration

$originalFile = __DIR__ . '/jquery-1.11.0.min.js'; $gzipFile = __DIR__ . '/jquery-1.11.0.min.js.gz'; 1TP30OriginalData = file_get_contents(1TP30OriginalFile); $gzipData = gzencode($originalData, 9); file_put_contents($gzipFile, $gzipData); var_dump(filesize($originalFile)); // int(96380) var_dump(filesize($gzipFile)); // int(33305)

Of course, the use of Apache + Nginx + PHP servers is also possible together. Thus, a certain load distribution between servers will be provided. But this is a very difficult task, which should not be done by ordinary users.

I configured my server myself, using all the main advantages of Apache/Nginx/PHP. Thus, Nginx handles the static, Apache handles the rest with PHP. The result is very positive. But a lot of time was spent on organizing this method.

How to enable Gzip compression in .htaccess file

In fact, it is not difficult to do this. Moreover, I have already talked about this file.

The basic rules remain the same:

  1. Be sure to save the original .htaccess file before editing. In case of error 500, there will be something to restore.
  2. There should be no gaps between lines.
  3. We write all comments after the sign #.
  4. Be sure to check the code for integrity after insertion.

Several examples of standard .htaccess rules configuration have already been mentioned above. But in my opinion this is not enough, so I will give my own example. This set of rules works on this site, as you can see there are no problems.

At the same time, compression occurs on the fly, the site loads quickly without brakes. All you have to do is paste this code into your .htaccess file. If you have your own server, then I think you know everything yourself.

For the main audience, instructions for use:

  1. We go to the server with any popular ftp client;
  2. Go to the root of the site (directory);
  3. The .htaccess file is located in the main directory of the site;
  4. We open it with a text editor, in general Sublime Text 3 is better;
  5. Next, at the very end of the file, paste the code that will be shown below.
  6. You are kindly requested to check the code, as the site has copy protection (there may be a link to the site at the end of the code).
# Enable GZIP AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/text AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE image/gif AddOutputFil terByType DEFLATE image/jpeg AddOutputFilterByType DEFLATE image/jpg AddOutputFilterByType DEFLATE image/png AddOutputFilterByType DEFLATE image/gif AddOutputFilterByType DEFLATE image/flv AddOutputFilterByType DEFLATE image/ico AddOutputFilterByType DEFLATE image/swf AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/ javascript AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE video/3gpp AddOutputFilterByType DEFLATE video/3gpp2 AddOutputFilterByType DEFLATE video/x-flv AddOutputFilterByType DEFLATE video/jpm AddOutputFilterByType DEFLATE video/jpeg AddOutputFilterByType DE FLATE video/x-m4v AddOutputFilterByType DEFLATE video/mp4 AddOutputFilterByType DEFLATE video/ogg AddOutputFilterByType DEFLATE video/webm AddOutputFilterByType DEFLATE video/quicktime AddOutputFilterByType DEFLATE audio/x-mpegurl AddOutputFilterByType DEFLATE audio/midi AddOutputFilterByType DEFLATE audio/mp3 AddOutputFilterByType DEFLATE audio/mp4 AddOutputFilterByType DEFLATE audio/ mpeg AddOutputFilterByType DEFLATE audio/webm AddOutputFilterByType DEFLATE audio/basic AddOutputFilterByType DEFLATE audio /x-wav AddOutputFilterByType DEFLATE audio/wav BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$

If you do not enclose required elements in parentheses, you will get an error. Your site will simply stop working and give you a 500 internal server error. The text “must be enclosed in brackets “<>”” should also be removed from the code. After that, the .htaccess file needs to be saved.

It's also a good idea to restart the server to apply the new rules exactly. After all these actions, your site will work much faster. Page loading speed will increase significantly.

Check website loading speed and Gzip compression

After we have enabled server side compression. You can check the success of the work done! You can do this with several popular online tools. Let's take a look at them:

PageSpeed Insights - the main and most popular online tool for checking the site. After the last changes in 2018 by Google. Provides an extensive list of data for a detailed analysis of the site.

Learn more about PageSpeed ​​Insights.

What can:

  1. Overall site speed rating;
  2. Specifies the content loading time;
  3. Overall speed index and time to interaction;
  4. Gives recommendations for optimization;
  5. Shows detailed performance information;
  6. Indicates whether or not Gzip compression is enabled;
  7. Indicates whether or not hashing is enabled;
  8. Provides a wealth of information for error correction.

PageSpeed will help you fix many website speed issues. Thanks to this tool, many errors of my site have been fixed.

Pingdom Tools is also one of the popular online website analysis tools. Gives enough detailed information on a variety of site evaluation criteria. It is easy to find what is slowing down the download.

what is pingdom tool?

What will give you:

  1. Assessment of the overall performance of the site;
  2. The number of requests to the site database;
  3. Page loading speed;
  4. Content size by content type;
  5. Server responses 200/301/302/404/503 and others;
  6. General queries by domains;
  7. Graphical representation of the situation, etc.;

Gives a lot of information on site speed. But does not give detailed instructions like Google.

GZIP compression plugins for WordPress

Strange as it may seem, but the owners of sites on the WordPress CMS do not need to bother much. The reason for this is the variety of plugins to enable compression on the site. All you need to do is install the plugin you like. Then activate and enable compression in the plugin settings. Then he will do all the work for you. I will describe a couple of the most popular.

PageSpeed Ninja is the best performance plugin for WordPress. You can make your websites fast on desktops and mobile devices by fixing problems found by Google PageSpeed Insights in one click. Allows you to quickly enable compression on the site.

Increase your Google PageSpeed ​​score in Wordpress.

WP Fastest Cache is also one of the most popular hashing plugins. It has a huge number of grouped settings, one of which includes compression.

WP Fastest Cache - Plugin for WordPress.

Comet Cache I myself use this plugin. Since in combination with other plugins, it gives an excellent result. Also one of his settings includes gzip compression.

Comet Cache creates a cache of every page.

In general, all the main caching plugins for Wordpress allow you to enable GZIP compression on the site. I recommend full-fledged multifunctional plugins for the least load.

In conclusion, I will say the following: be sure to turn on compression. This will have a very good effect on performance and raise the site in the search. I hope this article will help you with this.

Reading this article:

Thanks for reading: SEO HELPER | NICOLA.TOP

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 276

No votes so far! Be the first to rate this post.

Читайте также:

1 Response

  1. Илья says:

    I immediately copied and pasted the code, which caused an error 500. Now I understand what I need to read carefully. I see you also have copy protection. And thanks to the content is suitable and working.

Добавить комментарий

Your email address will not be published. Обязательные поля помечены *

19 + four =