Optimization - Leveraging Browser cache not working for .js and .png files

Question

I'm optimizing a website and I can't leverage browser caching for .js and .png files.

My .htaccess looks like this:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf

<ifModule mod_expires>
    ExpiresActive On
    ExpiresDefault "access plus 5 days"
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 60 days"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 1 year"
    ExpiresByType text/x-javascript "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType application/x-javascript "access plus 1 year"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
    <FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$">
        Header set Last-Modified "Mon, 31 Aug 2015 00:00:00 GMT"
    </FilesMatch>
</ifModule>

Caching seems to work with other files but most analyzing tools show error messages like this:

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:

/css/images/skin/chebuoni1.jpg
/images/logo-footer-mobile.png
/images/logo-footer.png
/js/cheSlider.js
/js/home-modal.js
/js/home.js
/js/jquery.bxslider.js
/js/menu.js
/js/slider-hover.js
/analytics.js
/ga.js
/js/browser-fix.js
/js/click-hover.js
/js/cookiechoices.js
/js/jquery-1.8.2.min.js
/js/lazysizes.min.js
js/mobile-detect.js
js/search.js

I tried adding and unsetting the Last-Modified header via .htaccess and various .htaccess configurations but nothing seems to happen. I have to mention my hosting provider is using CloudFlare on a virtual machine. What am I doing wrong?

Resources are being cached correctly in my browser but the analysis tools (tools.pingdom.com and google pagespeed insights) are telling my they re not

What are the HTTP response headers you see in the browser for these resources? (Add this information to your question.) — MrWhite, Sep 15 '16 at 23:15
Do you need to direct it that "image/png" represents png files, or is that mapping built in? Suggest giving us the curl -i (ie show header) output for a type where headers are set correctly, and one where they're not. — Tim, Sep 15 '16 at 23:57

Optimization - Leveraging Browser cache not working for .js and .png files

0 Answers0