Optimize your website by tweaking .htaccess settings

I hope you know that slow web pages scare away visitors, while fast pages lead to higher visitor engagement, retention, and conversions.  Here are some suggestions to optimize your web site to get large performance wins with the least development effort. You can use Google PageSpeed to verify that your settings are working.

“The task is to extract the maximum amount of milk with the minimum of moo. And I am afraid to say that these days all I get is moo.”
(Terry Pratchett, Jingo)

Enable “Keep-Alive”

HTTP keep-alive, also kwown as HTTP persistent connection, or HTTP connection reuse, means using a single connection to send multiple HTTP requests from the browser to the server.

If Keep-Alive is not enabled, the browser needs to open a new connection  for every single component of a web page, like images, style sheets and javascripts. That means the number of connections opened on the server can be ten fold compared to having Keep-Alive enabled.

Enable Compression

Compressing resources with gzip or deflate can reduce the number of bytes sent over the network. Text based resources like HTML, CSS and javascsript can easily be reduced in size by 30-50% by utilizing the automatic compression of web servers.

Enable Browser Caching

Your web site most likely contains many images and CSS/ javascript resources that doesn’t change very often. If your server isn’t correctly configured, every time a user loads a page the browser checks whether these resources have changed. Setting an expiry date or a maximum age in the HTTP headers for such resources tells the browser to user a previously downloaded local copy without even checking if the file has changed on the server.

Sometimes this can cause problems: you make changes to a CSS or javascript file, but the user browsing the site still sees the old version.

Complete optimized .htaccess file for your web site

Below is a .htaccess script that does all the optimazions mentioned above. First, it enables Keep-Alive. Secondly, it enables browser caching of images (for two weeks) and CSS/javascript/flash scripts (for two days). You can easily modify these time limits according to your needs. Finally, it enables compression of all requested files, exept images (gif, jpg, jpeg, png) as those are already compressed. It contains a workaround for Netscape 4.0 as it has some problems handling compressed files.

#Headers
<ifModule mod_headers.c>
 Header set Connection keep-alive
</ifModule>
<IfModule mod_expires.c>
 ExpiresActive On
 <FilesMatch "\.(ico|jpg|jpeg|png|gif)$">
  ExpiresDefault "access plus 2 weeks"
 </FilesMatch>
 <FilesMatch "\.(js|css|swf)$">
  ExpiresDefault "access plus 2 days"
 </FilesMatch>
</IfModule>
<IfModule mod_deflate.c>

# Insert filter
 SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
 BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
 BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
 BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don't compress images
 SetEnvIfNoCase Request_URI \\.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
 Header append Vary User-Agent env=!dont-vary
</IfModule>

3 comments

  1. Thanks for this article. I especially found enabling GZIP compression to really make a difference to my website speed. By the way, here is a tool to quickly check your if your website has keepalive enabled:http://www.giftofspeed.com/check-keep-alive/
    Saved me a lot of time when I was testing the keepalive settings.

Leave a Reply

Your email address will not be published. Required fields are marked *