15 minutes could save you…

May 17th, 2010. Tagged: CSS, images, performance, WordPress

Since I have a ton of things to do, I decided it was about time to spend some time with this blog, performance optimization-wise. Not do anything special, just the bare minimum, the no-brainer, works-every-time, easy stuff. And I'm quite happy with the results.

I only looked at the homepage, although the results will be seen throughout the site. Unfortunately there was a youtube video on the homepage, otherwise the results would have been even better, KB-wise

gzip on

First things first - turning compression on. I've previously whined about the host of this blog, site5.com and how I wasn't able to enable compression for some tests and had to make PHP do the compression. Turned out, all it takes is just ask and open a support ticket. Second level support decided to compile Apache with mod_deflate and I was good to go. I put this in .htaccess:

AddOutputFilterByType DEFLATE text/css text/plain text/xml application/javascript application/json

This blog has no JavaScript, just HTML and CSS. The HTML became 5K (from 23K) and CSS became 3 something (from 11K)

Flush

Decided to go fancy here and do first byte flush early on. That, of course, can be problematic, especially on shared hosting. I mean problematic is to have gzip working together with flushing (tips). Eventually I gave up wrestling with .htaccess and php.ini settings and let PHP handle it. That's why you may notice that text/html is missing from the DEFLATE list above.

So all it took was going to my WordPress theme, finding something called header.php and adding two lines of PHP.

One at the top:

<?php ob_start("ob_gzhandler"); ?>
<!DOCTYPE html ...

And one at the bottom:

<?php ob_flush(); flush(); ?>

Now the header part is flushed in one chunk and the rest in another. Check it in chunkview...

favicon.ico

I have no favicon so I get a lot of 404s, since browsers insist on downloading this little thing. So I created one. Took a social profile photo, croped (Option+K) and played with green colors in Mac's built-in Preview program. Then, ImageMagick:

$ convert -resize 16x16 dude.png PNG8:favicon16.png
$ convert favicon16.png favicon.ico

FTP. Done. No mo' 404s for favicon.

Minifying CSS

Copy-paste into CSSMin and CSS lost 30% of its weight. Now after gzipping and minifying, the CSS went from total 11.3K to 2.6K.

Cover images

I have some book covers on the homepage. One was simply linked to the publisher's site (extra DNS, connection...). Also turned out the publisher has redesigned the site so there was also a redirect. Disaster. Also the image was a 26K PNG where it could be 4k JPEG.

$ convert cover.png cover.png.jpg
$ jpegtran -copy none -optimize cover.png.jpg > cover.jpg

And just like that - 4 book covers were optimized.

Before/after

And that's all I did. I can probably do Expries headers too, convert/sprite all smiley GIFs and so on but that means touching more of WordPress, so I stopped here.

Now the page loads (onload) in 1.2 seconds, down from 2.2 (45% faster).

There are fewer DNS lookups, no 404s, no 301s

Page weight is down from 285K to 186K (34%). Actually if you exclude the youtube 142K SWF, the result is: 143K (before) to 44K (after) or a page weight saving of 70%. Not bad, not bad at all.

And the waterfalls. Before:

After:

PageSpeed score only went from 84/100 to 87/100 which was not impressive at all. I think 84K may have been too generous, but maybe not, given how worse sites there are out there.

So this is it - 15 minutes could save you 45% page load time and 70% download sizes :)

Tell your friends about this post: Facebook, Twitter, Google+

