Menu Close

Website optimization and general configuration Part 2: Compressing and caching your website output

compression

Compressing

In apache with PHP, there are 2 ways to compress your content: with Zlib via PHP or with mod_deflate via apache. The difference between those two is, that PHP’s Zlib output_compression will only work files passed through the PHP handler (i.e. .php files), while Apache’s mod_deflate can work on any files (eg static CSS or JS). So, apache mod-deflate is the better option.

In-depth, mod_deflate provides the DEFLATE output filter that allows you to compress the output from your server via gzip before being sent to the client over the network. The gzip encoding is the only one supported to ensure complete compatibility with old browser implementations i.e.

Apache mod_mime is another required module. This module is used to assign content metadata to the content selected for an HTTP response by mapping patterns in the URI or filenames to the metadata values. For example, the filename extensions of content files often define the content’s Internet media type, language, character set, and content-encoding. The directives are all used to map file extensions onto the metadata for that file. Respectively they set the character set, content-encoding, content-language, and media-type (content-type) of documents.

The MIME type is used to identify a type of data or file. Thus the software knows how to handle the data. On the internet, it serves the same purpose as file extensions do on Microsoft Windows. Moreover, with mime directives, you can specify how the file will be handled (i.e. delivered to the user) or define the encoding for the file (ex. you can set gzip to serve .gz files). Mime type is also helpful for caching your content into the client’s browser.

Complete list of mime types can be found here: https://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types

The downside of all of the above is, that those apache modules should be enabled from the server administrator or your hosting company.

Caching

Apache mod_expires is needed on the server to have proper caching rules. This module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. These HTTP headers are an instruction to the client about the document’s validity and persistence.

If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered “expired” and invalid, and a new copy must be obtained from the source. However, to control and modify HTTP request and response headers mod_headers needs to be enabled.

When a user comes to your website, it’s browser has to download all of the web page files to properly show the page. This includes all HTML, CSS, JavaScript, images, etc. A simple page may consist of a couple of files and be small in size. But others, may have a lot of files and be up to several megabytes large.

For example, the main page of this site is around 2.8MB in size. These large files take more time to load and if the user has a slow internet connection they may decide to cancel and leave your site thus lack of potential income for you. Moreover, each file that has to be downloaded is a separate request to the server.

Using the above-mentioned modules you can compress your content and force your website visitors to cache it in their browser thus serving your site faster when they come back or interact with features on it. Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.

So to summarize the above, use mod_mime to define the file types you are using, then with mod_deflate compress the files and then with mod_expires and mod_headers tell the visitor’s browser to cache the content and for how long to cache it before asking the files to be updated.

As you can see from the link for the mime types placed above, it’s a long list and I’m almost sure you don’t have all mime file types on your site. In the box below is a basic list to add to your site. Note, that if you add all codes shown below to your .vhost file, it should place them between tags.

Add mime types:

<IfModule mod_mime.c>
     AddType text/css .css
     AddType text/x-component .htc
     AddType application/x-javascript .js
     AddType application/javascript .js2
     AddType text/javascript .js3
     AddType text/x-js .js4
     AddType text/html .html .htm
     AddType text/richtext .rtf .rtx
     AddType text/plain .txt
     AddType text/xsd .xsd
     AddType text/xsl .xsl
     AddType text/xml .xml
     AddType video/asf .asf .asx .wax .wmv .wmx
     AddType video/avi .avi
     AddType image/bmp .bmp
     AddType application/java .class
     AddType video/divx .divx
     AddType application/msword .doc .docx
     AddType application/vnd.ms-fontobject .eot
     AddType application/x-msdownload .exe
     AddType image/gif .gif
     AddType application/x-gzip .gz .gzip
     AddType image/x-icon .ico
     AddType image/jpeg .jpg .jpeg .jpe
     AddType image/webp .webp
     AddType application/json .json
     AddType application/vnd.ms-access .mdb
     AddType audio/midi .mid .midi
     AddType video/quicktime .mov .qt
     AddType audio/mpeg .mp3 .m4a
     AddType video/mp4 .mp4 .m4v
     AddType video/mpeg .mpeg .mpg .mpe
     AddType video/webm .webm
     AddType application/vnd.ms-project .mpp
     AddType application/x-font-otf .otf
     AddType application/vnd.ms-opentype ._otf
     AddType application/vnd.oasis.opendocument.database .odb
     AddType application/vnd.oasis.opendocument.chart .odc
     AddType application/vnd.oasis.opendocument.formula .odf
     AddType application/vnd.oasis.opendocument.graphics .odg
     AddType application/vnd.oasis.opendocument.presentation .odp
     AddType application/vnd.oasis.opendocument.spreadsheet .ods
     AddType application/vnd.oasis.opendocument.text .odt
     AddType audio/ogg .ogg
     AddType application/pdf .pdf
     AddType image/png .png
     AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
     AddType audio/x-realaudio .ra .ram
     AddType image/svg+xml .svg .svgz
     AddType application/x-shockwave-flash .swf
     AddType application/x-tar .tar
     AddType image/tiff .tif .tiff
     AddType application/x-font-ttf .ttf .ttc
     AddType application/vnd.ms-opentype ._ttf
     AddType audio/wav .wav
     AddType audio/wma .wma
     AddType application/vnd.ms-write .wri
     AddType application/font-woff .woff
     AddType application/font-woff2 .woff2
     AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
     AddType application/zip .zip
 </IfModule> 

