For several days, I was having issues . I tried all I could do to make my page load faster. Google has this rule that my page must load in 2 seconds to rank higher. This looks insurmountable. Believe me all the Plugins in WordPress store could not help me out.
I later discovered this code that allows you to make use of Browser caching in order to improve your page loading speed.
You will need to add this code to your .htcaccess on your server. Once you do that, it will improve your page loading speed and rank higher in search engines as well.
I will advice that you do your background
Here is the code:
EXPIRES CACHING ##
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
## EXPIRES CACHING ##
How cache-control works
Let’s take the above code line by line.
# 1 Month for most static assets
The above line is just a note. It does not do anything except notate what we are doing. The .htaccess file ignores lines that start with the character #. This note is recommended as you may have several different sets of these as your caching solution grows.
The above line is saying that “if the file is one of these types, then we will do something to it…
The important part of this line is to notice that there are different types of files listed (css, js, jpeg, png, etc.) and that the caching instructions that follow will apply to those file types. As an example, if you did not want your jpg files to be cached for this amount of time you could delete “jpg” from this line or if you wanted to add html to this you could just add “html” to this line.
Header set Cache-Control “max-age=2592000, public”
The above line is where the actual headers are inserted and the values given.
- The “Header set Cache-Control” part is setting a header.
- The “max-age=2592000” part is stating how long it should be cached (using seconds). In this case we are caching for one month which is “2592000” seconds.
- The “public” part is stating that this is public (which is good if you want it to be cached).
The above line is closing the statement and ends the block of code.
Common caching issue
If you list your html and images to be cached for one year or some other long time period, remember that this can mean if you make a change to your pages they may not be seen by all users. This is because the users will look to cached files rather than the live ones. If you have file that you tweak occasionally (example – a CSS file) you can overcome the cache issue by using URL fingerprinting.
URL fingerprinting in caching
Getting a fresh (not cached) file resource is possible by having a unique name. An example would be if our css file was named “main.css” we could name it “main_1.css” instead. The next time we change it we can call it “main_2.css”. This is useful for files that change occasionally.
Please use with caution . It is likely to trigger error. I am just saying that because I am not 100 percent sure of myself. I am not a Programmer. Do not blame me for any error experienced.
If you enjoy our article, sign up to get our next article in your inbox. You need to confirm your subscription by clicking on the link sent to your email. You can check the spam folder for it.
Add us to your mailing list to receive directly from us. Thanks.