astro-page-insight

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.

Usage

Prerequisites

Astro 4.0 or later is required.

Installation

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(),
  ],
});

Configuration

Here is the options:

Example

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`.
      },
    }),
  ],
});

gitignore

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

+ .pageinsight

Notification

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

build.bundle

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.

Contributing

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.

Licensing

MIT Licensed. Made with ❤️ by ktym4a.