Leverage Browser Caching for Images, CSS and JS

Gzip is a method of compressing files, i.e. making them smaller. High-quality pages may have size 150Kb or more. As files with large size take time to get downloaded so it delays loading of the page. So the solution to this is to just compress the files and make it small. Smaller files load faster so the loading time of page decreases and thus speed is boosted.

When a page is visited by a user, the elements of the page like CSS, Js, logo and much more gets stored in the temporary memory or in the cache of the hard drive. This is done so that when next time the page is visited then the browser is able to load that page without sending requests for the HTTP elements to show the page.

Set Up

When someone visits your website then their browser downloads the HTML, CSS, Js, PDF’s, images and other static content and it takes time to do so. So when these static contents get saved in the cache memory, then the loading time of website on a subsequent visit is less in comparison to the loading time of 1st visit.

So, enabling cache decreases the loading time of the website on a subsequent visit.

Points to be kept in mind while setting browsing cache:

Cache of the static resources can be set to at least for a week. Cache of the widgets, ads should be set to at least 1 day and it can be increased as required. For resources like CSS and JS files, images, PDF’s cache should be set to at least 1 week and more you increase the cache time of these resources the better it will be for the page loading speed [can be done for 1 year].

Note: – Don’t violate the RFC guidelines by setting any cache more than 1 year.

Before you start using Expires you need to disable E Tags header. E-Tags is a technology which is slow and creates problems. It also degrades Y Slow score.

Steps to Enable Browser Cache with Htaccess

Step 1: Code to disable E-Tags

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>
FileETag None

Step 2: Enable Browser Cache (For apache user)

# Serve resources with far-future expires headers.


    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS
    ExpiresByType text/css                              "access plus 1 year"

  # Data interchange
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/schema+json               "access plus 0 seconds"
    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!) and cursor images
    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"
    ExpiresByType text/javascript                       "access plus 1 year"
  # Manifest files
    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media files
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/bmp                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
    ExpiresByType image/webp                            "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

  # Web fonts
    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType font/eot                              "access plus 1 month"

    # OpenType
    ExpiresByType font/opentype                         "access plus 1 month"

    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 1 month"

    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/x-font-woff               "access plus 1 month"
    ExpiresByType font/woff                             "access plus 1 month"

    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 1 month"

  # Other
    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"

In The above code, every file type is provided a separate caching code and the timing of caching specific file can be changed according to the need.