You want a quick web performance win at work that’s sure to get you a promotion? Want it to only take five minutes? Then I got you.
Capo.js is a tool to get your <head> in order. It’s based on some research by Harry Roberts that shows how something seemingly insignificant as the elements in your <head> tag can make your page load up to 7 seconds slower! From pragma directives, to async scripts, to stylesheets, to open graph tags, it’s easy to mess up and can have consequences. Capo.js will show you the specific order of elements to make your <head> and your page a little (or a lotta) bit faster.
Usage
- Head over to Capo.js homepage
- Install the Capo.js Chrome Extension (you can also use it as a DevTools Snippet or bookmarklet)
- Run Capo.js
Capo.js will log two colored bar charts in your JS console; your “Actual” <head> order and a “Sorted” <head> order. You can expand each chart to see more details. If you see a big gray bar in the middle of your “Actual” bar chart, then you’re leaving some quick wins on the table. The “Sorted” dropdown will show you the corrected order and even give you the code. But in the real world you probably need to futz with a layout template or your _header.php to get it reorganized.
Installing Capo.js takes about a minute, rearranging your <head> takes another minute. Honestly the longest part is making the Pull Request.
EDITOR INTERVENTION
[Chris busts through the door.]
OK fine Dave, I’ll give it a shot right here on Boost itself.
I installed the Chrome Extension and ran it and got this little popup:
At first I was a little confused, like this was some fancy code that Web Perf people immediately understand but I was out of the loop on. But actually it’s just a visualization of the order of things (top: actual, bottom: ideal). As a little UX feedback, it should say “Open your console for more information” because that’s where all the useful stuff is.
I found it most useful to look at the “Sorted” output (which is what you should be doing) and then try to get my source code to match that. I think I generally did OK:
I wasn’t able to get it perfect because of WordPress. A decent chunk of what goes into your <head> in WordPress comes from the output of the <php wp_head(); ?> function. I’m sure it’s technically possible to re-order output in there, but that was a more effort that I felt was worth it right at this minute.
Take your wins, that’s what I always say.
I will never understand the devotion that otherwise professional web developers have towards TurdPress. If your site is on WordPress, and you don’t have 100% control over your site’s code, it’s not your site.
I take it you don’t like it?
All computing is standing on different levels of abstraction, and none of us understand and control all of it. Perhaps your choices about abstraction are different than mine, but that’s all they are.
As for lived experience, I’m a couple decades into web development, I reach for WordPress sometimes because it feels like the right tool, and it’s never let me down. I don’t see how I or anyone else should be made to feel less-than for that.
Came here to say this. Couple decades into writing code, I use Nextjs so often but cannot for the life of me ignore how great WordPress is at so many things. My entire course platform runs on it.
As Chris said, it’s an abstraction layer. To add, you can customize it to your will. The plugin eco system it has is one of the best in the industry.
Pah, I always code my websites in machine code, sometimes pure binary /s
This mindset will hold you back.
The way you put it, I understand that even if I buy a house, it it won’t be mine because I’m not a engineer who knows how all the structure or how the electricity runs around the house…
You might want to control all of your software code in a “programmer” point of view, but as you said, we are talking about professional web developers, those who need to make decisions regarding the architecture of the application/software envisioned by your client (or even youself).
Depending in how fast a project/business needs to be launched in the market, you just can’t be thinking about building something from the ground up, your client will reach for the one who can deliver both good and fast (and in times, just fast) products, you need to reach for reliable (battle-tested software) and already available tools that provide the necessary functions your client needs.
Of course, there are Web applications that require squeezing all performance available in a web browser/client computer and you need to understand everything that is happening during runtime, but this is not the common scenario.
I don’t like WordPress much, but you need to acknowledge the fact that this product is the easiest way to launch landing pages for at least 15 years.
It is important to note that with WordPress, you have the ability to control every aspect of the content displayed on your site. You can control every line of code that gets generated to the page. Not knowing the tools doesn’t make the tool bad.
Unfortunately the documentation is lacking a lot. Several pages left with “Coming soon” such as the presumably critical “Interpret results”.
If red items have a heavy impact, why load them first? Probably a simple, if opinionated / maybe evidence based, reason but there’s no documentation I can see to back it up.
There’s also no indication of any actual speed or other beneficial differential estimates, if there are any. I guess WebPageTest would do that job though?
Sometimes, as we all know, simply swapping the order of
headelements can break sites … minorly or majorly. Would be great to see some more documentation before tweaking.Nonetheless thanks to the devs for their efforts. Could be a great little tool if it’s a little bit more documented.