Tóm Tắt
Tutorial Overview.
This tutorial will explain what GZIP Compression is and how to enable it on your WordPress website. It will also explain how to check if your website is already using GZIP Compression and two different methods to enable it.
Quickies.
What is GZIP Compression?
GZIP compression is a way to compress website files for quicker transfer time from the server to the browser. When someone visits your website, they send a request to the server that your website is on to see your site. With GZIP compression enabled, your server will send back zipped files which will make your website load faster.
Is GZIP Compression Is Already Enabled on Your Website?
- Go here: Gift of Speed.
- Enter your website address into the box.
- Hit the search button.
This tool will tell you if you have GZIP compression enabled, the number of bytes you are saving with compression, and a number of other details about your website.
How to Enable GZIP Compression in WordPress with a Plugin.
There are a number of WordPress plugins that will help you easily enable GZIP compression. Many of the WordPress caching plugins have the ability to do it including WP Rocket.
How to Enable GZIP Compression in WordPress Programmatically.
Unless you are already using a plugin that offers GZIP compression I would recommend using this method. I use this method because I like to keep my plugins to a minimum.
- Make an FTP connection to your website. Detailed instructions here: How to Make an FTP Connection with FileZilla.
- In the root of your WordPress website locate the .htaccess file.
- Select the .htaccess file to edit.
- Enter this code below the current contents of the .htaccess file:
Note: The .htaccess file is a hidden file. If you do not see this file you may need to adjust the setting in your FTP client. In FileZilla go to Server in the top bar and select “Force showing hidden files”.
<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>
- Be sure to save your changes.
- Now you should be able to verify that GZIP compression is enabled and working: Check my GZIP Compression