Sitemetric Speed Insights

A powerful and lightweight tool for collecting speed-insights data directly from the client-side. This library is designed for use with the sitemetric.co SaaS platform, enabling website owners to monitor, analyze, and optimize their website's performance metrics effortlessly.

Installation

npm install @profabric/speed-insights

Usage

To use Speed Insights in your application, you need to add the component to your app and provide an API key. The component will automatically start collecting performance metrics.

Pure HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@profabric/speed-insights@[VERSION]/web/index.umd.js"
    ></script>
  </head>
  <body>
    <pf-speed-insights apiKey="your-api-key"></pf-speed-insights>
  </body>
</html>

React

// 1. Import the component
import { SpeedInsights } from '@profabric/speed-insights/react';

// 2. Add the component to your app
function App() {
  return (
    <div className="App">
      <SpeedInsights apiKey="your-api-key" />
    </div>
  );
}

Vue

// 1. Import in your main.js or main.ts
import '@profabric/speed-insights';

// 2. Use in your template
<template>
  <div id="app">
    <pf-speed-insights apiKey="your-api-key" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Angular

// 1. Import in your app.module.ts
import { NgModule } from '@angular/core';
import '@profabric/speed-insights';

@NgModule({
  declarations: [],
  imports: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// 2. Use in your template
<pf-speed-insights apiKey="your-api-key"></pf-speed-insights>

Configuration

The Speed Insights component requires an API key to authenticate and send data to your Sitemetric dashboard. You can find your API key in your project settings:

Navigate to your project settings at /app/[project-id]/settings
Look for the "API Key" section in the settings page
Copy your API key and use it in your Speed Insights configuration

// Example configuration with API key
<SpeedInsights apiKey="your-api-key" />

// The component will automatically:
// 1. Collect performance metrics
// 2. Send data to your dashboard
// 3. Update in real-time

Metrics Collected

The Speed Insights component automatically collects the following performance metrics:

LCP (Largest Contentful Paint): Measures loading performance
CLS (Cumulative Layout Shift): Measures visual stability
TTFB (Time to First Byte): Measures server response time
FCP (First Contentful Paint): Measures initial render time
Real Experience Score: Overall performance score