Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

CDN and S3 Integration WordPress

  • SOLVED

I have been trying for the last 3 days to try to get my site integrated with Amazon Cloudfront and Amazon S3. But no matter what I do, YSlow keeps showing an F grade for CDN and I can't get the Expires Header to show up on files that I do have Expires setup for.

The site I'm talking about is http://www.drfranklipman.com. My amazon bucket is located at static.drfranklipman.com. What can I do to get this to work. My site is hosted at Dreamhost.

Answers (1)

2010-03-30

Buzu B answers:

The problem with the F is that you have static content being served from you site and not from a CDN. You can try uploading the files that you get listed to amazon S3 and see what happens.


Buzu B comments:

All this files are considered static:

* http://www.drfranklipman.com/wp-content/themes/franklipman/style.css
* http://disqus.com/stylesheets/drfranklipman/disqus.css?...
* http://www.drfranklipman.com/wp-includes/js/swfobject.js?...
* http://www.drfranklipman.com/wp-content/themes/franklipman/combined-js.js
* http://drfranklipman.disqus.com/get_num_replies_from_wpid.js?...
* http://www.google.com/cse/brand?...
* http://www.drfranklipman.com/wp-content/themes/franklipman/js/jquery.min.js
* http://www.google-analytics.com/ga.js
* http://www.youtube.com/v/uckJfMovSYI&hl=en_US&fs=1&
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner2.gif
* http://www.drfranklipman.com/wp-content/themes/franklipman/images/blq.png
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner1.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner3.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner4.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner5.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner6.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner7.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner8.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/banner/banner9.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/containerbg.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/date-bg.jpg
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/comment-icon.jpg
* http://www.drfranklipman.com/wp-content/plugins/sociable/images/services-sprite.png
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/myfriends.jpg
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/search_bg.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/signup_bg.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/sub.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/subscribe-bt.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/new-widg-bg.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/aboutbg.gif
* http://static.drfranklipman.com/wp-content/themes/franklipman/images/arrow.gif
* http://www.drfranklipman.com/wp-content/themes/franklipman/images/arrow.gif
* http://www.drfranklipman.com/wp-content/themes/franklipman/images/logo.gif
* http://www.drfranklipman.com/images/health-and-wellness.png
* http://www.drfranklipman.com/images/userphoto/susan.thumbnail.jpg
* http://www.drfranklipman.com/wp-content/plugins/sociable/images/services-sprite.gif
* http://www.drfranklipman.com/images/faq.png
* http://www.drfranklipman.com/images/userphoto/admin.thumbnail.jpg
* http://www.drfranklipman.com/images/culture.png
* http://www.drfranklipman.com/images/userphoto/camille.thumbnail.jpg
* http://www.drfranklipman.com/images/nutrition.png
* http://www.drfranklipman.com/images/userphoto/jack.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/admin.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/lindsey.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/bobby.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/richard.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/janice.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/harriet.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/karen.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/dana.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/steve.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/elena.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/liz.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/bob.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/mariel.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/jared.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/jessica.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/susan.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/patricia.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/biziou.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/camille.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/jack.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/nirav.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/alejandro.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/deborah.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/rob.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/nancy.thumbnail.jpg
* http://static.drfranklipman.com/images/userphoto/scott.thumbnail.jpg
* http://static.drfranklipman.com/images/Revive-Book-Sidebar.jpg
* http://i2.ytimg.com/vi/uckJfMovSYI/hqdefault.jpg

So they should be on amazon S3.


Buzu B comments:

In fact, your site is pretty fast.It takes only 4.6 seconds to fully load and the javascript is not eating up too many resources. It will be a bit difficult to get an A on the CDN part of YSlow because of the way content is uploaded in wordpress. I think you would have to either find a plugin that lets you upload static content such as images directly to amazon S3 or modify the core code of wordpress'. Also, content like css and javascript has to be on the wp themes folders to work.

The problem with the Expires Header is mostly with images. You are also told you are making too many http requests. Again, this is mostly because of the images. You could combine them into a big image and reduce the amount of http requests, but then you would have to edit all your css to make the images stay in place so you can show just the part of the big image you want to show.

If you really want to get As or Bs on those three areas, you will have to make mayor changes to your existing wordpress installation.

Also, solving this is not to be done over a system like this. I would require the person solving the problem to be in complete control over the site.

A few tips that can help you with this.

-All the images that you can upload to amazon S3 should be uploaded there and pulled from there directly.
-If you can use CSS sprites* to reduce the amount of http requests.
-if you can combine all the javascript files into one single javascript file that would help to reduce the amount of http requests as well.
-same thing with CSS files
-Don't worry too much about the Expires Headers, but if you feel like you have to set them, read this:
http://www.askapache.com/htaccess/apache-speed-expires.html It uses htaccess to add the Expires Headers. I assume you don't have control over the apache server settings so, you will have to use htaccess.

I know I'm really not solving anything here, but I hope this info helps you.

*http://www.alistapart.com/articles/sprites


Nirav Sheth comments:

Buzu B,

If you look at what you copied/pasted from YSlow, you'll notice that a majority say static.drfranklipman.com. That is my Amazon bucket and I have set the expires header for them through Bucket Explorer. So what I'm facing a challenge with is, is that is still shows up in Yslow. It's not being removed from the list.

I can't do anything in htaccess files because the files are hosted on Amazon. And this file would do nothing for those files on Amazon. I already have Expires Header setup on my local server and it does work. But it does nothing for the files on Amazon.

And I have modified my site code to reference the files on Amazon. So that is why you see the file names as static.drfranklipman.com and not drfranklipman.com/images/xxxx


Buzu B comments:

then you have to add your bucket to the YSlow list.

http://developer.yahoo.com/yslow/faq.html#faq_cdn


Nirav Sheth comments:

Ya, I tried that before but I have no clue where I can do these steps:

1. Go to about:config in Firefox. You'll see the current list of preferences.
2. Right-click in the window and choose New and String to create a new string preference.
3. Enter extensions.yslow.cdnHostnames for the preference name.
4. For the string value, enter the hostname of your CDN, for example, mycdn.com. Do not use quotes. If you have multiple CDN hostnames, separate them with commas.

That is nowhere in my version of Firefox and I'm using Firefox 3.5.8 and YSlow version 1.5.3. If you can show me how to do this, I will totally choose you as the winner and be very very grateful. This is where I'm stuck right now and it would make everything work.


Buzu B comments:

You just need to put on the address bar the following:

about:config

then press enter. It's just like navigating to a website.

It will give you a warning. Just press the button that says "I'll be careful I promise"

Then you will see a screen with lots of options, at the very top there is a search bar that says Filter:

Type

extensions.yslow.cdnHostnames

and you will see an option there. Double click it and a window will pop up. Introduce the name of your CDN and thats it.

If nothing comes out when you type
extensions.yslow.cdnHostnames
Then right click somewhere in the white area where the options were before and choose new>Boolean

It will ask you for the preference name. Just enter

extensions.yslow.cdnHostnames

and for the string value enter the hostname of your CDN.

After that you are done.