Next, I’m going to do the same with the stylesheets. When I load YSlow and click on ‘components’, I see that one of my wordpress plugins is loading 2 stylesheets, so even with combining my own two I will still be loading three. I don’t really want this, so I did a search for the file in question, commented it out of the autoloading in the plugin (yes, it will come back if I upgrade and I’ll have to do it again), and pasted it into my style.css.
Now that my files are combined, I’ll move on to the next recommended step.
CSS Sprites, Image Maps, Inline Images
Okay, I cheated a little bit because I did this when I exported the original PSD. There are a few non-css-sprited images on the homepage, but they are there of necessity. The background, because its very wide and needs to repeat. The ocean in the footer for the same reason (which is also a png so the island can be seen behind it – even though a gif would be much smaller in file size), and the latest creations graphic (which is also currently a png, but I will likely change to a JPG as part of the optimization). The clouds and balloons are also graphics, but out of necessity – they need to be resizable.
Image maps wouldn’t have really helped me on this design, and to be honest – I’m not a fan of inline images. Until there is a tool that automates their inclusion, adding that kind of code to an html page feels totally contrary to the entire value of CSS.
Wait, let’s do a little more.
Initial YSlow Score: F(39) Final YSlow Score: D(61) Initial Requests: 23 Final Requests: 15: 3 js, 2 css, 9 images Initial Page Size: 600k Final Page Size: 500k Initial Load Time: 6+ seconds Final Load Time 2+ seconds
[singlepic id=9 w=298 h=150 float=right]
Coming up next – adding Amazon Cloudfront as a Content Delivery Network