Get your <head> in order
Inspired by Harry Roberts' work on ct.js and Vitaly Friedman's Nordic.js 2022 presentation:
How you order elements in the <head> can have an effect on the (perceived) performance of the page.
This script helps you identify which elements are out of order.
- Copy capo.js
- Run it in a new DevTools snippet
- Explore the console logs
The script logs two info groups to the console: the actual order of the <head>, and the optimal order. In this collapsed view, you can see at a glance whether there are any high impact elements out of order.
Each "weight" has a corresponding color, with red being the highest and blue/grey being the lowest. See capo.js for the exact mapping.
Here are a few examples.
Expanding the actual or sorted views reveals the detailed view. This includes an itemized list of each <head> element and its weight as well as a reference to the actual or sorted <head> element.
Here you can see a drilled-down view of the end of the <head> for the NYT site, where high impact origin trial meta elements are set too late.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent