diff --git a/packages/beasties/README.md b/packages/beasties/README.md
index 1311a1a..d2abc28 100644
--- a/packages/beasties/README.md
+++ b/packages/beasties/README.md
@@ -246,6 +246,20 @@ You can estimate the contents of your viewport roughly and add a
` tag:
+
+```html
+
+
+
+
+
+```
+
+Beasties will not read, inline, prune, or mutate that tag regardless of the active preload strategy. This is useful when disabling `inlineCritical` globally would sacrifice Core Web Vitals optimizations for the rest of your stylesheets.
+
### Logger
Custom logger interface:
diff --git a/packages/beasties/src/index.ts b/packages/beasties/src/index.ts
index bdfaecb..68689ba 100644
--- a/packages/beasties/src/index.ts
+++ b/packages/beasties/src/index.ts
@@ -305,6 +305,10 @@ export default class Beasties {
* Fetch CSS content for a linked stylesheet
*/
private async fetchStylesheet(link: ChildNode, document: HTMLDocument): Promise {
+ if (link.hasAttribute('data-beasties-skip')) {
+ return undefined
+ }
+
const href = link.getAttribute('href')
// skip filtered resources, or network resources if no filter is provided
diff --git a/packages/beasties/test/beasties.test.ts b/packages/beasties/test/beasties.test.ts
index d3738f4..2d2b21c 100644
--- a/packages/beasties/test/beasties.test.ts
+++ b/packages/beasties/test/beasties.test.ts
@@ -1086,4 +1086,79 @@ describe('beasties', () => {
fs.rmSync(tmpDir, { recursive: true })
})
+
+ describe('data-beasties-skip', () => {
+ const assets: Record = {
+ '/styles.css': 'h1 { color: blue; }',
+ '/theme.css': 'body { background: red; }',
+ }
+
+ function makeBeasties(opts = {}) {
+ const b = new Beasties({ reduceInlineStyles: false, path: '/', ...opts })
+ b.readFile = filename => assets[filename.replace(/^\w:/, '').replace(/\\/g, '/')]!
+ return b
+ }
+
+ it('leaves the skipped link tag completely untouched', async () => {
+ const result = await makeBeasties().process(trim`
+
+
+
+
+
+