Get your ๏นค๐๐๐๐๏นฅ in order
in order_Inspired by Harry Roberts' work on ct.css and Vitaly Friedman's Nordic.js 2022 presentation:
How you order elements in the can have an effect on the (perceived) performance of the page.
This script helps you identify which elements are out of order.
โจ _New: Install the Capo Chrome extension_ โจ
1. Install the Chrome extension
3. Explore the console logs
For applications that add lots of dynamic content to the on the client, it'd be more accurate to look at the server-rendered instead.
You can also use capo.js programmatically to analyze HTML elements in Node.js or other JavaScript environments.
``bash`
npm install @rviscomi/capo.js
`javascript
// Analyze a head element
const head = / your head element /;
const adapter = new BrowserAdapter(); // Or other adapter
const result = analyzeHead(head, adapter);
console.log(result.elements); // Array of head elements with weights
console.log(result.violations); // Number of ordering violations
console.log(result.warnings); // Validation warnings
`
Capo.js uses adapters to work with different HTML representations:
`javascript
import { analyzeHead, BrowserAdapter } from '@rviscomi/capo.js';
// For browser DOM (if using in browser context)
const browserAdapter = new BrowserAdapter();
const browserResult = analyzeHead(document.head, browserAdapter);
`
Import only what you need for smaller bundle sizes:
`javascript
// Import just the core analyzer
import { analyzeHead, checkOrdering } from '@rviscomi/capo.js';
// Import just adapters
import { BrowserAdapter } from '@rviscomi/capo.js/adapters';
// Import specific adapters
import { BrowserAdapter } from '@rviscomi/capo.js/adapters/browser';
// Import rules API
import { ElementWeights, getWeight } from '@rviscomi/capo.js/rules';
// Import validation API
import { isValidElement, getValidationWarnings } from '@rviscomi/capo.js/validation';
`
#### Core Functions
- analyzeHead(head, adapter) - Analyzes a head element and returns detailed resultsanalyzeHeadWithOrdering(head, adapter)
- - Analyzes with ordering violationscheckOrdering(elements)
- - Checks for ordering violations in element arraygetWeightCategory(weight)
- - Gets the category name for a weight value
#### Rules API
- ElementWeights - Constant object mapping element types to weight valuesgetWeight(element, adapter)
- - Gets the weight for a specific elementgetHeadWeights(head, adapter)
- - Gets weights for all elements in head
Plus individual detector functions: isMeta(), isTitle(), isPreconnect(), etc.
#### Validation API
- VALID_HEAD_ELEMENTS - Array of valid head element namesisValidElement(element, adapter)
- - Checks if an element is valid in headhasValidationWarning(element, adapter)
- - Checks if element has warningsgetValidationWarnings(head, adapter)
- - Gets all validation warningsgetCustomValidations(element, adapter)
- - Gets custom validation rules
#### Adapters
- BrowserAdapter - For working with browser DOM elementsAdapterInterface
- - Base interface for custom adaptersvalidateAdapter(adapter)
- - Validates an adapter implementation
See MIGRATION.md for detailed migration guide.
Key changes:
- All analysis functions now require an adapter parameter
- New subpath exports for granular imports
- Enhanced TypeScript support via JSDoc
WIP see crx/
Alternatively, you can use local overrides in DevTools to manually inject the capo.js script into the document so that it runs before anything else, eg the first child of
. Harry Roberts also has a nifty video showing how to use this feature. This has some drawbacks as well, for example the inline script might be blocked by CSP.Another idea would be to use something like Cloudflare workers to inject the script into the HTML stream. To work around CSP issues, you can write the worker in such a way that it parses out the correct
nonce and adds it to the inline script. _(Note: Not tested, but please share examples if you get it working! _๐_)_Summary view
The script logs two info groups to the console: the actual order of the
, 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.
$3

$3

$3

stackoverflow.com

Detailed view
Expanding the actual or sorted views reveals the detailed view. This includes an itemized list of each
element and its weight as well as a reference to the actual or sorted element.$3
Here you can see a drilled-down view of the end of the
` for the NYT site, where high impact origin trial meta elements are set too late.