docs | demo

This is an Astro integration that shows everything to improve from Lighthouse results directly on the page.

[!IMPORTANT] This result is by dev mode, so it may not be accurate.
Especially, the Score is not accurate.

Astro 4.0 or later is required.

Install the integration automatically using the Astro CLI:

pnpm astro add astro-page-insight

npx astro add astro-page-insight

yarn astro add astro-page-insight

Or install it manually:

1. Install the required dependencies

pnpm add astro-page-insight

npm install astro-page-insight

yarn add astro-page-insight

2. Add the integration to your astro config

+import pageInsight from "astro-page-insight";

export default defineConfig({
  integrations: [
+    pageInsight(),
  ],
});

Here is the options:

import pageInsight from "astro-page-insight";

export default defineConfig({
  integrations: [
    pageInsight({
      lh: {
        weight: 0.5,
        breakPoint: 1024,
      },
      firstFetch: "open",
      cache: true,
      build: {
        bundle: true, // You should get value from the environment variable. (e.g. process.env.STAGING === "true")
        showOnLoad: true, // This option is only available when `bundle` is `true`.
      },
    }),
  ],
});

If you want to ignore the cache, add the following to your .gitignore:

+ .pageinsight

You can sometimes see that the notification is displayed in the app.
There are three types of notifications:

If you set build.bundle to true, It will bundle results from local cache, So you need to have lighthouse results(cache) on build time.

This package is structured as a monorepo:

• playground contains code for testing the package
• package contains the actual package

Install dependencies using pnpm:

pnpm i --frozen-lockfile

Watch for package changes:

pnpm package:dev

Start the playground with blog:

pnpm playground:blog

Start the playground with ssr:

pnpm playground:ssr

Start the playground with starlog:

pnpm playground:starlog

You can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.

MIT Licensed. Made with ❤️ by ktym4a.