22 Responses

  1. 404s are bad? That is, is getting 404 as a reply for a favicon request worse than having to download an actual favicon (weighing 1.3KB)?

  2. I prefer to install WEBO Site SpeedUp – much more gain for 5-10 minutes :)

  3. @rouli:
    a) favicons are gzipped well (so 0.3 instead of 1.3 KB)
    b) favicons are cached well (1 request instead of continious with every visit)
    c) favicons are small – is your 404 HTML less than 1 KB ? I know a few which are.

  4. sunnybear, I prefer install PHP Speedy for free instead… If you know what i mean….

  5. @rouli
    The 404′s for the fav icon are bad.
    If I am reading the before and after waterfall charts correctly.
    404 fav icon 435ms
    200 fav icon 112ms

    As sunnybear says fav icons cache well too. So that 112ms is paid on the first page view and then very cheap while cached on any other page views.

  6. sunnybear, I do intend to give your Site SpeedUp a shot with a different blog.

    now I see I should check out PHP Speedy too, thanks @tantrum

    The thing is my blogs are simple, don’t even have JavaScript so I won’t see much of the benefits of these tools.

    Favicons, yes, particularly silly in a wordpress blog, because the 404 is a full page, will query the database to get categories and all… as if doubling the strain on the server almost for empty cache views.

  7. Unless you like the smiley faces they can be turned off in your custom functions file:


    /*
    * Remove smilies from posts and pages, leave on for comments
    * http://rickbeckman.com/two-simple-wordpress-tweaks-comments-only-emoticons-and-thinly-spaced-em-dashes/
    */
    remove_filter('the_content', 'convert_smilies');
    remove_filter('the_excerpt', 'convert_smilies');

  8. Thanks @Claude, good idea, I don;t like them particularly. Often I’m surprised they show up after clicking Publish

  9. Thanks for the good tips, and that good chunkview tool!

    Just a word of caution when using ob_start(“ob_gzhandler”): if you have ANY content (including spaces and newlines) outputted before this is called, your browser won’t be able to decode the output, and you’ll get a blank page.

  10. I can probably […] convert/sprite all smiley GIFs and so on but that means touching more of WordPress, so I stopped here.

    IIRC, there is a setting in the WordPress configuration panel (or whatever the hell it’s called) to disable those smileys completely. It’s just a matter of removing a filter, if I’m not mistaken.

    Nice write-up, Stoyan!

  11. Happy to hear Site5 was able to help you out with this though a help desk ticket. :)

  12. @Mitch, yes, thank you, I was pretty much ready to ditch you guys… I guess I’ll stick around :)

  13. Some great tips here amd will be using that on my sites.

  14. These are great tips. Thank you for the link to CSSMin. I have been doing a lot of work in speeding up my sites as well, and if you are using any JS libraries like Prototype or Mootools or jQuery, using Google’s CDN makes a massive speed difference. Some examples: http://graphicpush.com/speed-javascript-library-loading-with-google-apis. Cut total page weight by 50% just by using this.

  15. I inherited 1and1 hosting with lots of sites on it. I hate it, AddOutputFilterByType for example gives me 500 error code. Server is slow and they don’t compress because of it.

    So another optimization tip: make sure that you use good hosting company.

  16. Seem fine. It’s furthermore my favorite subject.That is great andthanks for your great sharring.

  17. You’re great. I would definitely try this.

  18. Wow Right now I’m an university student at the university of Cambridge and That is very interesting, You’re a very skilled blogger. I have joined your feed and look forward to searching for extra of your excellent post. Additionally, I have shared your website in my social networks

  19. Regarding Favicons: Did you try to don’t do it with a graphic but only providing an empty file (0 bytes) called favicon.ico ? This helps you get rid of the 404s.

    Btw, just read your Book for Speed and going to implement lots of that. Are you going to finish the chapters 6 to 9 or is this project dead? Anyway, thanks for all the inspiration.
    T.

  20. link

  21. I am also commenting to let you be aware of of the great discovery my wife’s daughter developed browsing your webblog. She learned plenty of pieces, including what it is like to possess a great coaching mood to have other folks just thoroughly grasp a variety of tricky topics. You truly exceeded our expectations. Many thanks for presenting the essential, trusted, educational not to mention unique guidance on this topic to Ethel.

  22. “Obviously I love your web-site, however you need to check the particular spelling on many of your own posts. Several ones are rife with spelling problems and I find it very troublesome to inform you. On the other hand I will surely revisit again!”

Leave a Reply