davidbgk
/
larlet-fr-david-cache

title: Capo.js: A five minute web performance boost
url: https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/
hash_url: a122504621c3c5318c0bdee38ef4479b
archive_date: 2024-03-03
og_image: https://frontendmasters.com/blog/wp-json/social-image-generator/v1/image/1086
description: 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 o…
favicon: https://frontendmasters.com/favicon-32x32.png
language: en_US
      
<p>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.</p>


<figure class="wp-block-image size-full"><img decoding="async" src="https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/Untitled.png?resize=519%2C97&amp;ssl=1" alt="Screenshot of the Capo.js console output showing rows of colored rectangles for the Actual order and Sorted order of elements in the head." class="wp-image-1090" srcset="https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/Untitled.png?w=519&amp;ssl=1 519w, https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/Untitled.png?resize=300%2C56&amp;ssl=1 300w" sizes="(max-width: 519px) 100vw, 519px" data-recalc-dims="1"></figure>


<p><a href="https://rviscomi.github.io/capo.js/">Capo.js</a> is a tool to get your <code>&lt;head&gt;</code> in order. It’s based on some <a href="https://csswizardry.com/ct/">research by Harry Roberts</a> that shows how something seemingly insignificant as the elements in your <code>&lt;head&gt;</code> 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 <a href="https://rviscomi.github.io/capo.js/user/rules/">specific order of elements</a> to make your <code>&lt;head&gt;</code> and your page a little (or a lotta) bit faster.</p>


<h2 class="wp-block-heading" id="toc-1"><a href="#usage" aria-hidden="true" class="aal_anchor" id="usage"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Usage</h2>


<ol>
<li>Head over to <a href="https://rviscomi.github.io/capo.js/">Capo.js homepage</a></li>


<li>Install the <a href="https://chromewebstore.google.com/detail/capo-get-your-%EF%B9%A4%F0%9D%9A%91%F0%9D%9A%8E%F0%9D%9A%8A%F0%9D%9A%8D%EF%B9%A5/ohabpnaccigjhkkebjofhpmebofgpbeb">Capo.js Chrome Extension</a> (you can also use it as a DevTools Snippet or bookmarklet)</li>


<li>Run Capo.js</li>
</ol>


<p>Capo.js will log two colored bar charts in your JS console; your “Actual” <code>&lt;head&gt;</code> order and a “Sorted” <code>&lt;head&gt;</code> 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 <code>_header.php</code> to get it reorganized.</p>


<p>Installing Capo.js takes about a minute, rearranging your <code>&lt;head&gt;</code> takes another minute. Honestly the longest part is making the Pull Request.</p>


<h2 class="wp-block-heading" id="toc-2"><a href="#editor-intervention" aria-hidden="true" class="aal_anchor" id="editor-intervention"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EDITOR INTERVENTION</h2>


<p>[Chris busts through the door.]</p>


<p>OK fine Dave, I’ll give it a shot right here on Boost itself. </p>


<p>I installed the Chrome Extension and ran it and got this little popup:</p>


<figure class="wp-block-image size-large"><img decoding="async" src="https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/before.png?resize=1024%2C187&amp;ssl=1" alt='"Before" sort order, scattered rectangles of various colors' class="wp-image-1095" srcset="https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/before.png?resize=1024%2C187&amp;ssl=1 1024w, https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/before.png?resize=300%2C55&amp;ssl=1 300w, https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/before.png?resize=768%2C140&amp;ssl=1 768w, https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/before.png?w=1272&amp;ssl=1 1272w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1"></figure>


<p> 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. </p>


<p>I found it most useful to look at the “Sorted” output (which is what you <em>should</em> be doing) and then try to get my source code to match that. I think I generally did OK:</p>


<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" src="https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/after.png?resize=1024%2C194&amp;ssl=1" alt='"After" sort order, scattered rectangles of various colors, slightly less scattered than the previous image' class="wp-image-1096" srcset="https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/after.png?resize=1024%2C194&amp;ssl=1 1024w, https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/after.png?resize=300%2C57&amp;ssl=1 300w, https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/after.png?resize=768%2C146&amp;ssl=1 768w, https://i0.wp.com/frontendmasters.com/blog/wp-content/uploads/2024/02/after.png?w=1298&amp;ssl=1 1298w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1"></figure>


<p>I wasn’t able to get it perfect because of WordPress. A decent chunk of what goes into your <code>&lt;head&gt;</code> in WordPress comes from the output of the <code>&lt;php wp_head(); ?&gt;</code> 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.</p>


<p>Take your wins, that’s what I always say.</p>