Leverage browser caching

Leverage browser caching

Advert

Caching your site

In this tutorial we'll create a Code Snippet that will help you to control Caching your site.
Leverage browser caching

A primary way to speed up your web site to returning visitor is to cache your site in the visitors browse, though it’s not applicable to new visitor but if you site becomes interesting , and the visitors starts to revisit this can become very handy. This browser caching is also recommended by all the tools that you can use to test your performance. Some tell this as Leverage browser caching.

Caching can be done using different ways, caching in browser being the most common and easy way. You can even cache your SQL quarries that you use on your site to a file thus making it faster to load and refreshing the cache when you modify the database, this are using PHP, java script.

But this too wants the client to download the complete files from the server; still the load time remains the same as running a quarry for a server will not take anything more than millisecond’s. Using Gzip compression to compress data is also another way to speed up the web site but this can increase the sever load significantly.

Using htaccess you can cache you files in you clients browser so that the client does not need to download it all the time he visits your site, with a certain time set the browser will automatically revalidate the data if it has changed or not , even you can make the browser to revalidate the data every time client visits.

There are two main reasons that Web caches are used:

  1. reduce latency - Because the request is satisfied from the cache (which is closer to the client) instead of the origin server, it takes less time for it to get the representation and display it. This makes the Web seem more responsive.
  2. reduce network traffic - Because representations are reused, it reduces the amount of bandwidth used by a client. This saves money if the client is paying for traffic, and keeps their bandwidth requirements lower and more manageable.

Kinds of Web Caches

Browser Caches You may have notice a 'cache' setting in modern Web browser (like Internet Explorer, Safari or Mozilla). This lets you set aside a section of your computer's hard disk to store representations that you've seen, just for you. The browser cache works according to fairly simple rules. It will check to make sure that the representations are fresh, usually once a session (that is, the once in the current invocation of the browser).

This cache is especially useful when users hit the 'back' button or click a link to see a page they've just looked at. Also, if you use the same navigation images throughout your site, they'll be served from browsers' caches almost instantaneously. <

Proxy CachesWeb proxy caches work on the same principle, but a much larger scale. Proxies serve hundreds or thousands of users in the same way; large corporations and ISPs often set them up on their firewalls, or as standalone devices.

How Cache works

  1. If the response's headers tell the cache not to keep it, it won't.
  2. If no validator (an ETag or Last-Modified header) is present on a response, it will be considered uncacheable.
  3. If the request is authenticated or secure, it won't be cached.
  4. A cached representation is considered fresh (that is, able to be sent to a client without checking with the origin server) if:
  5. It has an expiry time or other age-controlling header set, and is still within the fresh period.
  6. If a browser cache has already seen the representation, and has been set to check once a session.
  7. If a proxy cache has seen the representation recently, and it was modified relatively long ago.
  8. Fresh representations are served directly from the cache, without checking with the origin server.
  9. If an representation is stale, the origin server will be asked to validate it, or tell the cache whether the copy that it has is still good.
Here in this tutorial we will demonstrate the caching with mod_expires + mod_headers , mod_expires and with mod_headers.

At least one of the 2 modules needs to be built into Apache; although they are included in the distribution, they are not turned on by default. To find out if the modules are enabled in your server, find the httpd binary and run httpd -l; this should print a list of the available modules. The modules we're looking for are mod_expires and mod_headers.

If they aren't available, and you have administrative access, you can recompile Apache to include them. This can be done either by uncommenting the appropriate lines in the Configuration file, or using the -enable-module=expires and -enable-module=headers arguments to configure (1.3 or greater).

mod_expires + mod_headers


# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0
 
# Set up caching on  files (replace ^time^ with a value and ^file extension ^ with an extension )

ExpiresDefault A^time^
Header append Cache-Control "public"


 
# Force no caching for dynamic files

ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
                  
                    

Dont copy and past the code completely into .htaccess, replace the ^time^ with a Numeric value from the table below and ^file extension ^ with a file extension. Do remember to add 'A' before the time value

mod_headers


# Set up caching on  files (replace ^time^ with a value and ^file extension ^ with an extension )
     
Header set Cache-Control "max-age=^time^"
     
 
# NEVER CACHE
     
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
                   
                

Dont copy and past the code completely into .htaccess, replace the ^time^ with a Numeric value from the table below and ^file extension ^ with a file extension.

mod_expires


ExpiresActive On
ExpiresDefault A0
 
# Set up caching on  files (replace ^time^ with a value and ^file extension ^ with an extension )

ExpiresDefault A^time^

          
                

Dont copy and past the code completely into .htaccess, replace the ^time^ with a Numeric value from the table below and ^file extension ^ with a file extension. Do remember to add 'A' before the time value

.htaccess Time code


# TIME CODE SHEET
#      300   5 MIN
#      600  10 MIN
#      900  15 MIN
#     1800  30 MIN
#     2700  45 MIN
#
#     3600   1 HR
#     7200   2 HR
#    10800   3 HR
#    14400   4 HR
#    18000   5 HR
#    36000  10 HR
#    39600  11 HR
#    43200  12 HR
#    46800  13 HR
#    50400  14 HR
#    54000  15 HR
#    86400  24 HR
#
#    86400   1 DAY
#   172800   2 DAY
#   259200   3 DAY
#   345600   4 DAY
#   432000   5 DAY
#   518400   6 DAY
#   604800   7 DAY
#
#   604800   1 WEEK
#  1209600   2 WEEK
#  1814400   3 WEEK
#  2419200   4 WEEK
#
#  2419200   1 MONTH
#  4838400   2 MONTH
#  7257600   3 MONTH
#  9676800   4 MONTH
# 12096000   5 MONTH

# 14515200   6 MONTH
# 16934400   7 MONTH
# 19353600   8 MONTH
# 21772800   9 MONTH
# 24192000  10 MONTH
# 26611200  11 MONTH
# 29030400  12 MONTH               
               

Caching with PHP

This will create a Cache-Control header, as well as an Expires header three days in the future:



 

Remember that the Header() function MUST come before any other output.

Comments

Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain in name field, it might end up as a Spam. Thanks for reading.

Last 5 Articles

All Articles >

  1. Development Environment for Django in Docker Compose

     
  2. How Online Reviews Impact Local SEO

     
  3. 3 Money-Saving Tips For Your Company

     
  4. Domain Authority

     
  5. Public Endpoint in Django Rest Framework

     

News Letter

Subscribe to our email newsletter for useful tips and valuable resources, sent out every new article release.