I'm having an error on GTMetirx: Leverage browser caching for the following cacheable resources:
I have to leverage browser caching for png, jpg, woff2, gif, gzip, and js files but this code doesn't work:
## EXPIRES HEADER CACHING ##
<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 image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##
But when I added the code and try to see if the error will be fixed, it's still showing the same error, can anyone help?
I guess it's already resolved since all this time passed...
But you can first check that mod_expires is enabled on your server.
Second you can check that your .htaccess is not overrided by a virtual host conf file. If you use virtual host for your domain then check in your virtual host config file that you don't have a parent directory (of the one with your expires header) with "Allowoverride All". This Allowoverride All means that the conf file override anything in the .htaccess file. Set Allowoverride to None or put your expires header in your conf file in the Directory section.
There are other ways to resolve this problem, these two points are not an exhaustive list. It's just how I solved this problem myself today. Hope it will help somebody.
Related
I am testing my website with gtmetrix and google speed both of them suggesting me to set expire timing on my assets including css, javascript, images etc. base on suggestions of those websites I added code below to my .htaccess file:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
I tried 2 ways to add code above to my .htaccess file:
first I add it to my existed code inside <IfModule
mod_rewrite.c> result was same as before
second i add it as separate code out of <IfModule
mod_rewrite.c> and still i get error to set my expire timing.
Questions
What Is correct way to add expire timing to my assets?
How do I use cookie-free domains on my stylesheets and JavaScript files as it remanded to me?
I am using webpagetest to know my website performance.I am found issue with Cache static content i.e. "Leverage browser caching of static assets: 88/100"
FAILED - (No max-age or expires)
How can i fix the issue ?
My htaccess looks like:
# compress text, html, javascript, css, xml:
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 image/svg+xml
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/gif
# Or, compress certain file types by extension:
<ifModule mod_deflate.c>
<filesMatch ".(js|css|html|htm|php|jpg|jpeg|woff|eot)$">
SetOutputFilter DEFLATE
</FilesMatch>
</ifModule>
# Direct Apache to send all HTML output to the mod_pagespeed output handler.
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
Thanks
In addition to the deflate settings, you want to add some expiration control to manage the browser caching. I've used the following with good results. Depending on the specifics of the files on your site you might also want to add audio and video files.
From memory, webpagetest likes it when you set the expiry to at least 1 month so you might want to also up tweak the 1 week settings
Good luck!
################
# Enable expiration control
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"
# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
########## End - Optimal expiration time
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "now plus 0 second"
<FilesMatch "\.(css|js|png|bmp|ico|htm|gff|html|js|jpg|jpeg|gif|gcf)$">
FileETag MTime Size
ExpiresDefault "access plus 1 month"
</FilesMatch>
here is what I have in .htaccess after changing in caches control on my hosting. But even I changed those, it doesn't seem to have any good effect when I run webpagetest.org. I need to wait till the previous caches expire and run it again. It work. hurray!
. here I found a helpful link.
http://httpd.apache.org/docs/current/mod/mod_expires.html
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
A friend of mine built me a htaccess file and I'm way too much of a noobie at the moment to be able to read and know that it does (exactly). All I know is that it's supposed to do gzip compression and cache my site. When I do a speed test, it says that "Compress gzip" and "Use browser caching", which I was told the htaccess file is supposed to do. It's for a basic HTML website, nothing crazy but I just wanted to clean up some speed issues. Anyway, here is the code for it. If anyone can take a look at it and tell me what's wrong, I would truly appreciate it. If you need more information, I will be happy to post it. Thanks guys!
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x- javascript application/javascript
</ifmodule>
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|xml|txt|css|js)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/html "access 2 day"
ExpiresByType text/css "access 2 day"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/plain "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 2 days"
</IfModule>
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
Check if the modules (deflate, gzip, etc) are enabled in your httpd.conf file.
I'm using a CentOS 5 32bit and I've just scanned my site on Google for page speed and it gave me the following:
"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."
Can someone please let me know how can I enable this within my Apache server?
First ensure that mod_expires has been loaded then ,you can define in httpd.conf file or inside VirtualHost following:
<IfModule mod_expires.c>
FileETag MTime Size
ExpiresActive on
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 6 month"
ExpiresByType image/ico "access plus 6 month"
</IfModule>
Hope this helps !
I want to speed up my website. I was wondering I've done it correctly syntax wise.
<IfModule mod_expires.c>
Header unset Pragma
FileETag None
Header unset ETag
ExpiresActive On
ExpiresDefault "access plus 1 year"
##### DYNAMIC PAGES
<FilesMatch "\\.(ast|php)$">
ExpiresDefault A7200
Header set Cache-Control "public, max-age=3600, must-revalidate"
</FilesMatch>
##### STATIC FILES
<FilesMatch "(?i)^.*\.(ico|png|gif|jpg)$">
Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "public, no-transform"
</FilesMatch>
<FilesMatch "\\.(css|js|xml)$">
Header set Cache-Control "public, max-age=604800, must-revalidate"
</FilesMatch>
</IfModule>
Do not cache asp or php or any dynamic page! This will cause unpredictable result.
Here's an example, say you have a page called catalog.php that renders the product catalog with uptodate price and stock availability. Since you have set it to cache the result on browser for an hour, it will show stale data on browser for an hour!
Dynamic pages should never be cached wholesale like this. You need to put individual caching logic on pages based on how fresh the data should be returned from the page.
For static pages though you can do such wholesale expiration. However, be careful that if you set css and js files to expire after one year, a user who visits your site today will not fetch latest js and css from webserver for many days or months. If you make changes to the scripts or style, they will not see the changes unless you use some unique querystring to change the url of the files manually.
I have discussed an approach here that works for ASP.NET only. But it tells you about the dos and don'ts.
http://omaralzabir.com/automatic-javascript-css-versioning-to-refresh-browser-cache/
You can also read my 7 tips for making best use of caching that explains all such approaches and pros and cons of each:
http://omaralzabir.com/making_best_use_of_cache_for_high_performance_website/
Let me know if this helps.
I am aware the question is from 2011 but even then, Pragma was old. I think it is safe to stop using it.
We rarely need to set 'public' or must-revalidate unless your trying to support really old browsers and proxies like pre IEv4 and stuff.
If your going to cache your php you still need to do some work in your php code too.
Unsetting your Last-Modified for images and stuff is essentially causing a 'never cache' situation for those files until the predetermined date of the static (at the time) future date. I would think you want to cache static files X days in future always and not unset last modified.
Your htaccess file can be made to be much simpler. Borrowing some snippets from H5BP we can modernize it a bit to become:
## set some mime types to their proper types
AddType application/javascript js jsonp
AddType application/json json
AddType application/xml rss atom xml rdf
AddType image/x-icon ico
<IfModule mod_deflate.c>
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
# and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines as
# `AddOutputFilterByType` is still in the core directives)
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Feed
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
# CSS and JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
</IfModule>
# ----------------------------------------------------------------------
# Prevent mobile network providers from modifying your site
# ----------------------------------------------------------------------
# The following header prevents modification of your code over 3G on some
# European providers.
# This is the official 'bypass' suggested by O2 in the UK.
<IfModule mod_headers.c>
Header set Cache-Control "no-transform"
</IfModule>
# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
# Since we're sending far-future expires, we don't need ETags for
# static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None
Google has a website that will help you analyze your site. There are a number of tools and helpful analysis available with this tool.
https://developers.google.com/speed/