Detalhes do pacote

@profabric/speed-insights

erdkse2030.2.3

The Sitemetric Speed Insights library is 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

readme (leia-me)

Sitemetric Speed Insights

The Sitemetric Speed Insights library is 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.

Features

  • Client-Side Speed Insights Collection: Automatically collect important speed-insights such as LCP, FID, CLS, TTFB, Real Experience Score, and more.
  • Flexible Integration: Available as a Web Component or a React Component for seamless integration into any web application.
  • API Key Security: Use an apiKey to ensure secure and authorized data collection.
  • Real-Time Data: Deliver real-time insights to your Sitemetric dashboard.

Installation

You can install the library via npm:

npm install @profabric/speed-insights

Usage

Web Component

The web component <pf-speed-insights> is easy to use and requires minimal setup. Simply include the component in your HTML file and provide the apiKey attribute to authenticate data collection.

Example

<!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>
    <title>Speed Insights</title>
  </head>
  <body>
    <!-- Add the component to your page -->
    <pf-speed-insights apiKey="your-api-key"></pf-speed-insights>
  </body>
</html>

React Component

For React projects, you can use the library's React wrapper for easy integration.

Importing the Component

import React from 'react';
import { SpeedInsights } from '@profabric/speed-insights/react';

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

export default App;

Angular Component

For Angular projects, use the web component by integrating it into your Angular module without lazy importing.

Example

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import '@profabric/speed-insights';

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

Usage in Template

<pf-speed-insights apiKey="your-api-key"></pf-speed-insights>

Vue Component

For Vue projects, use the web component directly in your template without lazy importing.

Example

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

<script>
import '@profabric/speed-insights';

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

Next.js Component

For Next.js projects, you can use the React wrapper provided by the library.

Example

import React from 'react';
import { SpeedInsights } from '@profabric/speed-insights/react';

const Home = () => {
  return (
    <div>
      <h1>Speed Insights</h1>
      <SpeedInsights apiKey="your-api-key" />
    </div>
  );
};

export default Home;

Attributes

Web Component

  • apiKey (Required): A unique key to authenticate your data collection. This ensures the data is securely transmitted and linked to your Sitemetric account.

React Component

  • apiKey (Required): Passed as a prop to the React component for secure authentication.

How It Works

  1. The Sitemetric Speed Insights component collects vital performance metrics from the browser.
  2. These metrics are securely transmitted to the Sitemetric backend.
  3. Website owners can view detailed analytics and insights via the Sitemetric dashboard.

Supported Metrics

The library captures the following speed-insights:

  • Largest Contentful Paint (LCP): Measures loading performance.
  • First Input Delay (FID): Measures interactivity.
  • Cumulative Layout Shift (CLS): Measures visual stability.
  • Time to First Byte (TTFB): Measures the server response time.
  • First Contentful Paint (FCP): Measures the time it takes to render the first piece of DOM content.
  • Real Experience Score: Provides a composite score reflecting real user experiences.

License

This library is licensed under the MIT License.

Support

For issues or inquiries, please contact support@sitemetric.co.

Start tracking your speed-insights today with sitemetric.co!