🔌⚡ Nuxt Prune HTML
Nuxt module to prune html before sending it to the browser (it removes elements matching CSS selector(s)), useful for boosting performance showing a different HTML for bots/audits by removing all the scripts with dynamic rendering.
💘 Motivation
Due to the versatility of Nuxt (and of the SSR in general), a website generated (or served) via node server, has everything it needs already injected (in the HTML, ex. styles). So, usually, for a bot or for a human, the website its almost visually the same without Javascript.
This library is born to remove the scripts injected in the HTMLonlyif a visitor is aBot(or a "Performance Audit", ex.Lighthouse).
This shouldspeed up(blazing fast) yournuxt-websiteup to a value of~95inperformanceduring anAuditbecause itcheats various scenarios.
Features
- Prune based onmobile detection;
- Match theuser agent;
- Match abot;
- Match anaudit;
- Prune based onheaders values(useful in Lambdas);
- Prune based onquery parameters(useful during navigation or generation, for an hybrid-experience).
Pro et contra
This could cause some unexpected behaviors.
Cons.:
- no
SPA routingonclient-sideforbots and audits; - no
hydrationonclient-sideforbots and audits:- ex.
vue-lazy-hydration,hydrateOnInteraction,hydrateWhenIdleandhydrateWhenVisiblearejavascript client-side codeso they're pruned out;
- ex.
- no
<client-only>components; - can break
lazy-loadfor images.
Pros.:
- some of these featuresaren't "used by"a bot/audit, so you don't really need them:
- bots doesn't handle
SPA routing; <client-only>componentscould lead in a slower TTI;<client-only>componentscan contain astatic placeholder;
- bots doesn't handle
lazy-loadfor images can be fixed with anative attribute, or with a customscript/selectorToKeep(check the configuration);hydrationdecreaseperformance, so it's ok to prune it forbots or audits;- less HTML, assets and resources are served to browsers and clients;
- bot/audit only have the Javascript they need;
- withless assetsto download, the number of urls crawled arewidely boosted;
- bots,PageSpeed Insights,Google MeasureandLighthouse Auditare already pruned by the plugin with the default configuration;
- fasterweb-vitals, faster TTI, faster FCP, faster FMP,faster all.
N.B.:This is known asDynamic Renderingandit's notconsideredblack-hatorcloaking.
💡 Lighthouse
Setup
- Install
@luxdamore/nuxt-prune-htmlas a dependency:yarn add @luxdamore/nuxt-prune-html;- or,
npm install --save @luxdamore/nuxt-prune-html;
- Add
@luxdamore/nuxt-prune-htmlin themodulesarray of yournuxt.config.js.
Configuration
+@luxdamore/nuxt-prune-html - 🔌⚡ Nuxt module to prune html before sending it to the browser (it removes elements matching CSS selector(s)), useful for boosting performance showing a different HTML for bots/audits by removing all the scripts with dynamic rendering 🔌⚡ Nuxt Prune HTML
Nuxt module to prune html before sending it to the browser (it removes elements matching CSS selector(s)), useful for boosting performance showing a different HTML for bots/audits by removing all the scripts with dynamic rendering.
💘 Motivation
Due to the versatility of Nuxt (and of the SSR in general), a website generated (or served) via node server, has everything it needs already injected (in the HTML, ex. styles). So, usually, for a bot or for a human, the website its almost visually the same without Javascript.
This library is born to remove the scripts injected in the HTMLonlyif a visitor is aBot(or a "Performance Audit", ex.Lighthouse).
This shouldspeed up(blazing fast) yournuxt-websiteup to a value of~95inperformanceduring anAuditbecause itcheats various scenarios.
Features
- Prune based onmobile detection;
- Match theuser agent;
- Match abot;
- Match anaudit;
- Prune based onheaders values(useful in Lambdas);
- Prune based onquery parameters(useful during navigation or generation, for an hybrid-experience).
Pro et contra
This could cause some unexpected behaviors.
Cons.:
- no
SPA routingonclient-sideforbots and audits; - no
hydrationonclient-sideforbots and audits:- ex.
vue-lazy-hydration,hydrateOnInteraction,hydrateWhenIdleandhydrateWhenVisiblearejavascript client-side codeso they're pruned out;
- no
<client-only>components; - can break
lazy-loadfor images.
Pros.:
- some of these featuresaren't "used by"a bot/audit, so you don't really need them:
- bots doesn't handle
SPA routing; <client-only>componentscould lead in a slower TTI;<client-only>componentscan contain astatic placeholder;
lazy-loadfor images can be fixed with anative attribute, or with a customscript/selectorToKeep(check the configuration);hydrationdecreaseperformance, so it's ok to prune it forbots or audits;- less HTML, assets and resources are served to browsers and clients;
- bot/audit only have the Javascript they need;
- withless assetsto download, the number of urls crawled arewidely boosted;
- bots,PageSpeed Insights,Google MeasureandLighthouse Auditare already pruned by the plugin with the default configuration;
- fasterweb-vitals, faster TTI, faster FCP, faster FMP,faster all.
N.B.:This is known asDynamic Renderingandit's notconsideredblack-hatorcloaking.
💡 Lighthouse
Setup
- Install
@luxdamore/nuxt-prune-htmlas a dependency:yarn add @luxdamore/nuxt-prune-html;- or,
npm install --save @luxdamore/nuxt-prune-html;
- Add
@luxdamore/nuxt-prune-htmlin themodulesarray of yournuxt.config.js.
Configuration
// nuxt.config.js
export default {
@@ -17,7 +17,7 @@
'link[rel="preload"][as="script"]',
'script:not([type="application/ld+json"])',
],
- selectorsToKeep: null, // disallow pruning of scripts with this class (could be an array of classes), N.B.: each `selectorsToKeep` will be appended to every `selectors`, ex.: `script:not([type="application/ld+json"]):not(__selectorToKeep__)`
+ classesSelectorsToKeep: [], // disallow pruning of scripts with this class (could be an array of classes), N.B.: each `classesToKeep` will be appended to every `selectors`, ex.: `script:not([type="application/ld+json"]):not(__classesToKeep__)`
link: [], // Inject custom links, only if pruned
script: [], // Inject custom scripts, only if pruned
htmlElementClass: null, // this is a string added as a class to the <html> element