Improve website speed by enabling gzip compression

There are many simple things which improve the speed of your website. One of those things is gzip which make a website load faster. But gzip is not enabled by default on web host server. You have to do this yourself either from the control panel of web-hosting account or using a .htaccess file. It is very important to enable gzip because this one thing can improve the speed of your website as much as no other thing can do. So I thought I should share this information that how we can enable gzip?

What is gzip compression?

When a user visits your website the web browser makes requests to deliver files which are linked on that page.

The bigger these files are the longer it’s going to take for them to get to your browser and appear on the screen.

Gzip compresses your web pages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.

In terms of cost versus benefit, gzip compression should be near the top of your page speed optimizations if you don’t have it setup already.

How does it work?

Gzip is actually a fairly simple idea that is extremely powerful when put to good use. Gzip locates similar strings within a text file and replaces those strings temporarily to make the overall file size smaller.

The reason gzip works so well in a web environment is that CSS and HTML files use a lot of repeated text and have loads of whitespace. Since gzip compresses common strings, this can reduce the size of pages and style sheets by up to 70%!

Gzip has to be enabled on your web server which is relatively straightforward.

When a browser visits a web server it checks to see if the server has gzip enabled and requests the webpage. If it’s enabled it receives the gzip file which is significantly smaller and if it isn’t, it still receives the page, only the uncompressed version which is much larger.

How to enable

There are different methods of setting up gzip compression depending on whether or not you’ve got an IIS or Apache server (or something else entirely).


If your server is IIS, follow these instructions in the Microsoft TechNet document to enable compression.

For Apache

You will need to add the following lines 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/
  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



Mobile-friendly website is strongly required for good SEO & Great UX

Let’s first quickly see how a mobile-friendly website is different. If you open a mobile-friendly website on your smartphone, you don’t need to zoom or pinch in order to read the text. On the other hand, if you open a website on your smartphone which is not mobile-friendly, you need to zoom, pinch or scroll horizontally to read the content. You feel a disappointing experience while viewing a website which is not mobile-friendly. Generally, people don’t prefer to stay long on a website which is not mobile-friendly.

mobile unfriendly and mobile friendly website difference


Why make a website mobile friendly?

In the USA, 94% of people with smartphones search for local information on their phones. They are more likely to abandon a website if it’s not mobile-friendly.

It is worth mentioning that as of April 21, 2015, Google is officially considering mobile-friendliness as a ranking factor in their search engine ranking algorithm. It means websites which are mobile-friendly tends to rank higher in google’s search results.

So it makes sense that you should make your website mobile-friendly if you want mobile visitors to stay on your website and get your website rank higher in google’s search results.


Is my website mobile friendly?

You can use Google’s mobile-friendly Website Testing Tool to test mobile friendliness of your website. You need to enter URL of your website and click analyze button. This tool analyzes your website and clearly report the mobile friendliness of your website.


How to make your website mobile friendly?

Basically, there are three main techniques to make your website mobile friendly:

Configuration Does my URL stay the same? Does my HTML stay the same?
Responsive Web Design Yes Yes
Dynamic Serving Yes No
Separate URLs No No
  1. Responsive Web Design: It is the magic of CSS media query that the same HTML code is rendered differently on different screen size. The web server serves the same HTML code on the same URL regardless of the users’ device (desktop, tablet, mobile), but it’s CSS code decide how it’s going to be rendered. If your website is a Content Management System (CMS), such as WordPress, Joomla or Drupal, you can either replace its theme or template with a responsive theme or template or hire a developer to convert existing theme to responsive.
  2. Dynamic Serving: Uses the same URL regardless of device, but generates a different version of HTML for different device types based on what the server knows about the user’s browser.
  3. Separate URLs: Serves different code to each device, and on separate URLs. The server detects the users’ device. If the device is detected as a mobile device, it is directed to the mobile site. You have to maintain two versions – mobile version and desktop version, of your website. If your website looks complex on a desktop and you think it should have a more simple look on mobile devices, this technique is better for your website than responsive design.


How much does it cost to build a mobile-friendly website?

The cost to build a mobile friendly website varies and depends on many things. For example, here are some of the possibilities:

  • It can be free if you select a responsive theme or template for your website. Almost all the themes and templates are created responsive nowadays.
  • It can be free if you have technical skills to make a website.
  • It will cost you if you hire a developer and again the cost depends on your website and developer. For some very old sites, it is better to redesign it from scratch rather than converting it mobile friendly. For other sites, the developer can simply convert to mobile friendly.