No longer just a description of the perfect woman, now also the description of my homepage 😉
I have been thinking of changing the looks of my homepage for some time. Until now, I’ve been using a modified version of the F2 theme. It has mostly done what I want, but it has not been updated for ages, and the look is starting to feel a bit old.
This is a screen capture from my homepage almost two years ago:
and this is the latest Google snapshot (yup, I did not create a screen shot myself before tearing everything apart):
So, not a lot changed in two years…
For the Declare web-site, I have been using Suffusion for some time and been reasonably happy with it. It provides a lot of configuration options, and I barely had to modify it (and only by using its option to inject custom code). Now my homepage looks like this:
I freshened up the colors a bit and swapped out my MW logo from a “me drinking whisky” version to a “me and Britney” version. The widgets I kept the same (albeit with a new look). I only have two regrets, and they don’t bother me enough that I’ll actually do anything about them unless I get super-bored someday: First, I’d like to flip the header, so the logo is at the top-left corner and the title + menu at the right. This seems to be impossible at the moment as Suffusion seems to have a bug preventing it from putting the title at the right. Second, I’d like the logo to bleed down in the correct widget bar. This I want to make the header smaller and to make my site young and innovative. No, it’s just the size thing. So, yeah, size does matter in this case.
For some time I’ve also known that my site is getting slow. This is probably related to the 30+ plug-ins I use for WordPress (one of which is Jetpack, which is 10 plug-ins bundled into one). And the share buttons at the bottom of each post (you should totally try those out, by the way – that will yield more page views which I’ll convert into fictitious money using my fictitious ads).
Rather than fixing this in the blind, I decided to run some tests of the loading speed of my site. I have previously used the Web Inspector built into Safari, but I wanted something more external. Hence, I used the services Pingdom Full Page Test and the aptly named Web Page Test. Both a re quite good, but the latter offers more options. I decided to focus mostly on Web Page Test.
An initial run yielded this:
So, three red marks and a render time of more than 12 seconds for an initial load. What is even worse is that the time until the page starts rendering is almost 10 seconds, which is like a century in internet years. Luckily, it is easy to pin-point what the initial problem is:
Yup, the root page takes more than 2 seconds before it even starts yielding data. Also, the main page is composed of more than 100 resources. No wonder, this takes forever. The site was nice enough to suggest a caching plugin for WordPress, W3 Total Cache. Switching on this plug-in, cahces the HTML of the front page, significantly reducing the initial load time, Also, it merges CSS and JavaScript resources, yielding a much more respectable:
So, now the entire page loads in 8.5 seconds and starts rendering after a little more than 3 seconds. Much better. The number of resources have been reduced to 64 or by one third. I was actually happy with this result, but as I had all this data available, I decided to take a look into some more details. First, I noticed this:
Yes, my pretty MW logo takes more than 2 seconds to load. And this is part of the page navigation. Luckily, due to how it is included, it does not affect the layout, and does not slow down the site, but why would I need a picture of 70 kB for my logo? Reducing the number of colors to a 7-bit palette more or less eliminates this.
Another thing I noticed was that I spent an awful long time loading things from StumbleUpon. As I don’t use that site myself I did not think that was warranted.
I found out this is because my social sharing plug-in has the option to use “smart” buttons, which fetches numbers from all kinds of social network sites. This is all fine if you like Geocities, but if you have to contact 7 social network sites for 5 posts, as on my front page, you do something wrong. I did not do that, but for some reason, I did have the smart button switched on for StumbleUpon, which I killed:
I also noticed that I spent a lot of time loading PicLens CoolIris:
This sort of makes sense, as I use the NextGen Gallery for WordPress. What doesn’t make sense, however, is that the library is loaded from my front page when there are no images. Installing NextGen Gallery Optimizer, which prevents NextGen from loading on pages without galleries. For good measure, I also switched off CoolIris, as I’d grown angry at it (and It doesn’t really work with the large images I upload). This brought the time down to:
Below 8 seconds for the first load with 55 requests. Now the time is spent on downloading actual pictures from my posts (ok), Gravatars (a luxury, but I like them), and Google Plus buttons (same as Gravatars).
I still get F-marks for keep-alive, though. I try loading the page as if it were done using Chrome and Firefox instead of Internet Explorer:
Ok, problem not present here = screw IE.
Actually, I went on to investigate the IE problem a bit, and started tinkering around in my Apache configuration. My Apache configuration severely limits the number of clients (using the MaxClients directive). The thing is that on OS X, the multi processing module (MPM) does not use threads. This means that for each client in MaxClients, a process consuming 16 MB memory is started. That’s 16 MB real mega-bytes, excluding anything shared. My Mac Mini has 4 GB memory, which allows up to 256 such processes, but the default from Apple is 1024. This means that as soon as a spam bot decides to put some love on my homepage (and that happens fairly often) my server would grind to a halt, choke for 15-30 minutes and then get back up. Super annoying. Thus, I decreased the value to 32 and now my server runs well, but it means that the server processes may be occupied. Hopefully, some future version will support MPM property. Also, “just works” my ass!
These tests are performed as if run from a regular home network and should reflect your loading time: around 8 seconds with Internet Explorer and 6-7 with Safari/Chrome/Firefox. With all but Firefox, you should start seeing results after approximately 3 seconds and with Firefox a couple seconds later.
I decided to also do a test with Pingdom’s tool, which yields faster loading times due to not emulating a home network but loading things as fast as possible. Here, is the time decrease observed during my optimizations:
The spikes are caused by regeneration of caches. We go from around 6 seconds to around 2.5 seconds. Decent. Looking at the complexity of the page:
We see that the size of the page decreases from approximately 900 kB to approximately 600 kB and the number of requests from more than 100 to around 60. Not too shabby.
In conclusion, I really like the Suffusion theme and I hope you do so as well. I did a lot of tweaks to make it look the way I wanted, but being a more modern theme than F2, this was little problem. The optimization was enlightening. Switching on caching was mostly painless (though it suggests doing so:
which is possible the stupidest suggestion ever!). The remaining tweaks yielded much less, but had the general theme: identify why something is making external access and disable it unless it is very important. Now, I only have to figure out how to make the cache switch on my mobile theme again when appropriate…
The results obtained here are indicative of what you can get using minimal effort; for example, I did not bother looking into opcode caches for PHP or CDN distribution of static content.
E: I subsequently enabled APC. Probably doesn’t make a lot of difference for readers, but it does for me, as I have to live without the cache as I’m typically logged in.
