🎉 Nuxt Prune HTML

Nuxt module to prune html before sending it to the browser (it removes elements matching CSS selector(s)), useful for boosting performances showing a different HTML for bots (removing all the scripts).

💘 Motivation

Due to the versatility of Nuxt (and of the SSR in general), a website generated (or served) via node, 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.

These library was born to remove the scripts injected in the HTML only if a visitor is a Bot or a Chrome Lighthouse. This should speed up (blazing fast) your nuxt-website up to a value of ~ 95 in performances during an Audit because it cheats various scenarios (ex. client-only tags could lead in a slower TTI).

Obviously this could lead in some unexpected behaviors.

Cons:

• no SPA navigation;
• no lazy-load for images;
• no client-side-only.

Pro:

• some of these features aren't "used by" a Bot or a Lighthouse Audit, so you don't really need it;
• less HTML;
• fast TTI, fast FCP, fast FMP, fast ecc.

Inspired by this rcfs and this issue.

Advices

• before setting up the module, try to Disable JavaScript With Chrome DevTools and navigate;
• this plugin is made for working with Bots and it uses only the remove() method of Cheerio;
• if you generate your site it's not possibile to check the user-agent, so i choose to always prune HTML (you can disable this behavior changing hookGeneratePage to false);
• if you use some client-only components, you should prepare a version that is visually the same as the client-only and use it in the placeholder slot;
• you can check the website as a GoogleBot, following this guide.

Related things you should know

• It use the MobileDetect library to check if .is( 'bot' ), .match( options.lighthouseUserAgent ) or .match( options.matchUserAgent );
• Nuxt hooks, so the plugin has access to req.headers[ 'user-agent' ] only if the project is running as a server (ex. nuxt start);
• Cheerio.

Setup

1. Add @luxdamore/nuxt-prune-html dependency to your project;
2. Add @luxdamore/nuxt-prune-html in the modules section of your nuxt.config.js;

    yarn add @luxdamore/nuxt-prune-html # or npm install --save @luxdamore/nuxt-prune-html

Configuration

N.B. : Shallow merge, not deep merge.

    // nuxt.config.js
    export default {

        // Module installation
        modules: [ '@luxdamore/nuxt-prune-html' ],

        // Module config
        pruneHtml: {
            hideErrorsInConsole: false,
            hideGenericMessagesInConsole: false, // Disabled in production
            enabled: false, // Disabled in dev-mode due to the hot reload (is client-side)
            // Css selectors to prune
            selectors: [
                'link[rel="preload"][as="script"]',
                'script:not([type="application/ld+json"])',
            ],
            // It use Cheerio under the hood, so this is the config passed in the cheerio.load() method
            cheerio: {
                xmlMode: false,
            },
            ignoreBotOrLighthouse: false, // Remove selectors in any case, not depending on Bot or Lighthouse
            isBot: true, // Remove selectors if is a bot
            isLighthouse: true, // Remove selectors if match the Lighthouse UserAgent
            matchUserAgent: null, // Remove selectors if this userAgent is matched
            hookRenderRoute: true, // Activate in `hook:render:route`
            hookGeneratePage: true, // Activate in `hook:generate:page`
            lighthouseUserAgent: 'lighthouse', // Value of the Lighthouse UserAgent
        },

    };

Development

1. Clone this repository;
2. Install dependencies using yarn install or npm install;
3. Start development server using yarn dev or npm run dev.

🐞 Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

👥 Contribution

Please make sure to read the Contributing Guide before making a pull request.

📖 Changelog

Details changes for each release are documented in the release notes.

📃 License

MIT License // Copyright (©) 2019-present Luca Iaconelli

💸 Are you feeling generous today? :)

Do you want to share a beer? We can be good friends.. Paypal // Patreon

It's always a good day to be magnanimous - cit

💼 Hire me

✔ TODO

Just asking myself if i should do more.

• Add more tests.