Speed up your website using .htaccess file

.htaccess is a magic file that tells apache to how to serve files in a directory. It is the most common also the best way to speed up your website.
One of the most important factor in page loading speed, is that everytime a user enters your site, browser loads every image, script and stylesheet again. To prevent this behaviour, We can tell browser to cache static files for future use.

# Enable browser cache for images and styles
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(.gz)?$">
Header set Expires "Thu, 15 Apr 2014 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

You must change expiring date to a far future date. This way, until that day comes, and of course if user doesn’t clear cache manually static files won’t be downloaded again. ETag’s must be disabled for caching to work successfully. You can debug your file header information using AskApache’s HTTP Header Debugger. It will show you if your file has an expiry date or not.

The other most important factor is the gzip compression. Now that most common browsers support Gzip compression, Google and Yahoo recommend it to speed up your website. Gzip can zip your text based content like css, html, javascript with great compression rates, so it will change your page download times extremely.

# Enable gzip compression for text, html, javascript, css, xml:
<IfModule mod_deflate.c>
	<IfModule mod_headers.c>
		Header append Vary User-Agent env=!dont-vary
	</IfModule>

	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/json
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/xsd
	AddOutputFilterByType DEFLATE text/xsl
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/javascript
	AddOutputFilterByType DEFLATE text/x-js
	AddOutputFilterByType DEFLATE text/richtext
	AddOutputFilterByType DEFLATE text/svg+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript

	AddType x-font/otf .otf
	AddType x-font/ttf .ttf
	AddType x-font/eot .eot
	AddType x-font/woff .woff
	AddType image/x-icon .ico
	AddType image/png .png

	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch ^Mozilla/4.0[678] no-gzip
	BrowserMatch bMSIE !no-gzip !gzip-only-text/html

	<IfModule mod_mime.c>
		# DEFLATE by extension
		AddOutputFilter DEFLATE js css htm html xml
	</IfModule>
</IfModule>

You should have mod_deflate module installed and enabled for gzip compression to work. Most of the web hosting companies allow you to enable/disable apache modules, so you can check it on your hosting control panel. Even if you don’t know, i recommend adding the code, because code will check if it works. If it doesn’t, apache will simply ignore those lines.

Conclusion

Today, page loading speed is one of the most important keys to a successful website. Most of the visitors leave the website because it is slow. If you want to make your website faster, .htaccess is the most important key. I also recommend serving your static files from a cookie free domain. But that’s another story. Cheers!

[contact-form-7 id=”4339″]