UPDATE: This now works perfect, here’s how to do it...
------------I leave the original post intact below the tips, just so you can follow the line of thought------
Amazon S3 - Cloudfront and ModX TIPS
As per the directions of pagespeed and yslow I wanted to serve static content from cdn, I ended up going for amazon s3
and here are the steps I took to make it work.
I used bucketexplorer.com to interface with amazon s3 and cloudfront
Follow instructions as found on
http://www.bucketexplorer.com/documentation/amazon-s3--how-to-use-Amazon-s3-as-an-image-hosting-service.html
I uploaded both images as well as css files.
I ran into the following troubles and found solutions for most:
- expires headers on static files were not set: solution:
1 rightclick on file in bucketexplorer
2 choose update metadata
3 Add metadata Cache-control max-age=2592000, no-transform, public
4 Add metadata Expires with some distant future date, e.g: “Sat, 01 Jan 2011 00:00:00 GMT”
5 make sure the Content-Type is correct (image/jpg for jpg, text/css for css)
- no gzipped css file: solution:
1 have your css file handy (ofcourse you have already combined all your css files into one file and minified...)
2 get 7zip from 7zip.com and compress your css file, now the name is: cssfile.css.gz
3 change the name of that file into cssfile.gz.css
4 upload both files and set the metadata as above
5 add one more metadata heading to the compressed version: Content-Encoding gzip
You are done for s3 for now
Log into your modx manager and make the following snippet - thanks to shamblett for making this work!:
[!gzstring!]
<?php
$GLOBAL_GZSTRING="";
if (substr_count($_SERVER[’HTTP_ACCEPT_ENCODING’], ’gzip’)) $GLOBAL_GZSTRING=".gz"; else $GLOBAL_GZSTRING="";
echo $GLOBAL_GZSTRING;
?>
Then make the following change to your link to the css file:
<link rel="stylesheet" href="
http://your.cname.link.to.amazons3orcloudfront.bucket/cssfile[!gzstring!].css" type="text/css" media="screen, projection" />
Now when a visitor’s browser accepts gzip encoding, modx tells the browser to go get cssfile.gz.css from your s3 or cloudfront bucket and if not it tells the browser to go get cssfile.css.
One more issue...Google Pagespeed tells you to serve static content from cookieless domains...
How To Serve Static Content from cookieless subdomain - Here’s how to do it.
1 - make a subdomain called static.yourdomainname.com which you gave the cname in your dns to point to your full amazonaws bucket name (or your cloudfrontname if you work with that)
2 - Open you modx index.php file and change the line where it says: $base_url = ’’; to $base_url = ’www.yourdomain.com’;
3 - done, modx-made-cookies are now served from www.domain.com only and no longer on subdomain.yourdomain.com... but....
With regard to cookies, google analytics screws things up as well. Because the google analytics script sets a number of cookies on your domain as well and the default setting is on domain.com, so the google analytics cookies still show up on the static subdomain as well. Fortunately there is a solution that allows you to set the cookie domain for google analytics, here it is...
I adapted the google analytics plugin and fixed this per the instructions I found on
http://www.ravelrumba.com/blog/static-cookieless-domain/. You can find the updated plugin here:
http://modxcms.com/forums/index.php/topic,52422.0.html - the modified google analytics plugin now takes care of this automatically - once you put www.yourdomain.com in the cofiguration tab in the right spot - once set, google analytics cookies are no longer served for your subdomain.
One Last Issue - that can not be solved yet...
Google Pagespeed version 1.9 still tells me that:
The following publicly cacheable, compressible resources should have a "Vary: Accept-Encoding" header: ...
...and then it points to cssfile.gz.css on s3 or cloudfront.
This issue for now can not be solved, if you want to follow why and what is happening with this, check the following links:
http://developer.amazonwebservices.com/connect/message.jspa?messageID=198392 which talks about amazonaws stance on this.
http://code.google.com/p/page-speed/issues/detail?id=364 is where the issue has been posted with google pagespeed.
Only two messages you still get with pagespeed are:
- Vary: Accept-Encoding message and
- the short lived
http://www.google-analytics.com/ga.js itself.
So once again modx rocks, good luck all.
------------------like said here is the original post ----------------
Does anybody know how to get the following to work?
Here is what I am trying to do: integrate CDN with my modx sites.
I managed to get my css working from amazon s3, but now ofcourse it is not gzipped, cause amazon does not gzip.
There is a solution where you gzip the file yourself and upload. SO i uploaded two versions, the unzipped and the gzipped version.
Now I need to do the following, if someone’s browser accepts gzip it sends the file customstyle.gz.css, otherwise it sends customstyle.css
Here is the script I tried to get this to work:
I made a snippet, called gzstring, with the following code in it:
$GLOBAL_GZSTRING="";
if (substr_count($_SERVER[’HTTP_ACCEPT_ENCODING’],’gzip’)) $GLOBAL_GZSTRING=".gz"; else $GLOBAL_GZSTRING="";
In my template header I place this:
[!gzstring!]
<?php global $GLOBAL_GZSTRING;?>
<link rel="stylesheet" href="
http://static.domain.xx/css/customstyle<?php echo $GLOBAL_GZSTRING;?>.css" type="text/css" media="screen, projection" />
I found the above on:
http://internetmarketingbyme.com/74/gzip-compression-using-amazon-s3-cloudfront-cdn/ but can not get it to work on modx.
Thanks
Oliver
