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:
ob_start("ob_gzhandler"); <!DOCTYPE html ...
And one at the bottom:
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:
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 🙂
Comments? Feedback? Find me on Twitter, Mastodon, Bluesky, LinkedIn, Threads
