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.
Related
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>
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)
So I was reading in the joomla wiki but could not find any further details than general talk.
So what I basically want to change is what is being loaded. For the simple main page of my blog joomla loads a a truckload of files, and a a big part is not cached. I want to introduce a caching mechanism and remove the things I am sure I don't need.
So what I in detail want to know is where is:
<jdoc:include type="head"/>
implemented?
If a tool exists to realize the caching in a easier fashion than actually writing it myself, i'd be very thankful as well. I am talking about caching pictures, css and javascript files by setting expire to in one year. Afterwards invalidating the cached files by adding a version number to the request string.
I am citing RedEye from the joomla forums:
"The file is in /libraries/joomla/document/html/renderer/head.php
But don't change this file, make an override. Copy it somewhere (your template folder for example) and include the file in your template index.php"
I'll have a go at this as soon as I finished what I started in the meantime
I find the JCH Optimize plugin works really well in combining, minimizing, and caching JavaScript and CSS files. There's a free and paid version of it. You can have it just cache the main Joomla core and template files, or you can have it do some or all of the extensions that you have in your install too. You can exclude certain files if you run into a problem. You may have to play with the plugin order and put this one towards the bottom of the list so that it loads later and grabs most of the files to optimize.
For images: If you're using an Apache web server, you can add ExpiresByType rules in the .htaccess file or httpd.conf or a conf.d file. I wouldn't include the css and js files here because I would let JCH Optimize handle them. Most of my sites have changing content so I don't typically set that very far in the future. Here's some sample code you could use.
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive - covers html, etc
ExpiresDefault "access plus 3 minutes"
# 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"
</IfModule>
For more reading, see the Apache docs on it.
Finally, jQuery can be sourced from Google using another handy free extension called jQuery Easy. You can even set it to load jQuery securely (https). Sorry, I don't have enough points to post a link.
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>
In my country internet speed is very low thus web developers are sharp in minimizing sent data through http.
I have website with same files in all pages such as css,jquery,javascript,... I need to load those files once for all pages. I use ajax in form submitation and other actions but when a page going to redirect speed is very low.
I think to use ajax in page navigation but there is a problem with ajax loaded javascripts in all pages.
thanks
You want this: http://code.google.com/p/minify/
Also, follow these best practices to speed up your site: http://code.google.com/speed/page-speed/docs/rules_intro.html
If you are hosting on apache, you could place .htaccess file in your webroot, which sets the expiration date to far future values. The disadvantage is, that you need to use version control if you change your JS or CSS.
This is .htaccess content:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
</IfModule>
Your CSS and JS could be linked like this:
<script type="text/javascript" src="scripts/js/jquery.1.7.0.min.js"></script>
<link rel="stylesheet" media="screen" href="scripts/css/styles-2011-11-03.css" />
Everytime you make changes to your CSS or jquery version update the filename.
If you would like to speed up your whole site alot, take a look at the great html5boilerplate and download Firefox/Chrome Plugins yslow and google pagespeed (if you have access to that).