Leverage browser cache: Expiration for CSS & JS
Hi,
I'm trying to address issues found via Google's PageSpeed.
I was able to address image expiration via htaccess, but I'm at a loss when it comes to resolving CSS/JS issues.
Here is what google complained about:
Quote:
SHOULD FIX:
Leverage browser caching
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.
/jscript/back_to_top.min.js (5 minutes)
/jscript/categories_css.js (5 minutes)
/jscript/cbpFWTabs.js (5 minutes)
/jscript/css_browser_selector.js (5 minutes)
/jscript/jquery.flexslider.js (5 minutes)
/jscript/jquery.slimmenu.min.js (5 minutes)
/jscript/jscript_imagehover.js (5 minutes)
/css/responsive.css (60 minutes)
/css/responsive_mobile.css (60 minutes)
/css/style_imagehover.css (60 minutes)
/css/stylesheet.css (60 minutes)
/stylesheet_categories_css.css (60 minutes)
/css/stylesheet_dotline.css (60 minutes)
/css/stylesheet_flex.css (60 minutes)
/css/stylesheet_manufacturers_all.css (60 minutes)
/css/stylesheet_zen_colorbox.css (60 minutes)
•
http://www.google-analytics.com/plugins/ua/ec.js (60 minutes)
•
http://www.google-analytics.com/analytics.js (2 hours)
Funny that they complain about their own js.
Anyway, I'm unclear about what to do. To me, 60 minutes seems very short for CSS. And I'm 100% clueless about what a reasonable JS expiration should be. And I can't for the life of me figure out where the expirations for these files live. It must be central because all CSS and all JS have the same setting.
Can somebody explain what I'm supposed to do about this?
Thanks!
Re: Leverage browser cache: Expiration for CSS & JS
The default /includes/.htaccess already sets cache expirations for multiple file types:
https://github.com/zencart/zencart/b...access#L87-L99
Re: Leverage browser cache: Expiration for CSS & JS
Ah, I see. Double checked my own includes htaccess and found that it is there.
Quote:
##################
## Optional improvements
## Requires mod_expires to be enabled within Apache
##################
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault A300
ExpiresByType application/x-javascript A3600
ExpiresByType text/css A3600
ExpiresByType image/gif A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A300
ExpiresByType image/x-icon A86400
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
</ifmodule>
Further, I have confirmed that mod_expires is enabled within Apache. Earlier I added expiration to htaccess inside bmz_cache to fix image expiration issue.
So if everything is in place and working, why is google complaining?
Re: Leverage browser cache: Expiration for CSS & JS
I dunno.
But I do know that Google isn't always right.
Re: Leverage browser cache: Expiration for CSS & JS
Also for some of the reported items, remember the number that is on each of those ExpiresByType lines relates to seconds, so some of the items expire sooner than desired by their report. don't know why others aren't reported as good to go.
Re: Leverage browser cache: Expiration for CSS & JS
These days, the Industry Standard expiration time for CSS, JS and similar type files is 1 month. For any type of image it is 1 year. As you cannot set or change expires headers for files or content you are loading from a different site, if Google wants to complain about its own settings then so be it.
The following is just a suggestion but you may be pleasantly suprized at how will it works; faster load page time on revisits and improved site security.
Delete the following within: /includes/.htaccess
Code:
<IfModule mod_headers.c>
Header unset Pragma
FileETag None
Header unset ETag
#Header set Cache-Control "no-transform"
<FilesMatch "(?i).*\.(ico|jpe?g|gif|webp|png|otf|swf|flv|ttf|woff|eot|svg)$">
Header set Cache-control "max-age=864000, public, must-revalidate"
Header unset Last-Modified
</FilesMatch>
<FilesMatch "(?i).*\.(html|htm|xml|txt|xsl)$">
Header set Cache-control "max-age=7200, must-revalidate"
</FilesMatch>
</IfModule>
Add the following stating at the very top of: public_html/.htaccess
Code:
#############################
## General Settings
Options +SymLinksIfOwnerMatch -FollowSymlinks -Indexes
RewriteEngine ON
# Define the default Character Set for Browsers
AddDefaultCharset utf-8
#############################
## Header Settings
<IfModule mod_headers.c>
# Set the default language of your site
Header set Content-Language "en-CA"
# Ensure the most current site files are being provided
Header set Cache-Control "proxy-revalidate, stale-while-revalidate=86400, stale-if-error=259200"
# Prevents seeing information not needed to see
Header unset X-Powered-By
# Protection against PHP or Javascript code placed within images and other misinterpretations of your resources.
Header set X-Content-Type-Options "nosniff"
# Protection against Clickjacking
Header set X-Frame-Options "SameOrigin"
# Protection against XSS (Cross-Site Scripting)
Header set X-XSS-Protection "1; mode=block"
# Protection against abuse of Adobe Flash / Silverlight / PDF files
Header set X-Permitted-Cross-Domain-Policies "Master-Only"
</IfModule>
#############################
## EXPIRES CACHING
# Note: You cannot set expires headers for files or content you are loading from a different site.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 day"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
# 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"
</IfModule>
If any of the above code is duplicated further down in your .htaccess file, remove it.
Legend
## General Settings - optional but good practice to place at the very top
## Header Settings - optional but does provide very good, basic site protection
## EXPIRES CACHING - will solve most if not all, caching problems
You can verify if the above makes any difference by using https://gtmetrix.com/ before changes and after. Make sure to save the URL of the first result for comparison with the second result.
Re: Leverage browser cache: Expiration for CSS & JS
Quote:
Originally Posted by
Website Rob
These days, the Industry Standard expiration time for CSS, JS and similar type files is 1 month. For any type of image it is 1 year. As you cannot set or change expires headers for files or content you are loading from a different site, if Google wants to complain about its own settings then so be it.
The following is just a suggestion but you may be pleasantly suprized at how will it works; faster load page time on revisits and improved site security.
Delete the following within: /includes/.htaccess
Code:
<IfModule mod_headers.c>
Header unset Pragma
FileETag None
Header unset ETag
#Header set Cache-Control "no-transform"
<FilesMatch "(?i).*\.(ico|jpe?g|gif|webp|png|otf|swf|flv|ttf|woff|eot|svg)$">
Header set Cache-control "max-age=864000, public, must-revalidate"
Header unset Last-Modified
</FilesMatch>
<FilesMatch "(?i).*\.(html|htm|xml|txt|xsl)$">
Header set Cache-control "max-age=7200, must-revalidate"
</FilesMatch>
</IfModule>
Add the following stating at the very top of: public_html/.htaccess
Code:
#############################
## General Settings
Options +SymLinksIfOwnerMatch -FollowSymlinks -Indexes
RewriteEngine ON
# Define the default Character Set for Browsers
AddDefaultCharset utf-8
#############################
## Header Settings
<IfModule mod_headers.c>
# Set the default language of your site
Header set Content-Language "en-CA"
# Ensure the most current site files are being provided
Header set Cache-Control "proxy-revalidate, stale-while-revalidate=86400, stale-if-error=259200"
# Prevents seeing information not needed to see
Header unset X-Powered-By
# Protection against PHP or Javascript code placed within images and other misinterpretations of your resources.
Header set X-Content-Type-Options "nosniff"
# Protection against Clickjacking
Header set X-Frame-Options "SameOrigin"
# Protection against XSS (Cross-Site Scripting)
Header set X-XSS-Protection "1; mode=block"
# Protection against abuse of Adobe Flash / Silverlight / PDF files
Header set X-Permitted-Cross-Domain-Policies "Master-Only"
</IfModule>
#############################
## EXPIRES CACHING
# Note: You cannot set expires headers for files or content you are loading from a different site.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 day"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
# 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"
</IfModule>
If any of the above code is duplicated further down in your .htaccess file, remove it.
Legend
## General Settings - optional but good practice to place at the very top
## Header Settings - optional but does provide very good, basic site protection
## EXPIRES CACHING - will solve most if not all, caching problems
You can verify if the above makes any difference by using
https://gtmetrix.com/ before changes and after. Make sure to save the URL of the first result for comparison with the second result.
Sounds good but I do not have a public_html/.htaccess
In fact I do not even have a public_html folder.
List of my .htacess files below
Re: Leverage browser cache: Expiration for CSS & JS
Quote:
Originally Posted by
marton_1
Sounds good but I do not have a public_html/.htaccess
In fact I do not even have a public_html folder.
List of my .htacess files below
You can create a new .htaccess file in the root of your site
Re: Leverage browser cache: Expiration for CSS & JS
Thanks for the suggestion!
Re: Leverage browser cache: Expiration for CSS & JS
PAGESPEED.
While Google's pagespeed checker is commonly used, a far better tool is at https://gtmetrix.com .
There is another that's useful: https://tools.pingdom.com/
