How to Speed up WordPress Leveraging Browser Caching via .htaccess

A web browser retrieves a lot of resources from the server like CSS files, Images and html files etc. Web cache allows applications and websites to store this files in temporary storage in the local disk to allow faster retrieval next time the file is requested. This way, when you visit a website the second time, it loads much faster because of the downloaded resources.

This article shall cover how to speed up WordPress by leveraging browser cache via htaccess file.

Overview

A browser cache refers to a temporary storage location for files downloaded to display websites. These files include HTML files, CSS files and generally any documents that make up a site. The web server should allow browsers to store web page resources locally to take advantage of the browser cache. The problem comes in whenever the cache becomes large; the files take up much space on your computer and slow your browser. Thankfully, there is a way we can fix this by editing our .htaccess file. The .htaccess is a server configuration file that “tells” the server to behave as per the instructions in the .htaccess file.

Editing your htaccess file

In your WordPress root location, find the htaccess file. (Because it has an (.) it means it is a hidden file so you must enable the “show hidden file” feature). Always make a backup before editing the htaccess file. You can download a copy via FTP, save a backup and edit then upload the modified version. Edit the file directly using; Cpanel from your host account.

In this article, WordPress SEO WordPress plugin is used to make the changes in the htaccess file.

On your WordPress site, navigate to Plugins, click Add New. Search for WordPress SEO by Yoast.

Click Install Now and Click Activate to enable the plugin.

Navigate to SEO, Tools. Click on File editor

In the text editor, it opens the .htaccess file. Paste the code and Save changes

How to Speed up your WordPress

You can copy the below code and paste it into your htaccess file. Once you’ve done that, save your htaccess file and enjoy faster loading speeds.

Adding expires Header

We have given the age of one month to all CSS, javascript and shockwave files. As for icons, they have a one year age, and other static resources have a one month age. For these rules that we have specified to work, we need to have enabled the mod_expires module. By default, most servers have it enabled. Remember, set expiry dates for a year. It’s not recommended you set less than a month or more than a year.

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

Adding cache control headers

Here, you can set a timeline, but it won’t be necessary as you’ve already set expiry dates for the cached resources.

# 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

Disabling the Etag header

The technology used to make the Etag header is very slow hence by disabling it, we are doing our loading speeds big favor. Here we are also using the keep-alive connection. It keeps the current connection alive since opening a new connection takes a longer time.

#Disable Etags
<IfModule mod_headers.c>
   Header unset Etag
   Header set Connection keep-alive
</IfModule>
FileETag None

Deflating compression headers

If we deflate our components, they become smaller hence, loading faster. This method might not work for your case if your server does not have mod_deflate or mod_gzip installed as part of Apache. Ensure you add it below the contents of the htaccess file.

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

Conclusion

It does not matter which method you use to speed up your WordPress site but that your site loads faster and your user experience improves. By the above changes to the .htaccess file, your site speed is improved. You end up boosting SEO ratings.