Tuesday, December 1, 2020
Home CMS Increase Wordpress Page Speed using htaccess

Increase WordPress Page Speed using htaccess

Increase WordPress Page Speed using htaccess – An .htaccess file is a directory-level configuration file supported by several web servers, used for configuration of website-access issues, such as URL redirection, URL shortening, access control, and more. The ‘dot’ before the file name makes it a hidden file in Unix-based environments

  1. Start Compression – Gzip and DEFLET
  2. Enable Keep Alive
  3. Leverage Browser Caching
  4. Disable Image Hotlinking
  5. Activate mod_pagespeed
  6. Enable LightSpeed Server Cache

Increase WordPress Page Speed using htaccess

Enable Gzip and DEFLATE Compression using Htaccess

Gzip compression can reduce the size of HTML files, JS and CSS files by 60% to 80%

Please Add the below code in your Htaccess file to Enable Gzip and DEFLATE Compression.

Please refer to know how to enable Gzip and DEFLATE on Apache2

DEFLATE Compression on Apache

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Gzip Compression on Apache

# TN 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>
# TN END GZIP COMPRESSION

If you are on the NGINX server, then you have to add the following Htaccess code in your “config” file in order to enable Gzip and DEFLATE compression.

Compression on NGINX server

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

Enable Keep Alive

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

Please add below code to .htaccess file to enable KeepAlive

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

Add Expires headers to leverage browser caching via Htaccess

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

Add Cache-Control Headers

# TN - BEGIN 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>
# TN - END Cache-Control Headers

Disable Image Hotlinking

Image hotlinking is a practice that can negatively affect your site’s performance and your bottom line. However, sometimes it can be hard to notice that there’s a problem until the damage is done. That’s why it’s important to prevent image hotlinking in WordPress before it becomes an issue.

Add the following code in Htaccess. And do not forget to replace sample.com with your own domain name.

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

Enable Google mod_pagespeed

Mod_pagespeed module was developed by Google to increase page speed of websites. You can have installed the same by using SSH on your control panel.

mod_pagespeed download page

Once you finish the installation Mod_pagespeed can be enabled by adding 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

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

What’s New in PHP 8 (Features & Improvements)

What’s New in PHP 8 (Features & Improvements) - it is a major update of the PHP language. It contains many new...

How to add Facebook Customer Chat with GTM

How to add Facebook Customer Chat with GTM | The Plugin allows you to integrate your Messenger experience directly into your website....

Implement Facebook pixel with Google Tag Manager-GTM

What is Facebook Pixel How to Implement Facebook pixel with Google Tag Manager-GTM - The Facebook pixel is...

Magento 2.3.5 Content Security Warnings | How to Fix

Magento 2.3.5 Content Security Warnings | How to Fix - You are working on a Magento 2.3.5 project and you have a...

Recent Comments