Enable File Compression

Part One Chapter 07

Document

When a user visits one of your mobile web pages, http requests for your page are sent to your web server. Your web server will return http responses (i.e. the data of your page) to the requesting web browser. Each response takes up certain amount of file size.

When the file size of the http responses (i.e. data file size of your web page) is reduced, then the transfer time decreases as fewer data packets must be transferred from your web server and the user's web browser. In this way, the user can load your mobile web page through the web browser faster.

Reduce Data File Size

To reduce data file size, you should enable file compression.

  • Gzip compression is a typical file compression method and can compress your HTML and CSS files into smaller sizes.
  • The compressed file size may become significantly smaller. In some cases, the compressed file size may be 50% smaller than the original size.

How Compression Works

Assume your HTML and CSS files have been compressed. For file compression to work between web browsers and your web server:

  • You will have to enable Gzip compression through your web server configurations. The configurations are web server specific, assuming your mobile website may be using Apache or Nginx as web server.

When the web browser (that supports Gzip compression) requests a page from your mobile website, your web server will return the compressed file.

Enable Gzip Compression for Apache

Apache has two options for enabling Gzip compression:

  • mod_deflate: It is standard and easier to set up.
  • mod_gzip: It is more powerful which allows pre-compression of content, but it is more complicated to set up.

To enable Gzip compression on Apache, you should add the code below to the .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 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 Compression for Nginx

To enable Gzip compression on Nginx, add the code below to the config file. 

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Gordon Choi's Mobile Website Book has been available since November 2016.






Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book