ThemeIM Blog Details

How to Increase Page Speed using htaccess

How to Increase Page Speed using htaccess

To create a better user experience and improve SEO performance, faster page loading speed is obligatory. While you may feel the importance of this, you may not be sure how to increase page loading speed. Keeping that in mind, we will show you how to increase page speed using Htaccess.

Page loading speed is important to ensure better performance and user experience. There are plenty of ways to increase page loading speed for your website. Using plugins like W3 Total Cache or WP Rocket can make your web pages load faster. However, this can easily be done by adding some code in the .htaccess file rather than installing a third-party plugin.

Backup Before Increase Page Speed using Htaccess

Before you edit the .htaccess file, you should create a backup of it. If anything goes wrong, you will get an Error 500 and the whole site may go down as it is a server configuration file. If there is a backup of the .htaccess file, you can quickly revert back to the most recent state of your website.

To create a backup of the .htaccess file, follow these steps –

  • Locate the .htaccess file in the public route of your website.
  • You can save it to any preferable format. But, it is better to save it as a text file like – htaccess-backup-{date}.txt

Note that the .htaccess file starts with a period and may refer to as a “hidden” file. At the time you are renaming it, be sure to delete that advance period and save it as a read-only file that can be easily opened with Notepad.

Once you make a backup of the .htaccess file, let’s take a look at the basic list of the Htaccess prerequisite files –

  • Enable Compression
  • Enable Keep Alive
  • Leverage Browser Caching
  • Disable Image Hotlinking
  • Activate mod_pagespeed
  • Enable LightSpeed Server Cache

Enable Compression – A Common Htaccess Trick to Optimize Website Speed 

GZIP is the best method of compression. And it is quite common as people tend to do it in this way when they start editing the .htaccess file for increasing page loading speed. You will be shocked to know –

“The size of HTML files, JavaScript, CSS files can be reduced from 60% to 80% using the GZIP compression method.”

The thing is, you have to enable GZIP or DEFLATE compression using Htaccess to increase page loading speed.

First, we will enable GZIP that works on both Apache and Nginx servers. The code for GZIP is wrapped inside the <IfModule> –

# START GZIP COMPRESSION

<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.*

</IfModule>

# END GZIP COMPRESSION

You can also enable DEFLATE that only works on Apache servers. Just like GZIP, the code for DEFLATE is also wrapped inside the <IfModule>. And here’s how to enable DEFLATE compression on Apache –

# START DEFLATE COMPRESSION

<IfModule mod_filter.c>

AddOutputFilterByType DEFLATE “application/atom+xml” \

“application/javascript” \

“application/json” \

“application/ld+json” \

“application/manifest+json” \

“application/rdf+xml” \

“application/rss+xml” \

“application/schema+json” \

“application/vnd.geo+json” \

“application/vnd.ms-fontobject” \

“application/x-font-ttf” \

“application/x-javascript” \

“application/x-web-app-manifest+json” \

“application/xhtml+xml” \

“application/xml” \

“font/eot” \

“font/opentype” \

“image/bmp” \

“image/svg+xml” \

“image/vnd.microsoft.icon” \

“image/x-icon” \

“text/cache-manifest” \

“text/css” \

“text/html” \

“text/javascript” \

“text/plain” \

“text/vcard” \

“text/vnd.rim.location.xloc” \

“text/vtt” \

“text/x-component” \

“text/x-cross-domain-policy” \

“text/xml”

</IfModule>

# END DEFLATE COMPRESSION

If you want to verify everything is working properly, you should visit GiftOfSpeed GZIP Compression Testing Tool. This will suggest whether GZIP is enabled or not. It will also give an idea of how much the file size has been reduced.

giftofspeed

Enable Keep Alive – Increase Speed of WordPress Site Using Htaccess

A great way to speed up WordPress websites using Htaccess is by enabling Keep Alive. To enable Keep Alive on your server, you can insert the following .htaccess code –

# START ENABLE KEEP ALIVE

<ifModule mod_headers.c>

Header set Connection keep-alive

</ifModule>

# END ENABLE KEEP ALIVE

Once you enable Keep Alive, both the web browser and your server will download resources using a single connection. Luckily, Keep Alive remains enabled on most Apache servers. Again, if you are using NGINX server, keep Alive already remains active. Still, you can do this for a double-check.

Leverage Browser Caching By Adding Expires Headers in Htaccess

Your browser will download static resources only once when you leverage browser caching. This will cache these resources locally. — As a result, the same version will be used again for repetitive views instead of downloading them again.

The terms and conditions for downloading static files may change periodically (you don’t want to download all types of files). That is why adding expires headers in the .htaccess file will let your browser know when to redownload an static file.

# START ADD EXPIRES HEADERS #

<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 audio/ogg “access plus 1 year”

ExpiresByType video/mp4 “access plus 1 year”

ExpiresByType video/ogg “access plus 1 year”

ExpiresByType video/webm “access plus 1 year”

