Page 1 of 2

Expires Headers / Leverage Browser Caching

Posted: Tue Mar 02, 2010 9:31 pm
by Speedmetalist
I can't for the life of me figure out how to do this.

The Page Speed addon calls it "Leverage Browser Caching" and YSlow tells me to "Add Expires Headers"

Overall I am trying to reduce the huge loading time for the website, so if anyone notices something else that may be causing the problem I'm open to all suggestions.

www.mcwilliamsmoving.com

I've tried everything I could find using Google and the forum Search feature, including adding the CssJsCompress extension and adding the following to the .htaccess file

Code: Select all

<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None
<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Cache-control
Header set Expires "Wed, 28 Apr 2010 20:00:00 GMT"
</FilesMatch>
I talked to the customer support for my webhost who told me that mod_expires is not enabled on my host; but I don't really know how that affects anything.

Is this a common problem? Or am I doing something incredibly wrong here. Any help is greatly appreciated.

Re: Expires Headers / Leverage Browser Caching

Posted: Tue Mar 02, 2010 10:21 pm
by andersvinther
This in on my list of things to do soon - so I haven't done this yet...

I assume you have read these two:
http://code.google.com/speed/page-speed ... serCaching
http://httpd.apache.org/docs/2.2/caching.html

I'll keep a keen eye on this thread :geek:

Cheers,

Anders

Re: Expires Headers / Leverage Browser Caching

Posted: Tue Mar 02, 2010 10:30 pm
by Speedmetalist
andersvinther wrote:This in on my list of things to do soon - so I haven't done this yet...

I assume you have read these two:
http://code.google.com/speed/page-speed ... serCaching
http://httpd.apache.org/docs/2.2/caching.html

I'll keep a keen eye on this thread :geek:

Cheers,

Anders
Greetings,

Yeah I read through both of those - or tried to at least. From what I understood, it didn't really explain where to put any of those codes or give any actual examples unfortunately.

Re: Expires Headers / Leverage Browser Caching

Posted: Tue Mar 02, 2010 10:34 pm
by andersvinther
Just had a quick look at your site...

A good rule is to keep your front page as simple as possible... this page is going to be hit a lot. So only put content on the front page, which really needs to be there...

Another good practice is to try to limit content on the front page to content which is cacheable. Or in other words try to avoid dynamic content as much as possible... This takes a lot of load off your servers... For instance do you really need to have a poll on the front page?

It also pays off to work a bit on the images - not sure if you have done that already... but make sure you are not scaling them in html and that you have made them as small as possible size-wise using for instance Irfranview or Gimp to save them as png files (I think there might be issues with IE6 and png files tho)...

Just my two cents...

Re: Expires Headers / Leverage Browser Caching

Posted: Tue Mar 02, 2010 10:54 pm
by Speedmetalist
andersvinther wrote:Just had a quick look at your site...

A good rule is to keep your front page as simple as possible... this page is going to be hit a lot. So only put content on the front page, which really needs to be there...

Another good practice is to try to limit content on the front page to content which is cacheable. Or in other words try to avoid dynamic content as much as possible... This takes a lot of load off your servers... For instance do you really need to have a poll on the front page?

It also pays off to work a bit on the images - not sure if you have done that already... but make sure you are not scaling them in html and that you have made them as small as possible size-wise using for instance Irfranview or Gimp to save them as png files (I think there might be issues with IE6 and png files tho)...

Just my two cents...
Thanks for the input, I had completely forgotten about the Site Poll actually, just left it in as a "filler" ;D . One thing in that regard I am curious about, will having Plugins/Modules installed but not enabled affect performance? Should I just uninstall them if they are unused?

About the caching though, my understand of these Expires Headers are that it is possible to distinguish between static content and dynamic content, which would be handy so I could keep a little bit of dynamic content on the front page.

Re: Expires Headers / Leverage Browser Caching

Posted: Tue Mar 02, 2010 11:25 pm
by andersvinther
First of all: There is absolutely nothing wrong with having dynamic content on the front page.

Just be aware that there is a performance cost associated with all content - more so with dynamic content than static content.

Therefore you should select the content you need on the front page - not just whatever fits. Less is more :-)

In other words: if there is no good reason for content to be present - take it off.

