webcodex is an Open Source project that aims to describe characteristics from websites. You can find the code on Github. For a description on how these metrics are being collected and visualized see below.

Tag frequency

The data collected for the graph is aggregated from the HTML response by travesing the initial status of the DOM tree.

Attribute frequency

Similarly to the previous graph, this data is collected by getting all attributes defined in each DOM element.

Predominant colors

To collect the data used on this graph the website is rendered using a headless browser (through Puppeteer) and a full size screenshot is taken. The screenshot is then processed with imagemagick to extract predominant colors in a 50x50 matrix.

Colors defined in the CSS

To collect and graph this section, all CSS resources are aggregated and a regular expression is used to identify colors, including rgb, rgba and hsla definitions.

Lighthouse

The reports are collected using the version 5 of Lighthouse and uses headless Chrome 77.0.3844.0