@profabric/speed-insights
v0.2.3
Published
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](https://sitemetric.co) SaaS platform, enabling website
Readme
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
apiKeyto 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-insightsUsage
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
- The Sitemetric Speed Insights component collects vital performance metrics from the browser.
- These metrics are securely transmitted to the Sitemetric backend.
- 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 [email protected].
Start tracking your speed-insights today with sitemetric.co!