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.
You have 2 javascripts in the critical path and 8 stylesheets using 0 extra domains
[…]
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!
Comments
6 responses to “Review: Sitespeed.io”
Nice! Definitely a slice more effort than the web-based tools, but great for deeper troubleshooting. Thanks for the write-up.
@carrie dils: Once it’s installed, it’s (IMO) less effort, since I can run it on command line and go make coffee, or go for a run, and come back to a pretty results page to peruse offline at my leisure. And frankly, installing is damn easy with Homebrew! :martini:
Wow! When did you move to Nginx? I thought you were a diehard fan of .htaccess 😉
Looking at the HTTP headers I think you have complied Nginx yourself with modsecurity and ngx_pagespeed.
@Jesin: I’m kind of on nginx. That post got delayed because there was a lot of debugging and such that went on, but basically I’m using nginx as a proxy and then apache (and my beloved htaccess) on the back 🙂
As usual a *perfect* choice of in-blog graphics “I feel the need for speed” 🙂 he he
I am always amazed at how you can make learning so much fun! 🙂
[…] (and a nice review from Mika […]