Set cache expiration:

<IfModule mod_expires.c>
     ExpiresActive On
     ExpiresByType text/css A31536000
     ExpiresByType text/x-component A31536000
     ExpiresByType application/x-javascript A31536000
     ExpiresByType application/javascript A31536000
     ExpiresByType text/javascript A31536000
     ExpiresByType text/x-js A31536000
     ExpiresByType text/html A3600
     ExpiresByType text/richtext A3600
     ExpiresByType text/plain A3600
     ExpiresByType text/xsd A3600
     ExpiresByType text/xsl A3600
     ExpiresByType text/xml A3600
     ExpiresByType video/asf A31536000
     ExpiresByType video/avi A31536000
     ExpiresByType image/bmp A31536000
     ExpiresByType application/java A31536000
     ExpiresByType video/divx A31536000
     ExpiresByType application/msword A31536000
     ExpiresByType application/vnd.ms-fontobject A31536000
     ExpiresByType application/x-msdownload A31536000
     ExpiresByType image/gif A31536000
     ExpiresByType application/x-gzip A31536000
     ExpiresByType image/x-icon A31536000
     ExpiresByType image/jpeg A31536000
     ExpiresByType image/webp A31536000
     ExpiresByType application/json A31536000
     ExpiresByType application/vnd.ms-access A31536000
     ExpiresByType audio/midi A31536000
     ExpiresByType video/quicktime A31536000
     ExpiresByType audio/mpeg A31536000
     ExpiresByType video/mp4 A31536000
     ExpiresByType video/mpeg A31536000
     ExpiresByType video/webm A31536000
     ExpiresByType application/vnd.ms-project A31536000
     ExpiresByType application/x-font-otf A31536000
     ExpiresByType application/vnd.ms-opentype A31536000
     ExpiresByType application/vnd.oasis.opendocument.database A31536000
     ExpiresByType application/vnd.oasis.opendocument.chart A31536000
     ExpiresByType application/vnd.oasis.opendocument.formula A31536000
     ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
     ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
     ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
     ExpiresByType application/vnd.oasis.opendocument.text A31536000
     ExpiresByType audio/ogg A31536000
     ExpiresByType application/pdf A31536000
     ExpiresByType image/png A31536000
     ExpiresByType application/vnd.ms-powerpoint A31536000
     ExpiresByType audio/x-realaudio A31536000
     ExpiresByType image/svg+xml A31536000
     ExpiresByType application/x-shockwave-flash A31536000
     ExpiresByType application/x-tar A31536000
     ExpiresByType image/tiff A31536000
     ExpiresByType application/x-font-ttf A31536000
     ExpiresByType application/vnd.ms-opentype A31536000
     ExpiresByType audio/wav A31536000
     ExpiresByType audio/wma A31536000
     ExpiresByType application/vnd.ms-write A31536000
     ExpiresByType application/font-woff A31536000
     ExpiresByType application/font-woff2 A31536000
     ExpiresByType application/vnd.ms-excel A31536000
     ExpiresByType application/zip A31536000
 </IfModule> 

Compress the output:

<IfModule mod_deflate.c>
         AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access video/webm application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel
     <IfModule mod_mime.c>
         # DEFLATE by extension
         AddOutputFilter DEFLATE js css htm html xml
     </IfModule>
 </IfModule>
 <FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
     FileETag MTime Size
     <IfModule mod_headers.c>
         Header set Pragma "public"
         Header append Cache-Control "public"
          Header unset Set-Cookie
     </IfModule>
 </FilesMatch>
 <FilesMatch "\.(html|htm|rtf|rtx|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|TXT|XSD|XSL|XML)$">
     FileETag MTime Size
     <IfModule mod_headers.c>
         Header set Pragma "public"
         Header append Cache-Control "public"
     </IfModule>
 </FilesMatch>
 <FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|webm|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|WEBM|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
     FileETag MTime Size
     <IfModule mod_headers.c>
         Header set Pragma "public"
         Header append Cache-Control "public"
          Header unset Set-Cookie
     </IfModule>
 </FilesMatch>
 <FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|json|mdb|webm|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|JSON|MDB|WEBM|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$">
     FileETag None
     <IfModule mod_headers.c>
          Header unset ETag
          Header unset Last-Modified
     </IfModule>
 </FilesMatch>
 <IfModule mod_rewrite.c>
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteRule ^(.+)\.(x[0-9]{5})\.(css|htc|less|js|js2|js3|js4|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|webm|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip)$ $1.$3 [L] </IfModule>

Adding the above rules to your .htaccess file will cache and compress the output of your website thus making it load faster.

In the above example, mod_rewrite is needed if you have version numbers appended to your files i.e. style.4564654.css or script.24564546.js If you don’t have files that match this pattern, you can remove this line from the code. But if you do, make sure that mod_rewrite is enabled on the server. Otherwise, the above codes won’t work for those files and placing the rewrite conditions will throw a server error.

Website optimization and general configuration Part 3: Headers security – policies and hardening

 

NOTE: A sample .htaccess file implementing all techiques in these posts, can be found at the end of part 3.

Posted in Guides

Related Posts

Leave a Reply

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.


In order to use this website we use the following technically required cookies
  • bth_test_cookie
  • bth_logged_in_
  • bth_sec
  • bth_test_cookie
  • wp-settings-1
  • wp-settings-time-1

Decline all Services
Accept all Services