Leverage browser cache: Expiration for CSS & JS

[Feznizzle]

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:

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!

[DrByte]

The default /includes/.htaccess already sets cache expirations for multiple file types:
https://github.com/zencart/zencart/b...access#L87-L99

[Feznizzle]

Ah, I see. Double checked my own includes htaccess and found that it is there.

##################
## 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?

[DrByte]

I dunno.

But I do know that Google isn't always right.

[mc12345678]

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.

[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

<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

#############################
##  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.

[marton_1]

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

<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

#############################
##  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

[Design75]

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

[marton_1]

Thanks for the suggestion!

[schoolboy]

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/