- Part One Chapter 07 – Enable File Compression
Part One Chapter 07
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;
- Previous: Implement Web Browser Caching
- Next: Minify CSS and JavaScript Files
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 Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book