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