Skip to content

Commit 6a85a7f

Browse files
nucliwebnucliweb
authored
Merge pull request #24 from nucliweb/add-find-inline-css
find-inline-css
2 parents 8c6fed2 + 48b3bfc commit 6a85a7f

File tree

1 file changed

+59
-24
lines changed

1 file changed

+59
-24
lines changed

‎README.md‎

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,31 @@ A curated list of snippets to get Web Performance metrics to use in the browser
99
<details>
1010
<summary>Table of Contents</summary>
1111

12-
- [Core Web Vitals](#core-web-vitals)
13-
- [Largest Contentful Paint (LCP)](#largest-contentful-paint-lcp)
14-
- [Largest Contentful Paint Sub-Parts (LCP)](#largest-contentful-paint-sub-parts-lcp)
15-
- [Quick BPP (image entropy) check](#quick-bpp-image-entropy-check)
16-
- [Cumulative Layout Shift (CLS)](#cumulative-layout-shift-cls)
17-
- [Loading](#loading)
18-
- [Time To First Byte](#time-to-first-byte)
19-
- [Scripts Loading](#scripts-loading)
20-
- [Resources hints](#resources-hints)
21-
- [Find Above The Fold Lazy Loaded Images](#find-above-the-fold-lazy-loaded-images)
22-
- [Find non Lazy Loaded Images outside of the viewport](#find-non-lazy-loaded-images-outside-of-the-viewport)
23-
- [Find render-blocking resources](#find-render-blocking-resources)
24-
- [Image Info](#image-info)
25-
- [Fonts Preloaded, Loaded, and Used Above The Fold](#fonts-preloaded-loaded-and-used-above-the-fold)
26-
- [First And Third Party Script Info](#first-and-third-party-script-info)
27-
- [First And Third Party Script Timings](#first-and-third-party-script-timings)
28-
- [Inline Script Info and Size](#inline-script-info-and-size)
29-
- [Inline Script Info and Size Including `__NEXT_DATA__`](#inline-script-info-and-size-including-__next_data__)
30-
- [Get your `<head>` in order](#get-your-head-in-order)
31-
- [e.g. web.dev](#eg-webdev)
32-
- [Interaction](#interaction)
33-
- [Long Task](#long-task)
34-
- [Layout Shifts](#layout-shifts)
35-
- [Interactions](#interactions)
12+
- [Core Web Vitals](#core-web-vitals)
13+
- [Largest Contentful Paint (LCP)](#largest-contentful-paint-lcp)
14+
- [Largest Contentful Paint Sub-Parts (LCP)](#largest-contentful-paint-sub-parts-lcp)
15+
- [Quick BPP (image entropy) check](#quick-bpp-image-entropy-check)
16+
- [Cumulative Layout Shift (CLS)](#cumulative-layout-shift-cls)
17+
- [Loading](#loading)
18+
- [Time To First Byte](#time-to-first-byte)
19+
- [Scripts Loading](#scripts-loading)
20+
- [Resources hints](#resources-hints)
21+
- [Find Above The Fold Lazy Loaded Images](#find-above-the-fold-lazy-loaded-images)
22+
- [Find non Lazy Loaded Images outside of the viewport](#find-non-lazy-loaded-images-outside-of-the-viewport)
23+
- [Find render-blocking resources](#find-render-blocking-resources)
24+
- [Image Info](#image-info)
25+
- [Fonts Preloaded, Loaded, and Used Above The Fold](#fonts-preloaded-loaded-and-used-above-the-fold)
26+
- [First And Third Party Script Info](#first-and-third-party-script-info)
27+
- [First And Third Party Script Timings](#first-and-third-party-script-timings)
28+
- [Inline Script Info and Size](#inline-script-info-and-size)
29+
- [Inline Script Info and Size Including ```__NEXT_DATA__```](#inline-script-info-and-size-including-__next_data__)
30+
- [Inline CSS Info and Size](#inline-css-info-and-size)
31+
- [Get your `<head>` in order](#get-your-head-in-order)
32+
- [e.g. web.dev](#eg-webdev)
33+
- [Interaction](#interaction)
34+
- [Long Task](#long-task)
35+
- [Layout Shifts](#layout-shifts)
36+
- [Interactions](#interactions)
3637
</details>
3738

3839
## Core Web Vitals
@@ -711,6 +712,40 @@ function findInlineScriptsWithNextData() {
711712

712713
console.log(findInlineScriptsWithNextData());
713714

715+
```
716+
717+
### Inline CSS Info and Size
718+
719+
Find all inline style tags and list them in a table with individual and total byte size. Customize the table below.
720+
721+
```javascript
722+
723+
// Wait for the page to fully load
724+
725+
function findAllInlineCSS() {
726+
const convertToKb = (bytes) => bytes / 1000;
727+
const inlineCSS = document.querySelectorAll("style");
728+
let totalByteSize = 0;
729+
for (const css of [...inlineCSS]) {
730+
const html = css.innerHTML;
731+
const size = new Blob([html]).size;
732+
css.byteSizeInKb = convertToKb(size)
733+
totalByteSize += size;
734+
}
735+
// customize table here, can right click on header in console to sort table
736+
console.table(inlineCSS, [
737+
"baseURI",
738+
"parentElement",
739+
"byteSizeInKb",
740+
"innerHTML"
741+
]);
742+
743+
console.log(`Total size: ${convertToKb(totalByteSize)} kB`);
744+
}
745+
746+
findAllInlineCSS()
747+
748+
714749
```
715750
716751
### Get your `<head>` in order

0 commit comments

Comments
 (0)