Browser Caching (Google Pagespeed)


This process, which was considered very important in the past, has become a very important issue by search engines today. It is one of the three most important basic conditions for websites to rank high. Speed, authority and user experience … One of the procedures to be applied for speed is “Browser Caching”. It is also one of the high priority tasks recommended by Google to make your website load faster. Even though Google Rules are open to comment on many topics, speed is one of the rules that are not open to interpretation.

It is one of the main problems of Google Pagespeed or GTmetrix errors that WordPress users suffer from. As I mentioned above, it is very important in terms of SEO and should definitely be at the top of the issues that site administrators should focus on.

How Does Browser Caching Work?

Browser caching with .htaccess is a way to reduce traffic usage, lower server load, and reduce site startup delays. With this technique, it allows you to determine how long web browsers (such as Chrome, Mozilla, Opera) should keep the files and directories on your site in caches.

In order to be more understandable, it is useful to explain the process in real life. When a visitor comes to your website (This may have come by clicking on a search engine or typing your web address directly.) Elements such as codes, CSS, java scripts, and images that make up the page they came from are requested from your server by the user’s browser. The server sends all the elements that make up the page to the browser, and the browser reading them displays your page on the user’s screen. Meanwhile, the browser stores these elements in a temporary folder named Temp on the user’s computer. This process is renewed when the visitor clicks on a link on your site and passes to another page. Here we determine how long the files in this TEMP folder should be kept in the caching process. Once the visitor comes to your site, your browser first looks at the temp folder and only requests elements from the server that are not here or have been changed. So firstly, it fetches the page from the copy of the user’s computer, not the server. Of course, this is true if the user has visited your page before.

This also helps reduce bandwidth consumption by your web host and also reduces the load on the server.

Browser Caching with .htaccess

If you know what a .htaccess file is and how it works, it will be easy to do this. If you don’t know what is .htaccess first? Have a look at my article.

This file on the server is one of the risky files. For this reason, make sure to BACK UP your existing .htaccess file without doing the following.

You need to make a small change to your .htaccess file to adjust how long the elements that make up your pages, such as images and CSS files, should be stored by your visitors’ browsers. You can fix the Browser caching issue by adding the following codes to your .htaccess file.

One more important note, the following codes are for Linux hosting users only.

# Enable GZIP 
<ifmodule mod_deflate.c> 
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript 
BrowserMatch ^Mozilla/4 gzip-only-text/html 
BrowserMatch ^Mozilla/4\.0[678] no-gzip 
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 

# BEGIN Cache-Control Headers
<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header append Cache-Control "public" 
<filesMatch "\.(css)$">
Header append Cache-Control "public"
<filesMatch "\.(js)$">
Header append Cache-Control "private"
<filesMatch "\.(x?html?|php)$">
Header append Cache-Control "private, must-revalidate"

#Customize expires cache start - adjust the period according to your needs

  FileETag MTime Size
  AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
  ExpiresActive On
  ExpiresByType text/html "access 600 seconds"
  ExpiresByType application/xhtml+xml "access 600 seconds"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/javascript "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/javascript "access 1 month"
  ExpiresByType application/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresByType image/jpg "access 1 year"  
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresDefault "access 1 month"

#Expires cache end

The above process is the most effective way of browser caching for WordPress or other websites using an .htaccess file.

If You Are Using CDN or Multiple Servers

Well, if I use CDN and your website is not stored on a server but on different servers located in different corners of the world … A visitor may not be able to access your site from the same server the next time he comes. So when a scanner tries to validate the original component on the server, the tags will not match.

Etags are headers that are usually created using attributes that make the server hosting a site unique.

If you are using CND or multiple servers on your site, you need to add the following code to your .htaccess file. To avoid this confusion, a good solution is to unset Etag tags. You can add the following code to your .htaccess to turn off ETags.

# Disable ETags
<IfModule mod_headers.c>
	Header unset ETag
FileETag Nonedd
Tags: , ,

More Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Latest Posts