Site Optimization With PageSpeed Part 1

I previously posted the results that PageSpeed gave me in regards to the performance of one of my sites. The results were probably on par with alot of sites out in the interwebs. It actually did better than sites I've worked with professionally. But still, there is always room for improvement. So I'll cover a few of those warnings, and what I did about them, if anything, here.

Prefer Synchronous Resources

Simple enough. I have several snippets of javascript loading synchronously. To be specific, Google+ and Adsense. Synchronous javascript calls, block the remaining JS from running until it is complete. Google says it seems to frown on that, especially above the fold. So I load the +1 Button asynchronously and boom, problem goes away. To be honest, I removed the +1 button. It gets me almost no clicks, and I'm making a big push towards not loading unnecessary content.

Serve Scaled Images

Challenge accepted. I personally have a hard time with this one. When I write content I'm all about speed and typos and right-click auto-correct. So when I write posts on my other sites I usually don't worry about "which image is right for which page". Which is terrible. Any post listing I have will render a min-width/min-height version of its big brother. Looks great, sure, but man is that load time kind of annoying. Solution. Serve Scaled Images. Here's an example:

Awesome picture? Damn right it is. Easy to upload to this post? Yeap. Took seconds. Image scaling isn't something alot of people think about. Even at my jobs, no one once said "Hey man, that image is getting kinda un-scaly". On news sites, blog posts, etc, it's a more noticeable problem, since media plays a big role in that. I've visited blogs with super hi-res awesome photos, that load 50megs. And while most people have a fast enough internet connection nowadays as to where that is a mere second, it still comes with it's problems. Load 2 of those pages and tell me your chrome browser wont give you a warning about memory usage. I am currently working on a solution to this problem. A way to rescale the image on the fly given boundaries.
..kind of thing. It's still a work in progress, and I will write all about it, as soon as it's done in its R&D phase.

Combine images into CSS sprites

Unless you have a dedicated front-end guy to work with or take advantage of, whichever, then you probably wont spend too much time sitting there counting pixels and position all your images into one awesome and neat transparent image, jotting down coordinates along the way. I tried. After 2 images I gave up. Why does Gimp make transparent images so difficult :/ why. So why are sprites so important? Because it saves from having to load 20 or so smaller images at different times. One for your "close" button. One for your "folder" icon. etc. 20 HTTP requests, bad. 1, pretty damn good. There are a few websites out there that will create sprites for you, along with the CSS. SpriteMe.org being one. Some are free, but not as awesome, and some you pay for, and are kinda more awesome. I personally, am looking for a way to automate this myself. Point to a folder, creates a sprite with all the images and generates a css file. Sounds pretty awesome in my head. So keep an eye out for that.

So there were just 3 small samples that one should always keep in the back of their head when working on content. No more blocking scripts for me, images are still unscaled, but that's a work in progress. And I went ahead and created that sprite using the Gimp after several attempts. Is there a noticeable speed boost to my website? Maybe not to the naked eye. But the footprint is smaller indeed. So that's it for this post. There's way more PageSpeed recommendations that I have to run through, and those will be coming soon. Until then!