I wanted to experiment with whats new with HTML5 and CSS3 so I started at the top with the new doctype:
Simple isn’t it! This little bute tells the browser to render as HTML5. Next was to make my HTML code valid and forget about the CSS (till it caches up).
This is the first time I’ve really concentrated on web optimization and it was somewhat frustrating but highly educational. The first plug was a great tool from the developers from Yahoo called Smush.it. Smush.it is a web-based image optimization tool that reduced my images by up-to 60% in size. I’d used pngcrush before but Smush.it’s great interface makes image optimization extremely simple.
Below are the savings gravatar would make if they Smushed there images 11.28% off their server bandwidth:
Next was gzip and where my frustration began. If your like me and have a small version for web hosting, chances are you wont be able to Gzip files through your Apache .htaccess file. The next of my worries was the lack/poor documentation if you have to gzip without htaccess. Through countless hours of searching i found these miracle slices of code. They do your gzip though PHP.
Firstly try saving your style sheets with style.php file extension and insert this at the top:
<.?php ob_start ("ob_gzhandler"); header ("content-type: text/css; charset: UTF-8"); header ("cache-control: must-revalidate"); $offset = 60 * 60; $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT"; header ($expire); ?.>
With all this and more I managed my grade A on Yslow and a perfect score for small site/blog. (on the home page anyway)!
My idea was to show blog posts by the month they where written. Months would be displayed vertically and posts horizontally. I also wanted to integrate a lazy load feature to load moths of posts ass the user scrolls down the blog. This would save on bandwidth for users just viewing my latest posts.
Both these features are not implemented at the time of writing but i cant imagine would take longer than a weekend to implement.
Please feel free to add suggestions below. I’m already considering switching the dark design to light for readability. What are your thoughts?