Pingdom.com test and Google Page Speed Insights give me the same Browser Leverage Cache failure.
I use this in .htaccess:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
</IfModule>
Though, If I check with Developer Network Tools in Chrome, I see the results I expect.
Example:
Google Test says that both files "jquery-ui.css" and "home.css" are set to expire in 60 minutes.
But, when I check using Chromes Developer Tools in the browser it displays that they expire in one month as they are supposed to.
Could there be a reason these tests can't read my site properly?
It seems my server was using "mod_deflate" (Apache). This must have been tricking the testing sites.
What fixed it was changing my .htaccess calls to:
# mod_deflate
# 1 YEAR
ExpiresActive On
<FilesMatch "\.(otf|ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
ExpiresDefault "access plus 1 years"
Header unset Last-Modified
Header unset ETag
SetOutputFilter DEFLATE
</FilesMatch>
# 1 MONTHS
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2419200, public"
ExpiresDefault "access plus 1 month"
SetOutputFilter DEFLATE
</FilesMatch>
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=604800, public"
ExpiresDefault "access plus 1 month"
SetOutputFilter DEFLATE
</FilesMatch>
# 30 MIN
<FilesMatch "\.(html|htm|php)$">
SetOutputFilter DEFLATE
</FilesMatch>
Related
I have a website. I am trying to optimize my site based on the feedback I've received from Google's Website Speed Test. In my scores, I have two things I'm supposed to fix:
Leverage browser caching
Optimize images
At this time, I'm most confused about the second option. My site only has one image (that I know of) and I feel like its optimized. Is there a way I can see what images Google's test thinks are not optimized? I'm just wondering if there are some images in a third-party library that aren't optimized. I can't think of what though. For that reason, I'm really trying to figure out how I can see specifically what image(s) are not optimized.
The best thing to do when trying to Optimise Images is to use Google's PageSpeed Insights. They offer you an option to download optimised image, JavaScript, and CSS resources for the page.
This will automatically download all images that need optimising to Google's level of optimisation.
Example Below:
In regards to your Leverage Browser Caching, all you need to use in your .htaccess file is:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
## IMAGES ##
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"
## CSS ##
ExpiresByType text/css "access plus 1 month"
## HTML ##
ExpiresByType text/html "access plus 1 month"
## JAVASCRIPT ##
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/json "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresDefault "access plus 1 month"
</ifModule>
and for external JavaScript files, see my answer to this question: Leverage browser caching for 3rd party JS.
Let me first mention that I have done some digging but can't seem to find a proper answer to what I'll looking for.
I'm working on a site where I am using a few external resources:
Google Analytics (//www.google-analytics.com/analytics.js)
Latest jQuery version (http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js)
Google Fonts (http://fonts.googleapis.com/css?family=Lato:400,300)
Use a Content Delivery Network (CDN)
I'm getting an "F" grade on "Use a Content Delivery Network (CDN)". A different SO Post links to the YSlow FAQ (direct link) but this seems to indicate that I need to define my CDN's on my browser, which seems to be a quick fix for me, but this does not solve the problem on other browsers and/or devices.
Add Expires headers
As for the "Add Expires headers" grade,I get an E. Problem is, this is what I'm getting:
There are 3 static components without a far-future expiration date.
(2014/2/26) http://fonts.googleapis.com/css?...
(2014/2/26) http://www.google-analytics.com/analytics.js
(2014/2/26) http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
How would I go in order to correct this? My local files are all taken care of by my .htaccess as shown, here:
AddType image/x-icon .ico
ExpiresActive On
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 text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/ico "access plus 1 year"
ExpiresDefault "access plus 7 days"
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">
# access plus 1 year
Header set Cache-Control "max-age=31536000"
</FilesMatch>
This SO post seems to suggest it is either impossible, or I call upon a local script where I use my bandwidth to load (and cache) the required external files.
So, with these things in mind, here is what I'm looking at:
External ressources should be CDN's, but YSlow reads my local preferences which will vary from user to user, so I need an alternative to the about:config solution proposed by the YSlow official site.
Expires are set by the server where the file is, so I don't seem to have access to defining it's expiration values. So, from what I gather, I could carry these files onto my server or use a local PHP file and cache it from said PHP file located my server, but this doesn't seem optimal. Is there a way to go around this?
Short answer:
You can't control much when you're loading resources from external servers like that, but it may still be okay for your site. When using a tool like YSlow it's important to not get caught up into an "A" grade for everything. It's best to understand the hints the tool is giving you, and make decisions accordingly.
Longer answers:
Content Delivery Network
YSlow will report lower grades for any domains it doesn't recognize as a CDN. You can add CDN hostnames, then it will reflect a better grade. I would add fonts.googleapis.com and ajax.googleapis.com because both behave like CDNs. Think of it as saving a preference in your copy of YSlow. Adding the domains here doesn't actually change your performance, it just improves your score.
Expires Headers
You can't control expires headers for content you're loading from a different site. Options you could consider:
Continue using external sites; in this case these are pretty well behaved and your performance will probably be pretty good. Just ignore the low grade that YSlow is giving you.
Host your fonts and jQuery files locally, then set far-futures expires headers as you've shown in your .htaccess. This would give you a better YSlow grade, but actual performance may be worse if your server is slower than the CDNs. (see this SO question)
Use external sites but adjust your URL; in the case of jQuery, if you specify on more version level (1.8.0 instead of 1.8) you will get a far future expires header (see this SO question)
I have three sub-domains namely, a.xyz.com, b.xyz.com, c.xyz.com. Now, I have about 20 ajax request to be made on body onload of a.xyz.com.
So, I thought of distributing 20 requests equally among the three domains above. I tried it through this piece of snippet in .htaccess of b.xyz.com and c.xyz.com. However, the request from a.xyz.com to any other sub-domain is still getting dumped.
<IfModule mod_headers.c>
<FilesMatch "\.(php)$">
Header set Access-Control-Allow-Origin: http://a.xyz.com,http://b.xyz.com,http://b.xyz.com
Header set Access-Control-Allow-Methods : POST,GET,OPTIONS
</FilesMatch>
</IfModule>
I have placed the above .htaccess file in my subdomains b.xyz.com and c.xyz.com.
So, can anyone predict whats wrong in my approach ?
Thanks !
Try this to allow cross domain on all xyz.com subdomains:
SetEnvIf Origin "http(s)?://(.+\.)?(xyz\.com)$" ORIGIN_DOMAIN=$0
<FilesMatch "\.(php)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
Header set Access-Control-Allow-Methods "POST,GET,OPTIONS"
</IfModule>
</FilesMatch>
I have a great .htaccess code which really improve my page speed.
This one below I below I don't really know much but from looking at it is like to compress or something not really sure
<FilesMatch ".(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
This one is really great which set the Expire header for everything to 10 years and text/html to one day
ExpiresActive On
ExpiresDefault "access plus 10 years"
ExpiresByType text/html "access plus 1 day"
So This one is use to unset ETag which is one of the requirement rules of YSlow
Header unset ETag
FileETag None
Now come to my question that I have problem with.
I can't really use w3 Total cache with my Wordpress blog because it gives me some random issue like only show one ramdom old post to my home page and to solve that is to delete the cache and then after a day it will happen again.
So I can't rely on that plugin, but with my 3 codes that I added in my .htaccess is really good with one exception and I don't know really how to fix that.
say for example I visit my site http://applesiam.com this morning and during the day I have 3 new posts. If I don't really do hard reload page I will still see the one from morning.
So this is really make me confuse.
What should I change to not to cache the actual home page so it will be updated except images and the rest.
I'm not sure if this is going to work but I found this which is going to solve the behaviour of the browser cache the file that update dynamically
# Force no caching for dynamic files
<filesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</filesMatch>
I have a page index.php which depending on the arguments provided generates different output.
Using mod_rewrite i have those files a a.htm, b.htm and c.htm .
Now, i want these particular 4 Files (or URLs actually) to be cached locally,
for that i have tried
<FilesMatch "(a\.htm|b\.htm|c\.htm)$">
FileETag None
Header set Cache-Control "max-age=7200, public, must-revalidate"
</FilesMatch>
But it doesn't work.
how do we go about this issue ?
RewriteEngine on
RewriteRule index.htm index.php
<FilesMatch "index.htm">
FileETag None
Header set Cache-Control "max-age=7200, public, must-revalidate"
</FilesMatch>
This is a sneak peak of what i have right now. But in the long run there will be lots of files and rewritten url's. so i want to add cache headers via htaccess . hope it makes sense !