Let’s get this part out of the way first…
Like most people, I have a suite of websites I check when I’m trying to figure out how well a site does with regards to speed. Google PageSpeed Insights, ySlow, GTMetrix (which does both), Pingdom Website Speed Test, Bytecheck… The list goes on and on. We want as many checks as possible in understanding what’s causing sites to be slow and what is not.
When I added in nginx I wanted to test everything again, and as I made my way down my list I thought “Isn’t there a way to do this and go make a coffee?”
Sitespeed.io analyzes my site while I make coffee. It’s Open Source. It’s forkable. It’s easy to install. Since I’m on a Mac, I used Homebrew (which I’ll post more about in two days) but you can git clone, or download the zip, however you like.
Once installed, you run a sitespeed.io call:
$ sitespeed.io -u https://halfelf.org
This takes a little but creates a folder off your home directory:
~sitespeed-result/halfelf.org/2014-05-14-14-59/ and in there will (eventually) be a lot of files including an index.html. That one you open up in the browser. The scan definitely takes longer than a sitespeed check, but it’s also more in-depth in the ways I always wanted from sitespeed. Also since it’s HTML, I can toss it online and share with people.
What I noted first was a ton of errors. Sad panda.
phantomjs[88651:507] CoreText performance note: Client called CTFontCreateWithName() using name "Open Sans" and got font with PostScript name "OpenSans". For best performance, only use PostScript names when calling this API.
It also had a lot of crashes, which was when I wondered if everything was on the right version. Again, checked in with Homebrew, upgraded phantom,js, and tried it again. This time no errors (yay!)
But then the process finished and I looked at my score. 81.
So I dug into the results and looked at first my home page.
This page has 8 external stylesheets. Try combining them into fewer requests.
And it showed me what those were. Weirdly, I saw WP was calling jquery on it’s own, as well as the JS I minified and compressed with mod_pagespeed. Interested, I checked three other sites on my server, and they all have the same issue. It blows my mind that no other tool had pointed that out before. The stylesheets I knew were from my fonts. While I minified them all, I did not combine them because it made my font-icons break. I upgraded mod_pagespeed for Apache 2.4 and haven’t looked at that since, so I tried it again indeed, it worked now.
I slowly worked my way down the list, noting things that I could easily fix. One thing that would ding me hard was my use of webfonts. Also not using a CDN still dinged me. Still, by using Sitespeed.io, I was able to see more exactly what was slowing my site down and why, and what I could sacrifice. Some things are going to be unavoidable (like “You are using an old version of JQuery: 1.11.0 …” ) and the multiple domains (google.com, wordpress.com, etc), but really the fact that I can narrow in with specific issues is perfect.
There are a whole mess of options, like I can take screenshots with each page, restrict the scan to specific pages (or exclude others), check in mobile, test in specific browsers (note: this is more complicated!), and much more.
So welcome, Sitespeed.io, you’re in my toolkit now!