I’ve subscribed to many Theme Blogs’ RSS Feeds. They publish a few posts every week featuring WordPress Themes free as well as paid. And every time I take a look at new designs, I want something like that on my blog too!. I was used to design this blog theme every month and was not satisfied until now.
Before I start designing this blog, I started taking notes from different blog themes. Mostly all themes have two and three columns layout which is very very common. My very first note was “I do not want two/three columns theme”. So I started designing HTML site with SlideDeck and Google Fonts API. I started with index.html, single.html, 404.html, archive.html and search.html. I designed my logo which is also very simple and optimized for web.
When I had all HTML files ready, I started working on SEO. Remember!! Page Titles are so important?
I installed Google Page Speed and YSlow!. I mostly profile my html pages on Google Page Speed.
Google Page Speed highly recommends,
- One HTTP request for CSS
- One HTTP request for JS
- No whitespaces/empty lines in HTML
- Compressed CSS and JS
- Add Expiration Headers for JS and CSS
I am using SlideDeck Slider so I had SlideDeck CSS and my theme CSS. How could you make one HTTP request for two different files? I could think of two options:
- Copy two files into one file and compress
- Follow wp-admin/load-styles.php which reads so many files and compress them
I chose second option because if I upgrade SlideDeck, I will have to do exercise again. With the second option, I can just drop the file at the correct location and I’m done. I did same thing with JS files too which reads jQuery, Google Analytics and some JS code that I wrote to support this theme.
I also added mod_expire lines in my .htaccess file that tells browsers to load resources (CSS/JS/Graphics from cache if not expired). Google recommends expiration should be at least 1 week.
#Expiration
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
</IfModule>
#End Expiration
I removed all white spaces and line breaks from my Theme files (Not sure how much that makes difference but will definitely reduce the size of the document). I also compressed JS/CSS using TextMate and YUI Compressor Bundle. I added alt text, height and width to all images I am using currently.
Compressing JS/CSS and one HTTP request for JS/CSS was helping a lot. After installing W3 Total Cache plugin, ranking went up and up.
My blog theme is not too heavy with loaded sidebars and fancy headers and footers but I smile when I see Google Page Speed Tool gives me 94 out of 100.
I want to thank the followings:
If you like this theme, contact me and I will bundle it for you.