One place for hosting & domains

      gzip

      Speed Up Your WordPress Website with Gzip Compression


      Keeping your website running at top speed is essential. A speedy website can provide a huge boost to your site’s user experience, search engine visibility, and improve your professionalism and reliability.

       

      Gzip compression is one popular method to speed up your site. While the term may sound technical, the basic concept isn’t too complicated. What’s more, enabling Gzip compression on your WordPress site is surprisingly easy. Let’s find out more!

      An Introduction to Gzip Compression

      compressing the CSS stylesheet with Gzip

      As your site expands, many of its files grow in size as well. This is a natural result of adding more content, plugins, themes, and custom code to your site. All of that new data has to be stored somewhere.

      The downside of larger files is that they often take more time to load when your pages are accessed. This means your visitors will end up waiting longer to view your content — which is never a good thing. To deal with this problem, you need to find a way to make your site’s files smaller without losing any important information.

      This is exactly what Gzip compression does. It reduces the size of your files by ‘compressing’ them, removing unnecessary characters, and reorganizing data more efficiently.

      If you’ve ever ‘zipped’ a folder to make it smaller, this is a similar concept. Gzip compression can reduce the overall size of your pages by up to 70%, and nothing crucial is lost in the process.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      How to Enable Gzip Compression on Your WordPress Site (2 Methods)

      There are a lot of ways to speed up your WordPress site. For example, choosing an optimized hosting plan is key. However, Gzip compression can improve your page speeds even further, so it’s worth implementing.

      Below, we’ll show you two ways to get started with Gzip compression. Keep in mind that the first thing you’ll want to do is make sure you have a recent backup of your site in place as a safety precaution. Then you can read through both methods and choose the one you prefer!

      Method 1: Use a Plugin

      You may struggle to find a quality plugin exclusively designed to implement Gzip compression. Fortunately, you don’t need one. Many speed optimization plugins include an option for Gzip compression as a part of their feature sets.

      For a perfect example, check out WP Super Cache:

      WP Super Cache WordPress plugin

      This plugin is primarily a caching solution, which is another smart way to speed up your WordPress site. However, it also enables you to compress your files.

      After installing and activating the plugin, you’ll need to navigate to Settings > WP Super Cache and switch over to the Advanced tab:

      enabling Gzip compression in the WP Super Cache WordPress plugin

      Find the option labeled Compress pages so they’re served more quickly to visitors, and check the box next to it. Then click on the Update Status button to save your changes.

      That’s all you need to do — the plugin will now implement Gzip compression automatically!

      2. Modify Your .htaccess File

      While the above technique is the simplest way of enabling Gzip compression on your WordPress site, some users will be more interested in an alternative method. For instance, if you’re trying to limit the number of plugins you install on your site, you might prefer to implement Gzip compression manually.

      To do this, you’ll need to use the Secure File Transfer Protocol (SFTP). It enables you to directly access (and make changes to) your site’s files.

      If you’ve never used SFTP before, you’ll first want to install a suitable client, such as FileZilla (and brush up on your SFTP skills). Then you’ll need to establish a connection to your site using your hosting credentials.

      Once you have FileZilla set up, it should look something like this:

      editing files in an FTP client

      In the top right quadrant, find the folder named after your website’s domain and select it. Then, in the bottom right quadrant, look for the file called .htaccess. This is one of your site’s core files, so you should always be very careful when making changes to it:

      enabling Gzip compression by editing CSS stylesheet in WordPress

      Right-click on the .htaccess file and select Download to save it to your computer. Then open the file in any text editor (such as Notepad), and paste in the following code:

      <IfModule mod_deflate.c>
      
      # Compress HTML, CSS, JavaScript, Text, XML and fonts
      AddOutputFilterByType DEFLATE application/javascript
      AddOutputFilterByType DEFLATE application/rss+xml
      AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
      AddOutputFilterByType DEFLATE application/x-font
      AddOutputFilterByType DEFLATE application/x-font-opentype
      AddOutputFilterByType DEFLATE application/x-font-otf
      AddOutputFilterByType DEFLATE application/x-font-truetype
      AddOutputFilterByType DEFLATE application/x-font-ttf
      AddOutputFilterByType DEFLATE application/x-javascript
      AddOutputFilterByType DEFLATE application/xhtml+xml
      AddOutputFilterByType DEFLATE application/xml
      AddOutputFilterByType DEFLATE font/opentype
      AddOutputFilterByType DEFLATE font/otf
      AddOutputFilterByType DEFLATE font/ttf
      AddOutputFilterByType DEFLATE image/svg+xml
      AddOutputFilterByType DEFLATE image/x-icon
      AddOutputFilterByType DEFLATE text/css
      AddOutputFilterByType DEFLATE text/html
      AddOutputFilterByType DEFLATE text/javascript
      AddOutputFilterByType DEFLATE text/plain
      AddOutputFilterByType DEFLATE text/xml
      
      # Remove browser bugs (only needed for really old browsers)
      BrowserMatch ^Mozilla/4 gzip-only-text/html
      BrowserMatch ^Mozilla/4\.0[678] no-gzip
      BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
      Header append Vary User-Agent
      
      </IfModule>

      Don’t forget to save your changes to the file. After that, you can re-upload it to your site by copying and pasting it back into your website’s root folder (or simply dragging it there from your computer). Now you’ve enabled Gzip compression on your WordPress website manually!

      Note that this method is for websites with Apache servers. If your site runs on NGINX, we recommend checking out this tutorial on enabling Gzip compression with NGINX.

      Speed Up Your WordPress Site with Gzip Compression

      There are a lot of ways to make sure your WordPress site runs fast and efficiently. For example, you’ll want to choose an optimized hosting plan with a reputation for speed. After that, you can make plenty of smaller tweaks to maximize your site’s performance, such as using Gzip compression to reduce file sizes.

      Do More, Faster, with DreamPress

      DreamPress’ automatic updates, caching, and strong security defenses take WordPress management off your hands so you can focus on your website.

      shared hosting



      Source link

      How To Improve Website Performance Using gzip and Nginx on Ubuntu 20.04


      The author selected the COVID-19 Relief Fund to receive a donation as part of the Write for DOnations program.

      Introduction

      A website’s performance depends partially on the size of all the files that a user’s browser must download. Reducing the size of those transmitted files can make your website faster. It can also make your website cheaper for those who pay for their bandwidth usage on metered connections.

      gzip is a popular data compression program. You can configure Nginx to use gzip to compress the files it serves on the fly. Those files are then decompressed by the browsers that support it upon retrieval with no loss whatsoever, but with the benefit of a smaller amount of data to transfer between the web server and browser. The good news is that compression support is ubiquitous among all major browsers, and there is no reason not to use it.

      Because of the way compression works in general and how gzip works, certain files compress better than others. For example, text files compress very well, often ending up over two times smaller. On the other hand, images such as JPEG or PNG files are already compressed by their nature, and second compression using gzip yields little or no results. Compressing files use up server resources, so it is best to compress only files that will benefit from the size reduction.

      In this tutorial, you will configure Nginx to use gzip compression. This will reduce the size of content sent to your website’s visitors and improve performance.

      Prerequisites

      To follow this tutorial, you will need:

      Step 1 — Creating Test Files

      In this step, we will create several test files in the default Nginx directory. We’ll use these files later to check Nginx’s default behavior for gzip’s compression and test that the configuration changes have the intended effect.

      To infer what kind of file is served over the network, Nginx does not analyze the file contents; that would be prohibitively slow. Instead, it looks up the file extension to determine the file’s MIME type, which denotes its purpose.

      Because of this behavior, the content of our test files is irrelevant. By naming the files appropriately, we can trick Nginx into thinking that, for example, one entirely empty file is an image and another is a stylesheet.

      Create a file named test.html in the default Nginx directory using truncate. This extension denotes that it’s an HTML page:

      • sudo truncate -s 1k /var/www/html/test.html

      Let’s create a few more test files in the same manner: one jpg image file, one css stylesheet, and one js JavaScript file:

      • sudo truncate -s 1k /var/www/html/test.jpg
      • sudo truncate -s 1k /var/www/html/test.css
      • sudo truncate -s 1k /var/www/html/test.js

      The next step is to check how Nginx behaves with respect to compressing requested files on a fresh installation with the files we have just created.

      Step 2 — Checking the Default Behavior

      Let’s check if the HTML file named test.html is served with compression. The command requests a file from our Nginx server and specifies that it is fine to serve gzip compressed content by using an HTTP header (Accept-Encoding: gzip):

      • curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

      In response, you should see several HTTP response headers:

      Output

      HTTP/1.1 200 OK Server: nginx/1.18.0 (Ubuntu) Date: Tue, 09 Feb 2021 19:04:25 GMT Content-Type: text/html Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT Connection: keep-alive ETag: W/"6022dc8d-400" Content-Encoding: gzip

      In the last line, you can see the Content-Encoding: gzip header. This tells us that gzip compression was used to send this file. That’s because Nginx has gzip compression enabled automatically even on the fresh Ubuntu 20.04 installation.

      However, by default, Nginx compresses only HTML files. Every other file will be served uncompressed, which is less than optimal. To verify that, you can request our test image named test.jpg in the same way:

      • curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

      The result should be slightly different than before:

      Output

      HTTP/1.1 200 OK Server: nginx/1.18.0 (Ubuntu) Date: Tue, 09 Feb 2021 19:05:49 GMT Content-Type: image/jpeg Content-Length: 1024 Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT Connection: keep-alive ETag: "6022dc91-400" Accept-Ranges: bytes

      There is no Content-Encoding: gzip header in the output, which means the file was served without any compression.

      You can repeat the test with the test CSS stylesheet:

      • curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

      Once again, there is no mention of compression in the output:

      Output

      HTTP/1.1 200 OK Server: nginx/1.18.0 (Ubuntu) Date: Tue, 09 Feb 2021 19:06:04 GMT Content-Type: text/css Content-Length: 1024 Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT Connection: keep-alive ETag: "6022dc91-400" Accept-Ranges: bytes

      In the next step, we’ll tell Nginx to compress all sorts of files that will benefit from using gzip.

      Step 3 — Configuring Nginx’s gzip Settings

      To change the Nginx gzip configuration, open the main Nginx configuration file in nano or your favorite text editor:

      • sudo nano /etc/nginx/nginx.conf

      Find the gzip settings section, which looks like this:

      /etc/nginx/nginx.conf

      . . .
      ##
      # `gzip` Settings
      #
      #
      gzip on;
      gzip_disable "msie6";
      
      # gzip_vary on;
      # gzip_proxied any;
      # gzip_comp_level 6;
      # gzip_buffers 16 8k;
      # gzip_http_version 1.1;
      # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
      . . .
      

      You can see that gzip compression is indeed enabled by the gzip on directive, but several additional settings are commented out with # sign and have no effect. We’ll make several changes to this section:

      • Enable the additional settings by uncommenting all of the commented lines (i.e., by deleting the # at the beginning of the line)
      • Add the gzip_min_length 256; directive, which tells Nginx not to compress files smaller than 256 bytes. Very small files barely benefit from compression.
      • Append the gzip_types directive with additional file types denoting web fonts, icons, XML feeds, JSON structured data, and SVG images.

      After these changes have been applied, the settings section should look like this:

      /etc/nginx/nginx.conf

      . . .
      ##
      # `gzip` Settings
      #
      #
      gzip on;
      gzip_disable "msie6";
      
      gzip_vary on;
      gzip_proxied any;
      gzip_comp_level 6;
      gzip_buffers 16 8k;
      gzip_http_version 1.1;
      gzip_min_length 256;
      gzip_types
        application/atom+xml
        application/geo+json
        application/javascript
        application/x-javascript
        application/json
        application/ld+json
        application/manifest+json
        application/rdf+xml
        application/rss+xml
        application/xhtml+xml
        application/xml
        font/eot
        font/otf
        font/ttf
        image/svg+xml
        text/css
        text/javascript
        text/plain
        text/xml;
      . . .
      

      Save and close the file to exit.

      To enable the new configuration, restart Nginx:

      • sudo systemctl restart nginx

      Next, let’s make sure our new configuration works.

      Step 4 — Verifying the New Configuration

      Execute the same request as before for the test HTML file:

      • curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

      The response will stay the same since compression has already been enabled for that filetype:

      Output

      HTTP/1.1 200 OK Server: nginx/1.18.0 (Ubuntu) Date: Tue, 09 Feb 2021 19:04:25 GMT Content-Type: text/html Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT Connection: keep-alive ETag: W/"6022dc8d-400" Content-Encoding: gzip

      However, if we request the previously uncompressed CSS stylesheet, the response will be different:

      • curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

      Now gzip is compressing the file:

      Output

      HTTP/1.1 200 OK Server: nginx/1.18.0 (Ubuntu) Date: Tue, 09 Feb 2021 19:21:54 GMT Content-Type: text/css Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT Connection: keep-alive Vary: Accept-Encoding ETag: W/"6022dc91-400" Content-Encoding: gzip

      From all test files created in step 1, only the test.jpg image file should stay uncompressed. We can test this the same way:

      • curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

      There is no gzip compression:

      Output

      HTTP/1.1 200 OK Server: nginx/1.18.0 (Ubuntu) Date: Tue, 09 Feb 2021 19:25:40 GMT Content-Type: image/jpeg Content-Length: 1024 Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT Connection: keep-alive ETag: "6022dc91-400" Accept-Ranges: bytes

      Here the Content-Encoding: gzip header is not present in the output as expected.

      If that is the case, you have configured gzip compression in Nginx successfully.

      Conclusion

      Changing Nginx configuration to utilize gzip compression is easy, but the benefits can be immense. Not only will visitors with limited bandwidth receive the site faster, but all other users will also see noticeable speed gains. Search engines will be happy about the site loading quicker too. Loading speed is now a crucial metric in how the search engines rank websites, and using gzip is one big step to improve it.



      Source link