In this guide, we’ll explore the powerful techniques of Speed Optimaization your WordPress website using the .htaccess file. By leveraging the capabilities of .htaccess, you can achieve a significant performance boost without relying on any plugins.
Our expert techniques and configurations will help you turbocharge your WordPress website, resulting in faster loading times, improved user experience, and enhanced search engine rankings. Forget about bulky plugins and let .htaccess unleash the full potential of your website. It doesn’t matter which kind of web hosting you are using Shared or VPS. In both servers, .htaccess commands have its own important contribution which can impact your WordPress Speed Optimization and many other things.
Achieving a site loading time of under two seconds is paramount in leaving a lasting impression on both your users and the Google algorithm. One of the best way to optimize your website through the .htaccess file.
WordPress Speed Optimization Plugins
In the competitive world of online presence, website speed plays a vital role in user satisfaction, engagement, and search engine rankings. To help you optimize the speed of your WordPress website, there are various plugins available that can streamline the process and enhance performance. In this guide, we will explore some of the top WordPress speed optimization plugins and how they can significantly improve your website’s loading time and overall user experience.
LiteSpeed Cache:
LiteSpeed Cache for WordPress (LSCWP) is an all-in-one site acceleration plugin, featuring an exclusive server-level cache and a collection of optimization features.
LiteSpeed Cache supports WordPress Multisite and is compatible with most popular plugins, including WooCommerce, bbPress, and Yoast SEO.
W3 Total Cache:
W3 Total Cache is another popular caching plugin that can significantly enhance your website’s speed. It integrates with content delivery networks (CDNs), compresses files, and enables browser caching. The plugin also offers advanced features such as database and object caching, minification of HTML, CSS, and JavaScript files, and support for AMP (Accelerated Mobile Pages).
What is a .htaccess file ?
The .htaccess (hypertext access) file is a configuration file used by Apache web servers. It allows website administrators to customize and control various aspects of their website’s behavior on a per-directory basis. The .htaccess file is typically placed in the root directory of a website or in specific directories to override or modify server configuration settings.
The primary purpose of the .htaccess file is to provide a way to configure directory-specific settings without directly editing the main server configuration file. It enables website owners to make changes related to URL rewriting, access control, security, caching, redirects, error handling, and more.
What does .htaccess file do in wordpress ?
The .htaccess file in WordPress serves a crucial role in configuring and customizing various aspects of your website’s behavior and performance. It acts as a powerful tool for controlling how the Apache web server handles requests and interacts with your WordPress site. It is the key to controlling a particular folder or a piece of the server. .htaccess is very useful to edit the configuration of the server software resulting such as starting or pausing some features or functionality of the server.
Locating .htaccess file in WordPress
To locate the .htaccess file for your WordPress site, you can typically find it residing in the root folder of your installation.
Here’s how to find and edit your .htaccess file in cPanel
1 – Log in to your cPanel account. Locate the Files section and click File Manager.
2 – Access the public_html directory. Click on your WordPress folder. In this case, it’s labeled as wp. Then, look for the .htaccess file.
3 – By default, .htaccess file is hidden due to some security reasons so you wouldn’t be able to see it under the public_html directory until you make it visible manually. For that: go to the Settings on the upper right menu and tick the Show Hidden Files option to enable viewing.
If You Can’t Find .htaccess file in Filemaneger
This might be the reason, the wordpress site has not generated a .htaccess file yet.
To generate a .htaccess file Set up permalinks :
Login To WordPress admin go to setting menu > choose parmalink then click on save changes
Alternatively, you can create a .htaccess file and upload it.
Before You Optimise your site Via .htacess
- Deactivate the plugins who creating any cache and get rid of the cache produced earlier by the plugins.
- Check that your website is in a working state. Fix errors, if any.
- Get an Basic idea of page loading time.
Speeding up Your Website Using .htacess
By following the step-by-step instructions and best practices outlined in this guide, you’ll be able to achieve a remarkable 200% speed optimization for your WordPress website, all without relying on any additional plugins. Take control of your website’s performance and create an exceptional user experience.
- Enable Gzip and Deflate Compression
- Enable Browser Caching
- Enable Keep-Alive
- Disable Image Hotlinking
- Enable mod_pagespeed
1 – Enable Gzip and Deflate Compression
Enabling Gzip and Deflate compression is a technique used to reduce the file size of website resources, such as HTML, CSS, JavaScript, and images. By compressing these files before they are sent from the server to the user’s browser, it significantly reduces the amount of data transferred, resulting in faster loading times and improved website performance.
To enable Gzip and Deflate compression in WordPress using the .htaccess file, follow these code:
# BEGIN DEFLATE COMPRESSION
<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 for older 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>
# END DEFLATE COMPRESSION
If You’re Not Using Apache Server
If you’re not using an Apache server for web hosting, use the equivalents for the purpose of compression.
Compression for NGINX Server
For the users stuck with NGINX server, fortunately , use this htaccess code in your configuration file in your web 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;
2 – Enable Browser Caching
Enabling browser caching in WordPress using the .htaccess file can greatly enhance website performance and improve user experience by allowing certain files to be stored locally in the user’s browser. This means that when a visitor returns to your website, their browser can retrieve and display cached files instead of requesting them from the server again. This results in faster load times and reduced server load.
Use these two codes methods to enable browser caching (recommended)
Expires Headers
#BEGIN EXPIRES HEADERS <IfModule mod_expires.c> # Enable expirations ExpiresActive On # Default expiration: 1 hour after request ExpiresDefault "now plus 1 hour" # CSS and JS expiration: 1 week after request ExpiresByType text/css "now plus 1 week" ExpiresByType application/javascript "now plus 1 week" ExpiresByType application/x-javascript "now plus 1 week" # Image files expiration: 1 month after request ExpiresByType image/bmp "now plus 1 month" ExpiresByType image/gif "now plus 1 month" ExpiresByType image/jpeg "now plus 1 month" ExpiresByType image/jp2 "now plus 1 month" ExpiresByType image/pipeg "now plus 1 month" ExpiresByType image/png "now plus 1 month" ExpiresByType image/svg+xml "now plus 1 month" ExpiresByType image/tiff "now plus 1 month" ExpiresByType image/vnd.microsoft.icon "now plus 1 month" ExpiresByType image/x-icon "now plus 1 month" ExpiresByType image/ico "now plus 1 month" ExpiresByType image/icon "now plus 1 month" ExpiresByType text/ico "now plus 1 month" ExpiresByType application/ico "now plus 1 month" # Webfonts ExpiresByType font/truetype "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" </IfModule> #END EXPIRES HEADERS
Cache-Control
# BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "max-age=604800, public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "max-age=216000, private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "max-age=600, private, must-revalidate" </filesMatch> </ifModule> # END Cache-Control Headers
Enabling browser caching through the .htaccess file allows returning visitors to experience faster load times since their browsers will retrieve cached files rather than making fresh requests to the server. This optimization technique is particularly effective for static resources like images, CSS, JavaScript, and other files that don’t frequently change.
3 – Enable Keep-Alive in .htaccess
HTTP Keep-Alive, also known as persistent connections, is a feature of the Hypertext Transfer Protocol (HTTP) that allows multiple requests and responses to be sent over a single TCP (Transmission Control Protocol) connection. In the context of the .htaccess file, you can configure the HTTP Keep-Alive functionality to control how long the connection between the web server and the client browser should be maintained.
To enable HTTP Keep-Alive in the .htaccess file, you can add the following directives:
# Start Enable Keep-Alive <ifModule mod_headers.c> Header set Connection keep-alive </ifModule> # End Enable Keep-Alive
The above code instructs the web server to include the “keep-alive” header in the server response, indicating that the connection should be kept alive for subsequent requests.
By implementing HTTP Keep-Alive, you allow the web server and client browser to maintain a persistent connection, enabling faster loading of subsequent resources and reducing the overall latency experienced by the user. However, it’s important to note that enabling Keep-Alive may have resource implications on the server side, as each connection consumes server resources. Therefore, it’s advisable to configure the Keep-Alive timeout value appropriately to balance performance and resource usage.
4 – Disable Image Hotlinking
Image hotlinking, also known as hotlinking or inline linking, refers to the practice of displaying an image on a website by directly linking to the image URL hosted on another website’s server. This means that instead of hosting and serving the image files themselves, some websites use the image URLs from other websites to display images on their own web pages. This can result in unauthorized use of bandwidth and server resources of the hosting website.
To block image hotlinking using the .htaccess file, you can add the following directives:
# Start Block Image Hotlinking
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?another-authorized-domain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
</IfModule>
# End Block Image Hotlinking
In the code above, replace “yourdomain.com” with your own domain and add additional authorized domains in the third RewriteCond line if necessary. The code checks the HTTP referer header to ensure that the request is coming from an authorized domain. If the referer does not match the allowed domains, the request for image files with the extensions (jpg, jpeg, png, gif) will be denied with a “403 Forbidden” error.
5 – Enable mod_pagespeed
The “mod_pagespeed” module is an open-source web server module developed by Google. It is designed to automatically optimize and improve the performance of websites by applying a variety of optimization techniques on the fly. These optimizations include minifying and compressing resources, leveraging browser caching, optimizing images, and more.
When it comes to configuring the mod_pagespeed module using the .htaccess file, it allows you to fine-tune and customize the optimization settings for your specific website. By modifying the .htaccess file, you can enable or disable specific optimization filters, adjust their parameters, and control the behavior of the mod_pagespeed module.
Here is an example of how you can configure mod_pagespeed using the .htaccess file:
# Start Enable mod_pagespeed
<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedRewriteLevel Pass
ModPagespeedEnableFilters rewrite_javascript,rewrite_css
ModPagespeedEnableFilters combine_css,combine_javascript
ModPagespeedEnableFilters recompress_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters collapse_whitespace,remove_comments
ModPagespeedEnableFilters extend_cache
</IfModule>
# End Enable mod_pagespeed
In the above code snippet, the “ModPagespeed on” directive enables the mod_pagespeed module. The “ModPagespeedRewriteLevel Pass” directive sets the rewrite level to “Pass,” which means that mod_pagespeed won’t modify the actual content, but it will still rewrite URLs and apply other optimizations.
URL Canonicalization Redirection
In this case, you can redirect your non-www URL to the www URL.
RewriteCond %{HTTP_HOST} ^www\.example\.com$
RewriteRule ^/?$ "http\:\/\/example\.com\/" [R=301,L]
If you want to redirect non-www to www URL:
RewriteCond %{HTTP_HOST} !^www.example.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301
By implementing the expert techniques and best practices outlined in this guide, you can transform your WordPress website into a high-performing, lightning-fast platform that impresses visitors and search engines alike. With .htaccess as your ally, you can achieve professional-level speed optimization without the reliance on resource-heavy plugins. Embrace the power of WordPress speed optimization