Increase Site Speed Using htaccess

Increase Site Speed Using .htaccess

Google have mentioned in various articles about the importance of website page speed as part of their ranking algorithms. Not only is page speed a ranking factor, it is also an important user experience factor such that if a page is taken a while to load, it will have negative effects with regards to bounce rates. Google provide a testing tool which will display areas that your website is failing on and techniques to rectify these issues – PageSpeed Insights.

What is a .htaccess file?

The .htaccess is a configuration file that is supported by many web servers and can be used to alter the configuration of the web server software to enable/disable functionality and features. Some functionalities include 404 redirects, password protection and as we will discuss in this blog, performance.

Increase Site Speed

Using the following steps in .htaccess, we can drastically speed up websites with ease, thus resulting in better usability and high Google rankings.

  1. Compression

Compression is highly when trying to speed up your website as it allows your web server to provide a smaller file size that loads faster for users. Compression of your HTML and CSS files using GZIP typically saves around 50-70% of the file size. Compression is pretty standard now and you can guarantee that your competitors will be using it. Enable gzip using the following code in your .htaccess.

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

 

  1. Content Transformations

Stop mobile network providers from modifying the websites content.

Header set Cache-Control “no-transform”

  1. Remove ‘ETags’

Entity tags (ETags) are used by web servers and browsers to decide whether the element in the browsers cache matches the current. Performance wise, it is good to remove ETags as the resources are sent with far-future expiry headers.

Header unset ETag

FileETag None

  1. Expires Headers

Expires headers work with the browser to determine whether or not to request a specific file from the webserver or to grab a file from the browser cache. The idea of an expires header is to reduce the amount of downloads of the same file (when it has not been modified) and also to reduce the number of HTTP request for the server. You can set the expires headers as you wish and the ones used in the example are pretty far in the future. If you don’t control versioning with filename-based cache busting, then its best to consider lowering the cache time for the resources such as Style Sheets and Javascript to less time.

 ExpiresActive on
ExpiresDefault “access plus 1 month”

# CSS
ExpiresByType text/css “access plus 1 year”

# Data interchange
ExpiresByType application/json “access plus 0 seconds”
ExpiresByType application/ld+json “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType text/xml “access plus 0 seconds”

# Favicon (cannot be renamed!) and cursor images
ExpiresByType image/x-icon “access plus 1 week”

# HTML components (HTCs)
ExpiresByType text/x-component “access plus 1 month”

# HTML
ExpiresByType text/html “access plus 0 seconds”

# JavaScript
ExpiresByType application/javascript “access plus 1 year”

# Manifest files
ExpiresByType application/x-web-app-manifest+json “access plus 0 seconds”
ExpiresByType text/cache-manifest “access plus 0 seconds”

# Media
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”

# Web feeds
ExpiresByType application/atom+xml “access plus 1 hour”
ExpiresByType application/rss+xml “access plus 1 hour”

# Web fonts
ExpiresByType application/font-woff “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”
ExpiresByType application/x-font-ttf “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”