How to increase page speed using .htacess in WordPress ?

Prerequisites – Htaccess tricks to Optimize website speed

Before starting any process of updating .htaccess file I suggest that please take backup of current .htaccess file so that you can easily revert back.

Also I suggest to disable all cache related plugins before implementing changes in .htaccess file

At last check you current google page speed so that you can compare after the changes of .htaccess

1) Enable Gzip and DEFLATE Compression

The first trick that will help to speed up your website is Gzip compression. Due to compression of HTML, CSS & JS Files the size of  page load will reduce by around 60%.

Add below code in .htaccess file to enable 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>

For Deflate compression in Apache you need to add below code in .htaccess file

<IfModule mod_deflate.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" \
"application/x-font-opentype" \
"application/x-font-otf" \
"application/x-font-truetype" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/otf" \
"font/ttf" \
"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>

Difference between Gzip and Deflate format

"Gzip" is the gzip format, and "deflate" is the zlib format. The working of both is indentical

2) Enable Keep Alive

Enable Keep Alive is powerful and important trick to speed up wordpress website. Keep Alive instructs browser to download resources on single connection. The HTTP keep-alive header maintains a connection between a client and your server, reducing the time needed to serve files

To enable Keep Alive add below code to .htaccess file

# ESPL START ENABLE KEEP ALIVE
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
# ESPL END ENABLE KEEP ALIVE

Enable keep Alive on NGINX Server

If your website on NGINX based server, you don't need to worry about keep alive, it is by default enabled.

3) Enable Leverage Browser Caching

Leverage browser caching means you specify how long browser should keep Images, CSS & JS Files locally. As a result browser will download less data as static assets will not be requested and will use already downloaded data.

Most of tools like Google page speed and GTmatrix recommends  to implement Leverage browser caching.

Add Expire headers in .htaccess file to enable browser caching

# ESPL - START EXPIRES CACHING #
<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>
# ESPL - END EXPIRES CACHING #

Also you need to add Cache control headers to increase page speed

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A0

<FilesMatch "\.(txt|xml|js)$">
ExpiresDefault A31536000
</FilesMatch>

<FilesMatch "\.(css)$">
ExpiresDefault A31536000
</FilesMatch>

<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|otf|woff|woff2|svg)$">
ExpiresDefault A31536000
</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
ExpiresDefault A31536000
</FilesMatch>
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(txt|xml|js)$">
   Header set Cache-Control "max-age=31536000"
  </FilesMatch>

  <FilesMatch "\.(css)$">
   Header set Cache-Control "max-age=31536000"
  </FilesMatch>

  <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|web|woff|woff2|svg)$">
   Header set Cache-Control "max-age=31536000"
  </FilesMatch>

  <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
   Header set Cache-Control "max-age=31536000"
  </FilesMatch>
</IfModule>

4) Disable Image Hot Linking

This trick is related to images of your website. If you have noticed that some websites might be using your images directly (with url of your domain). Due to this, when your image is requested from other website, it is loaded from your server and it will affect performance as server will be occupied.

If you have not noticed , then it's time for action now !! You need to add below code to .htaccess file to prevent this

# ESPL – DISABLE IMAGE HOTLINKIING START
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]
# ESPL – DISABLE IMAGE HOTLINKIING END

You need to replace yourdomain.com with your website name

5)Enable mod_pagespeed to increase page speed

The Google PageSpeed module, also known as mod_PageSpeed, is an open-source server-level package that helps optimize your site.

Specifically, mod_PageSpee helps in below optimization

• Minifies HTML, CSS, and JavaScript.
• Optimizes file caching.
• Combines external JavaScript files and optimizes them.
• Optimizes file loading by prioritizing important CSS and deferring JavaScript.

You need to add below code to .htaccess file for enabling mod_pagespeed

# ESPL – 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>
# ESPL – ENABLE MOD PAGESPEED END

Bonus tips to secure your wordpress website

How to secure wordpress website using .htacess file ?

1) Turn off Server Signature

Your website can be hacked if your server information is open and this can lead to disaster if not taken care.

To turn of server signature you need to add below code to .htaccess file

# ESPL Disable server signature #
ServerSignature Off
# ESPL Disable server signature #

2) Disable Directory Listing

Your whole website structure can be easily exposed if directory listing is enabled. To stop that you need to add below code to .htaccess file

# ESPL DISABLE DIRECTORY LISTING
Options -Indexes
# ESPL DISABLE DIRECTORY LISTING

After implementing above changes, you will definitely  notice a significant increase in page speed and also compare with results before changes of .htaccess file.

I am sure above tricks will result in improved page speed !!

If you feel that above changes are tricky and wordpress expert help is needed, we at Elitech Systems are having expert tech nerds in WordPress Development. You can also hire wordpress developer on hourly basis for implementation