Now, there are several different level of caching. All serve different purposes and work in different ways.

Here is a great article which explains how the Joomla caching works: http://www.theartofjoomla.com/joomla-ca ... ained.html

To give you a very short explanation: Joomla builds every page requested dynamically when it is requested. When you hit the front page Joomla says: Oh, gotta get the front page. Now how does it look? Let me fetch all the content and modules I need from the database and put it all together. Then I send the page back to the user.

The Joomla caching article above discusses how the Joomla internal caching works.

This caching allows Joomla to shortcut this process. You can tell Joomla which parts of the content can be cached and which cannot. For each bit of cacheable content you save Joomla the extra work of asking the database for the content every time. If you cache timeout is 15 mins Joomla will ask the database for this content once every 15 mins instead of every time the page is requested. This saves a lot of work on the server. Note that if you update an article for instance the change will only kick through once the cache expires (or the cache is manually cleared).

Content like a poll needs to be dynamic. Otherwise a user would not be able to get the results. So every time the front page is requested Joomla needs to ask the database for the content. The same goes for components like "Who is online" for example.

Expires Headers is a different type of caching. It basically tells the users internet browser which elements the browser can cache. This is typically your banner graphics and other static elements. By setting an 'Expires' date in the future the internet browser knows not to ask your Joomla server for these elements again until the cache expires. This saves a lot of traffic on the internet and load on your server. And is speeds up the load time for subsequent requests from the same user making him/her happier too :laugh:

There are other types of caching like database query caching, but I don't yet have the full overview of all these components myself, so I'd better not go that way...

Hope this clarifies things a bit...

Re: Expires Headers / Leverage Browser Caching

Posted: Thu Mar 04, 2010 5:51 pm
by Speedmetalist
Greetings Anders,

Thanks a tonne for that link! I read through it a few times and I greatly misunderstood what was going on, also you inadvertently fixed another problem I was having that was cache related!

I've been working on it a lot trying to figure out what's causing the slow load speeds and found one big factor that I'm working on fixing at the moment, being all the images referenced in the CSS was getting referenced were being loaded, even if they weren't being used.

I still haven't figured out how to setup the Expires Headers but I will be sure to let you know as soon as I get it worked out!

Re: Expires Headers / Leverage Browser Caching

Posted: Fri Mar 12, 2010 12:11 am
by andersvinther
Just came across this page, which has some more info on the subject: http://www.websiteoptimization.com/speed/tweak/cache/

Re: Expires Headers / Leverage Browser Caching

Posted: Sat May 01, 2010 7:48 pm
by Speedmetalist
I know it's been a while (been really busy) but I have figured it out.

As a note, this may not work for everyone, as far as I know you need to be on an Apache server with the mod_expires module enabled. If someone knows of a way to do this without mod_expires (using PHP, Javascript, anything really) I'm still trying to figure that out and any help is appreciated!

Anyways, here's what I did.

Before you do this, understand that I am in no way an expert at this and do not know if it can harm your website in any way, hopefully someone more experienced can give a little more insight.

Here's what you need to do:
Find your .htaccess file, mine was in the public root directory of my website.

Open it up, and add the following to it:

Code: Select all

ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType image/ico "access plus 2 years"
Save the file, and re-upload it. Also, it is important to have the period in the file name.

.htaccess not htaccess

It's pretty self explanatory by looking at it, each line is your options for a different kind of file, followed by how long you want the expire header to be.