ExpiresByType application/atom+xml “access plus 1 hour”

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 text/x-component “access plus 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType font/opentype “access plus 1 month”

ExpiresByType application/vnd.ms-fontobject “access plus 1 month”

ExpiresByType application/x-font-ttf “access plus 1 month”

ExpiresByType application/font-woff “access plus 1 month”

ExpiresByType application/font-woff2 “access plus 1 month”

ExpiresDefault “access 1 month”

</IfModule>

# END ADD EXPIRES HEADERS #

Also, be sure to add a cache control header after all these –

# BEGIN ADD CACHE CONTROL HEADERS

<ifModule mod_headers.c>

<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>

Header set Cache-Control “public”

</filesMatch>

<filesMatch “\.(css)$”>

Header set Cache-Control “public”

</filesMatch>

<filesMatch “\.(js)$”>

Header set Cache-Control “private”

</filesMatch>

<filesMatch “\.(x?html?|php)$”>

Header set Cache-Control “private, must-revalidate”

</filesMatch>

</ifModule>

# END ADD CACHE CONTROL HEADERS

If you have successfully added Expires headers in Htaccess to leverage browser caching, you can check new page loading speed in either GTmetrix or PageSpeed Insights.

Disable Image Hotlinking – How to Optimize WordPress Site Speed

This is one most reasonable and logical steps to increase page loading speed. Why? Because it is pretty unfair to let other people load images on their websites from yours when they are not paying to host images.  And this is what Image Hotlinking is all about.

Disabling image hotlinking is the very first thing you should do. Inserting the following code segment reduces server response time wordpress htaccess. But how does it disable image hotlinking? It blocks other sites from loading hotlinked files while giving no error. It is a good way to optimize images using htaccess.

# START PREVENT IMAGE HOTLINKING

RewriteEngine On

RewriteCond %{HTTP_REFERER} ^http://(www\.)?example\.com(/.*)*$ [NC,OR]

RewriteRule \.(jpeg|JPEG|jpe|JPE|jpg|JPG|gif|GIF|png|PNG|mng|MNG)$ – [F]

# END PREVENT IMAGE HOTLINKING

 

Note:

 

Here we have used (http://(www\.)?example\.com). You should use your own website URL here.

Activate mod_pagespeed – Speed Up WordPress Website Using Htaccess

This is a great technique when you are running Apache servers. This not only increases page speed but also optimizes your website. Google is the inventor of the Mod_pagespeed module that is more than enough to define its effectiveness.

Nowadays, a few hosting providers like SiteGround, GoDaddy, DreamHost support the Mod_pagespeed module by default. However, you can also activate mod_pagespeed to speed up your WordPress website using Htaccess.

To enable mod_pagespeed, you have to use the SSH under the control panel and add the following code to the .htaccess file –

# TN – ENABLE MOD_PAGESPEED START

# COMBINE CSS, COMPRESS IMAGES, REMOVE HTML WHITE SPACE AND COMMENTS

<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>

# TN – ENABLE MOD_PAGESPEED END

There are filters and customization options available for further customization for the mod_pagespeed module.

Enable LightSpeed Server Cache – Increase Page Speed using Htaccess

This step is not mandatory. It is effective for those who are using LightSpeed servers to run their websites. Enabling LightSpeed server-level caching will increase your web page loading speed significantly. All you have to do is to add the following Htaccess code –

# TN – ENABLE LITESPEED CACHE START

<IfModule LiteSpeed>

CacheEnable public

RewriteEngine On

RewriteCond %{REQUEST_METHOD} ^GET|HEAD$

RewriteCond %{HTTP_HOST} ^sample.com|sample.net|sample.org [NC]

RewriteCond %{REQUEST_URI} !login|admin|register|post|cron

RewriteCond %{QUERY_STRING} !nocache

RewriteRule .* – [E=Cache-Control:max-age=300]

</IfModule>

# TN – ENABLE LITESPEED CACHE END

 

Note:

 

  • Here, we have used (sample.com)for demonstration only. You need to use your domain.
  • If you don’t want to enable LightSpeed server cache on multiple websites, then remove hyphens (|) and other domains.

Conclusion:

You will definitely notice a significant increase in web page loading speed. Before wrapping up, we would like to give you a bonus tip. Do you know?

Revealing your server information increase the chances of hack

That is why you need to hide the server signature. It is simple, just copy and paste the following codes in your Htaccess file –

# START – TN Disable server signature #

ServerSignature Off

# END – TN Disable server signature #

After successfully implementing all these tricks, compare your new page loading speed with the previous one by using Pingdom, GTmatrix, or any other tool. We can guarantee you will notice a significant improvement in web page loading speed after the comparison.

This brings us to the end of this discussion. We would like to know the percentage (%) change in your website loading time. Do let us know by leaving a comment below.

Editor Team

We are a group of WordPress experts (editorial team) from Themeim. All of these articles go through manual testing to reveal the ultimate outcome.

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.