Docs
usePageLoadTime

Measure the time it takes for a page to load with the usePageLoadTime hook, providing insights into performance and user experience.

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-page-load-time

Usage

"use client"
 
import { usePageLoadTime } from "@/hooks/use-page-load-time"
 
export function Component() {
  const { timings, getLoadTime, loadTime, isLoaded } = usePageLoadTime()
 
  return (
    <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
      <p>Page load time: {loadTime ? `${loadTime} ms` : "Calculating..."}</p>
      <button onClick={getLoadTime} disabled={isLoaded}>
        {isLoaded ? "Load Time Calculated" : "Calculate Load Time"}
      </button>
      <pre>{JSON.stringify(timings, null, 2)}</pre>
    </div>
  )
}

API Reference

Return Values

NameTypeDescription
timings{navigationStart: number, domContentLoaded: number, load: number, domComplete: number, total: number}An object containing various timing metrics related to the page load process.
getLoadTimeFunctionFunction to trigger the calculation of the page load time.
loadTimenumberThe calculated page load time in milliseconds.
isLoadedbooleanIndicates whether the load time has been calculated.
usePageLeaveusePagination