GithubHelp home page GithubHelp logo

niaodian / capo.js Goto Github PK

View Code? Open in Web Editor NEW

This project forked from rviscomi/capo.js

0.0 0.0 0.0 6.59 MB

Get your <head> in order

Home Page: https://rviscomi.github.io/capo.js/

License: Apache License 2.0

JavaScript 83.15% CSS 14.32% HTML 2.53%

capo.js's Introduction

Get your <head> in order

Inspired by Harry Roberts' work on ct.css and Vitaly Friedman's Nordic.js 2022 presentation:

image

Why it matters

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.

How to use it

โœจ New: Install the Capo Chrome extension โœจ

  1. Copy capo.js
  2. Run it in a new DevTools snippet, or use a bookmarklet generator
  3. Explore the console logs
capo screenshot

For applications that add lots of dynamic content to the <head> on the client, it'd be more accurate to look at the server-rendered <head> instead.

Chrome extension

Capo.js Chrome extension

WIP see crx/

WebPageTest

You can use the capo WebPageTest custom metric to evaluate only the server-rendered HTML <head>. Note that because this approach doesn't output to the console, we lose the visualization.

BigQuery

You can also use the httparchive.fn.CAPO function on BigQuery to process HTML response bodies in the HTTP Archive dataset. Similar to the WebPageTest approach, the output is very basic.

Other

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 <body>. 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 <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.

image

docs.github.io

image

web.dev

image

stackoverflow.com

image

Detailed view

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.

image

capo.js's People

Contributors

rviscomi avatar dgrammatiko avatar kurtextrem avatar radum avatar stoyan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.