Impact of gzip compression on Magento 2

Have you ever tried sharing a huge number of files over the internet? If you had to upload and distribute each file individually, your server would definitely reject this action due to its huge size. So, you have to compress these files or gzip them, to transfer large files over the internet.

Gzip is a method of file compression that allows your web server to provide your website users with smaller file sizes which load faster. Usually, compression of your HTML and CSS files with gzip saves between fifty and seventy percent of the file size. This implies that loading the pages takes less time, and less bandwidth is used overall.

One of the most utilized e-commerce platforms worldwide is the Magento platform, and we can not ignore its performance optimization. Success at Magento is of utmost importance. Loading speed has a direct and observable effect on your website’s conversion rate, so getting an optimized installation of Magento is vital to the success of your Magento store and probably even your company in general.

How does Gzip compression work on your website?

The server is called to provide the requested files whenever a visitor visits the site. If these files are larger in size, higher load time will result. The bigger the file, the longer it takes the visitor to show the result. With the compression, the files are compressed before submitting them to the browser, resulting in reducing the load time.

The key reason it is important is that it reduces the time it takes for a website to download page files and style sheets, which eventually reduces your website’s load time.

Benefits of Gzip compression

  • It reduces the time it takes for a website to download page files
  • Reduces file size up to 70%
  • It increases page speed
  • Enhances the server-side optimization
  • It allows quick file transfer
  • In enhancing the website performance
  • It helps in improving SEO

How to enable gzip compression in Magento 2

There are many ways to enable gzip compression in Magento 2, some of them we are using here : –

Enable gzip on Apache

One way to enable Gzip compression is to edit your .htaccess file. Apache is used by most shared hosts, where you can simply add the code below to your .htaccess file.

<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>

Enable gzip on Nginx

To enable compression on Nginx, we can use the following code to watch your web server hit new speeds for page serving standards. Open the file/etc/nginx/nginx.conf.

Now add the following content : –

gzip on;
gzip_vary on;
gzip_min_length 10240;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
gzip_disable “MSIE [1-6]\.”;

For further help or query, please contact us or raise a ticket.

. . .

Comment

Add Your Comment

Be the first to comment.

css.php