How to Leverage Browser Caching .htaccess

Hi I have just tested my site with "Google PageSpeed Insights" and it says that I have "Leverage Browser Caching" issue but how to enable it?

Quote:Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Buscar amigos

Find

Reply

Code:

<IfModule mod_expires.c>
    ExpiresActive On
    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 application/pdf "access 1 month"
    ExpiresByType application/javascript "access 1 week"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 2 days"

    </IfModule>

www.AdminEmpire.com
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.

Find

Reply

You can use code suggested by Chod or your can set this up in your hosting control panel. Most hosting have Browser Caching settings!

Conocer gente

Find

Reply

Thanks Chod. One question I see some options are set to expire in 1 year, what will happen if I change something during that year will it loads the new code or will still load the old one?

Buscar amigos

Find

Reply

The whole point of Leverage Browser Caching is to cache headers for static content and not to apply the cache rules to every request.
Images, CSS and JavaScript are static content so we need to cache it but HTML is not so we should not cache HTML unless you are using static HTML code however most of the sites don't have static HTML.
Anyway add these rules to your .htaccess file
For a website that has a static HTML
Change

Code:

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

to

Code:

# HTML
ExpiresByType text/html "access plus 1 month"

Code:

<IfModule mod_expires.c>

ExpiresActive on
ExpiresDefault "access plus 1 month"

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

# Data interchange
ExpiresByType application/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/x-icon "access plus 1 week"

# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 month"

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

# JavaScript
ExpiresByType application/javascript "access plus 1 year"

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

# Media
ExpiresByType audio/ogg "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 video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"

# Web fonts
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"

</IfModule>

Buscar pareja

Find

Reply

You have to be careful with using "Leverage Browser Caching" because if you don't set it up correctly your site will look broken!

ligar amigos

Find

Reply

You don't really need to use .htaccess file most website hosting has a specific tool for that called "Web Cache Control Tool" I use Ipage hosting!

Conocer gente

Find

Reply