.htaccess Tricks to Optimize Website Speed

Blog


Whether you are a developer, a webmaster, or an ordinary internet user, virtually all of us love faster websites. Speed can make or break a website. It affects your traffic, page views, conversions, sales, and your site’s overall reputation. According to a study by Google, websites loading under 1 second are likely to be placed higher in search ranking. That’s why it is always important to optimize website speed for smooth and uninterrupted user experience.

This post is focused on how to Increase Page Speed using .htaccess.

First of all, as a website developer, you should test your website on google (https://developers.google.com/speed/pagespeed/insights) or GTmetrix (https://gtmetrix.com) to get the insightful information about your website’s page loading time.

What is the .htaccess File?

The .htaccess file, as name stands for “hypertext access”, is a localized server configuration file that controls many aspects of how your webpages display. Things like redirects, enabling compression, rewriting urls, leveraging browser caching, security (to some extent) and more can be accomplished by adding some code to this file. The .htaccess file is used by Apache, Litespeed and others.

However, you should exercise extreme caution while editing the .htaccess file of your website. You should be well aware of what you’re going to do before you update this file. The best couple of advice in this regard is that

  • you keep a backup of the original .htaccess file before making any changes and
  • make one change at a time and test it before going to make another change in it.

Typically the .htaccess file is found, or created on the “root” level, that is, the “www” or “public_html” directory. This file is just a text file, so you can edit it the same manner you edit any other file from the ftp on your web host.

.htaccess can be used to perform a range of tasks, including Password Protection, Redirection, Rewrite URLs, Custom Error Pages, Prevent Hot- linking, Deny access and perhaps the most important one: Speed Optimization of the Website. But for now we focus on the speed optimization tricks for our website.

.htaccess Tricks

Let’s start with a list of htaccess tricks to unlock more page speed, which are going to be covered in this post. The list below covers the major recommendations by most of the web developers as common as well as the best-practices to increase Website speed using .htaccess.

Enable Keep Alive

Enabling Keep Alive is a powerful htaccess trick to speed up your website. It enables your server and web browser to download resources on a single connection, hence it increases page rendering speed. You can enable Keep Alive by adding “Connection: Keep-Alive” HTTP header in your server.

Add the following Htaccess code to enable Keep Alive.

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

Note that, Keep Alive is auto-enabled on most of the modern Apache servers. However, you may have to manually enable Keep Alive on old Apache Servers.

Add Expires Headers To Leverage Browser Caching

Leveraging Browser Caching via Htaccess is one of the most recommended Htaccess tricks to speed up websites. Most of the optimization tools like GTmetrix and Google PageSpeed Insights recommend to Enable Browser Caching. Browser Caching enabled websites ask web browsers to keep website resources like image, js, css files for a specified period. So the web browsers do not need to download the same resources again the next time. Consequently the website loads faster because the browser uses the already downloaded resources.

You can Enable Browser Caching by adding the following htaccess code to increase page speed using htaccess.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/rss+xml “access plus 1 hour”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresDefault “access 1 month”
</IfModule>


Enable Gzip And DEFLATE Compression

Compression allows your web server to provide smaller file sizes which result in remarkably faster load of your website pages.
Do you know that compression can reduce the size of HTML files, JS and CSS files by 60% to 80%.?

By compressing the files before rendering to the user’s browser a lot of bandwidth is saved and the page load time of your website is enormously improved. When some user visits your website, the compressed files are unzipped automatically so the content can be accessed.

Both compression algorithms (Gzip and DEFLATE) are different and used for different servers. Gzip compression is used on Apache and Nginx servers, while DEFLATE is only used on Apache servers.

Further, Add the below code in your Htaccess file to Enable Gzip and DEFLATE Compression

Gzip Compression on Apache

<IfModule mod_gzip.c>
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.
</IfModul

DEFLATE Compression on Apache

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/x-font
</IfModule>


Enable mod_pagespeed

Mod_pagespeed module was developed by Google to increase page speed of websites. Nowadays, many Web hosting Providers like Godaddy, SiteGround and DreamHost support mod_pagespeed module by default.

Mod_pagespeed can be enabled by adding the following code to the Htaccess file.

<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedEnableFilters rewrite_css,combine_css
ModPagespeedEnableFilters recompress_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters collapse_whitespace,remove_comments
</IfModule>


To make things more simple and automated here’s a link of a tool to automatically generate the required .htaccess for you. You just have to provide your requirements like rewrite domain, redirect file or directory, caching JavaScript and CSS, prevent hotlinking, block IP address, and many more, then click Generate Code button and here you go! Your .htaccess is ready.

You can find the tool here.

3 thoughts on “.htaccess Tricks to Optimize Website Speed

Leave a Reply

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