Important!
From my understanding (correct me if I'm wrong), if you set this on your site, and people go to the site and cache the files, then you later change that file, unless you change the file name, those people who already had it saved will not see the change until the expire header expires.

Again, I am in no way an expert at this, so be careful!

Re: Expires Headers / Leverage Browser Caching

Posted: Sun Jun 06, 2010 4:59 am
by stutteringp0et
I've got a plugin to set expires headers on a global or per-page basis which been submitted to the JED and is pending approval.

Look for "Expires Headers" in the JED in a couple of days

Re: Expires Headers / Leverage Browser Caching

Posted: Sun Jun 06, 2010 5:03 am
by Speedmetalist
Sounds awesome!

I am curious though, does the server need to be Apache for the plugin to work?

Re: Expires Headers / Leverage Browser Caching

Posted: Sun Jun 06, 2010 5:16 pm
by stutteringp0et
nope, it doesn't utilise mod_expires

I was hoping to get an approval for the JED entry by now, but still waiting. If you search for "Clean Response" or "Scripts Down" on the JED, you can find a link to my site. It's available for download on my site right now.

Re: Expires Headers / Leverage Browser Caching

Posted: Sun Jun 06, 2010 5:50 pm
by a2purn
A good rule is to keep your front page as simple as possible... this page is going to be hit a lot. So only put content on the front page, which really needs to be there...
Agree with this it will help you if you have high traffics.

I use latest SO and placing that code to htaccess as described, the site seems better

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Jun 14, 2010 6:09 am
by laborduck
Speedmetalist wrote:I know it's been a while (been really busy) but I have figured it out.

As a note, this may not work for everyone, as far as I know you need to be on an Apache server with the mod_expires module enabled. If someone knows of a way to do this without mod_expires (using PHP, Javascript, anything really) I'm still trying to figure that out and any help is appreciated!

Anyways, here's what I did.

Before you do this, understand that I am in no way an expert at this and do not know if it can harm your website in any way, hopefully someone more experienced can give a little more insight.

Here's what you need to do:
Find your .htaccess file, mine was in the public root directory of my website.

Open it up, and add the following to it:

Code: Select all

ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType image/ico "access plus 2 years"
Save the file, and re-upload it. Also, it is important to have the period in the file name.

.htaccess not htaccess

It's pretty self explanatory by looking at it, each line is your options for a different kind of file, followed by how long you want the expire header to be.

Important!
From my understanding (correct me if I'm wrong), if you set this on your site, and people go to the site and cache the files, then you later change that file, unless you change the file name, those people who already had it saved will not see the change until the expire header expires.

Again, I am in no way an expert at this, so be careful!

Works.
For me, I went from 0% with expiration date to 34% expiration date.
That's a good start. Thank you posting.


To boost mywebsite's speed, I juse:

Google Ajax library plugin (setting yes to all)
Ki - Mootools Control (yes to all... Google Ajax library seems to be filling fine)
JCH_Optimize (except for combine css, yes to all)

The chosen setting resulted from trial and errors with http://gtmetrix.com, a web-based yslow & speed.

For my template and package, those setting works for me.

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Jun 14, 2010 7:24 am
by laborduck
Google Ajax library plugin (setting yes to all)
Ki - Mootools Control (yes to all... Google Ajax library seems to be filling fine)
JCH_Optimize (except for combine css, yes to all)
I added the plugin contentstatic, changed the directory to cache, and added 2 lines of codes, following directions from http://www.eboga.org/cms/joomla/tips-an ... tatic.html, and got significant boost in speed and reduction in KB, like from 200k to 120k.


I tried the header expire plugin but have no luck with the plugin.
I wait for for its publication and follow up on it.

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Jun 14, 2010 7:47 am
by laborduck
Get rid of ETag with this, FileETag none, in htaccess.

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Jun 14, 2010 7:54 am
by andersvinther
Hi Laborduck,

Thanks for posting your experiences - good stuff...

What do you mean when you say "Get rid of ETag"?

Does that mean that if you add "FileETag none" to your htaccess the warning in YSlow will go away?

Really like the gtmetrix.com site too...

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Jun 14, 2010 9:10 am
by andersvinther
From reading these pages:
http://httpd.apache.org/docs/2.0/mod/core.html
http://gtmetrix.com/configure-entity-tags-etags.html

I think a better FileETag setting would be

Code: Select all

FileETag MTime Size
The problem with the default setting as far as I can read is that it includes INode information, which is specific to one server. So if you have a cluster of servers serving the same files the INode information will be different and effectively the ETag system will not work... This will only be a problem if you have a Joomla site in a clustered environment.

If you set FileETag to none you are disabling this way of caching. However if you set it to MTime Size you are only including the modification time and file size as parameters to determine if a cacheable object has changed and needs to be reloaded... which should work fine...

Have not tested this yet... but will do now :-)

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Jun 14, 2010 9:34 am
by andersvinther
Wow! My hosting provider has not enabled mod_expires - go figure!

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Jun 14, 2010 9:43 pm
by laborduck
Sorry. I was mistaken about JCH.
The JCH_Optimize didn't work with the css and js files for my chosen template package.
Using the plugin to compress, minify, and/or combine css and js files broke my chosen template but not other template. It works well with other template. I'm no longer using JCH Optimize, just the rests that were mentioned with the same settings.

Thank you for the FileEtag MTime Size code.
I didn't know cache could be used with it.
I'm using this code now because I want my extra cache.
ka-cink cink.
Will save hosting $ haha:D

...........................


For the expire heading problem, the code below, added under the "RewriteEngine On" line in .htaccess, works for me with or without Appache mod_rewrite under Joomla's global setting.

It might work for you and others too. Wanna try it out?

Code: Select all

ExpiresActive on
ExpiresDefault "access plus 10 years"
or

Code: Select all

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 10 years"
</IfModule>
or

Code: Select all

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 3 days"
</IfModule>
It's based on http://developer.yahoo.net/blog/archive ... anc_2.html, reply from technical support and this code below.
ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType image/ico "access plus 2 years"
I have no fundamental understanding of what the code means. It's working well, based on GTmetrix.


The code below is another method from Daniel, a technical support responder. I didn't use it because cache for 10 years seems more and because things are working :-[

Hello,

Thank you for the update.

I have checked the mod expires functionality by creating new folder named test and new .htaccess under the mentioned folder. I have typed this code:

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/gif "access plus 1 months"
ExpiresDefault "access plus 1 days"
</IfModule>

The first directive, ExpiresActive on, simply informs that the module should be used. The second and third are the important ones:

* ExpiresByType image/gif "access plus 1 month" informs that documents of the type image/gif should be reloaded from the web server one month after the document was last accessed.

* ExpiresDefault "now plus 1 day" informs that all document types that are not specified should be reloaded one day from the current time.

You can use the popular text-based web browser lynx to verify that your settings are working and in effect. I have checked the folder using the lynx browser:

HTTP/1.1 200 OK
Date: Thu, 24 Dec 2009 06:13:53 GMT
Server: Apache/1.3.41 (Unix) mod_auth_passthrough/1.8 mod_log_bytes/1.2 mod_bwlimited/1.4 FrontPage/5.0.2.2635.SR1.2 mod_ssl/2.8.31 OpenSSL/0.9.8b mod_status
/0.2mm
Cache-Control: max-age=86400
Expires: Fri, 25 Dec 2009 06:13:53 GMT
Connection: close
Content-Type: text/html

Note the Cache-Control: max-age=86400 line. This shows 86400 seconds, echo 86400/60/60/24|bc outputs 1 (bc is a nice command line calculator, manual page) meaning the text/html is set to expire after 1 day - as ordered.

Thus I can confirm that the mod expires works on the server. Please use the following format to specify the files' type:

ExpiresByType image/gif "access plus 1 months"

and the issue should be resolved.

If you need further help, do not hesitate to contact us again.

Best Regards,
Daniel K.
Technical Support Team

--------------------------------------------

Check out our Friends Special:

Re: Expires Headers / Leverage Browser Caching

Posted: Tue Jul 06, 2010 4:59 pm
by azunoman
stutteringp0et wrote:nope, it doesn't utilise mod_expires

I was hoping to get an approval for the JED entry by now, but still waiting. If you search for "Clean Response" or "Scripts Down" on the JED, you can find a link to my site. It's available for download on my site right now.
We enabled the expires header plugin...we may not have configured it properly and had to disable it because our content people were getting weird results from the frontend and cb_login was requiring an f5 to get correct login status...I emailed you via your site. I just seems to many things were being cached.

I plan on testing with mods too the .htaccess, as we really need to enable browser cache for our large content site...

Re: Expires Headers / Leverage Browser Caching

Posted: Sun Jan 23, 2011 5:13 am
by stutteringp0et
Pages that contain dynamic content should not be cached. This includes login modules.

Your browser retrieved and cached the page before you logged in. Upon logging in, the browser didn't request a new copy of the page because the cache hadn't expired yet.

It takes some planning and testing to implement the plugin effectively.

On a news site, the home page might change every hour, so the expires time might be set for between 1/2 and 1 hour. Sites that have content that doesn't change very often could have long expiration times.

Re: Expires Headers / Leverage Browser Caching

Posted: Wed Dec 07, 2011 2:59 pm
by lip420
Hi~
I have tried some things here and another to leverage browser caching.

1st.
ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType image/ico "access plus 2 years"

This showed a one point improvement for GTmetrix (I went from 18 points for browser caching to 60 but no improvement for Googles page speed.

2nd.
<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None
<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Cache-control
Header set Expires "access plus 1 month"
</FilesMatch>

This showed a minor improvement for Gtmetrix but nothing for Google. Any more ideas for leveraging browser caching?

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Jan 23, 2012 10:21 pm
by dtron
The 1st Method
lip420 wrote:1st.
ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType image/ico "access plus 2 years"
Did wonders for my site, took away the warning in Firebug Page Speed and moved from a 80 to 90 on my front page. In my Directory (SobiPro) it showed back up. But, that's probably their problem.

Re: Expires Headers / Leverage Browser Caching

Posted: Fri Feb 10, 2012 2:09 am
by seaside man
dtron wrote:The 1st Method
lip420 wrote:1st.
ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType image/ico "access plus 2 years"
Did wonders for my site, took away the warning in Firebug Page Speed and moved from a 80 to 90 on my front page. In my Directory (SobiPro) it showed back up. But, that's probably their problem.
i tried this with the 1st in and it took my site off line and then i put it on without the 1st and it did nothing for my site. still trying to get this problem sorted

Re: Expires Headers / Leverage Browser Caching

Posted: Wed Feb 13, 2013 1:14 am
by vegas-kid
I used the .htaccess edit and went from an F to a C. I placed the edit above my mod rewrite, I hope that is the correct order.

I'm still having issue with javascript though. Also, I'm actually running 2.5 but this is the best thread I found in the search.
The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:
http://www.my-site.com/media/system/js/caption.js (expiration not specified)
http://www.my-site.com/media/system/js/core.js (expiration not specified)
http://www.my-site.com/media/system/js/mootools-core.js (expiration not specified)
http://www.my-site.com/media/system/js/mootools-more.js (expiration not specified)
http://www.my-site.com/modules/mod_s5_i ... sitions.js (expiration not specified)
http://www.my-site.com/templates/corpor ... avicon.ico (expiration not specified)
http://www.my-site.com/templates/corpor ... gallery.js (expiration not specified)
http://www.my-site.com/templates/corpor ... zy_load.js (expiration not specified)
http://www.my-site.com/templates/corpor ... ultibox.js (expiration not specified)
http://www.my-site.com/templates/corpor ... overlay.js (expiration not specified)
http://www.my-site.com/templates/corpor ... ualizer.js (expiration not specified)
http://www.my-site.com/templates/corpor ... ex_menu.js (expiration not specified)
http://www.my-site.com/templates/corpor ... o_slide.js (expiration not specified)
http://www.my-site.com/templates/corpor ... ile_bar.js (expiration not specified)
http://www.google-analytics.com/ga.js (12 hours)

Re: Expires Headers / Leverage Browser Caching

Posted: Wed Mar 06, 2013 12:23 am
by ed2k718
using the following code: http://forum.joomla.org/viewtopic.php?p=2219779
It works perfectly

Re: Expires Headers / Leverage Browser Caching

Posted: Mon Aug 05, 2013 11:10 am
by Sinuce
lip420 wrote:2nd.
<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None
<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Cache-control
Header set Expires "access plus 1 month"
</FilesMatch>
Thank you.
I kept getting the 500 internal server error, but this piece of code worked for me. Page rank went from C to B on GTmetrix.com.

Re: Expires Headers / Leverage Browser Caching

Posted: Sun Sep 08, 2013 4:43 pm
by Jazzi
lip420 wrote: 2nd.
<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None
<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Cache-control
Header set Expires "access plus 1 month"
</FilesMatch>
Excellent - thanks! Spent ages looking for a way to accomplish this! Managed to get up to 82/100 on Google, from 71 without it... :D

Re: Expires Headers / Leverage Browser Caching

Posted: Sun Sep 08, 2013 8:26 pm
by seaside man
does anyone have the code for joomla 3.1