Page Load Time

Name: Page Load Time
Author: thedaviddias

thedaviddias/frontendchecklist

1 installs
73.4k repo stars
Updated June 18, 2026
thedaviddias/frontendchecklist

Measures page load time against a 3-second threshold and applies lazy loading, CDN, caching, and resource optimization to hit it.

About

Verifies pages load under 3 seconds on a standard connection since slower pages spike bounce rate and hurt conversions and SEO. A developer uses it when auditing slow page loads and rendering delays.

53% of mobile users abandon sites over 3 seconds
Focus on Core Web Vitals: LCP, FID/INP, CLS

Page Load Time by the numbers

1 all-time installs (skills.sh)
Ranked #1,914 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/thedaviddias/frontendchecklist --skill page-load-time

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/thedaviddias/frontendchecklist/page-load-time.svg)](https://skillselion.com/skills/thedaviddias/frontendchecklist/page-load-time)

Installs	1
repo stars	★ 73.4k
Last updated	June 18, 2026
Repository	thedaviddias/frontendchecklist ↗

What it does

Measures page load time against a 3-second threshold and applies lazy loading, CDN, caching, and resource optimization to hit it.

Files

SKILL.mdMarkdownGitHub ↗

Keep page load time under 3 seconds

Studies show 53% of mobile users abandon sites that take longer than 3 seconds to load—slow pages directly hurt conversions, engagement, and SEO rankings.

Quick Reference

3 seconds is the threshold where bounce rates spike dramatically
53% of mobile users abandon sites taking over 3 seconds
Focus on Core Web Vitals: LCP, FID/INP, CLS
Test on throttled 3G to simulate real-world conditions

Check

Measure the page load time and verify it's under 3 seconds on a standard connection.

Fix

Optimize page load time through lazy loading, CDN usage, caching strategies, and resource optimization.

Explain

Explain how page load time affects bounce rate, SEO rankings, and user satisfaction.

Code Review

Review the routes, assets, and loading behavior that affect Keep page load time under 3 seconds. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/performance/page-load-time

Keep page load time under 3 seconds

Page fully loads in under 3 seconds on a standard connection.

Priority: high · Difficulty: intermediate · Time: 30 min

--- Page load time directly impacts user engagement, conversions, and SEO.

Code Examples

1. Optimize Critical Rendering Path

<!DOCTYPE html>
<html>
<head>
  <!-- Preconnect to critical origins -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://cdn.example.com" crossorigin>

  <!-- Preload critical resources -->
  <link rel="preload" href="/critical.css" as="style">
  <link rel="preload" href="/hero.webp" as="image">

  <!-- Inline critical CSS -->
  <style>/* Critical above-fold styles */</style>

  <!-- Defer non-critical CSS -->
  <link rel="stylesheet" href="/main.css" media="print" onload="this.media='all'">
</head>
</html>

2. Optimize JavaScript Loading

<!-- Defer non-critical JavaScript -->
<script src="/app.js" defer></script>

<!-- Async for independent scripts -->
<script src="/analytics.js" async></script>

<!-- Module scripts are deferred by default -->
<script type="module" src="/module.js"></script>

3. Image Optimization

// Next.js automatic image optimization

function Hero() {
  return (
    
  )
}

4. Server-Side Optimization

// Enable compression
// Express.js

app.use(compression())

// Set caching headers
app.use('/static', express.static('public', {
  maxAge: '1y',
  immutable: true
}))

Why It Matters

Studies show 53% of mobile users abandon sites that take longer than 3 seconds to load—slow pages directly hurt conversions, engagement, and SEO rankings.

Load Time Impact

Load Time	Bounce Rate	Conversion Impact
1-2s	~9%	Baseline
2-3s	~13%	-7% conversions
3-5s	~25%	-16% conversions
5-10s	~38%	-35% conversions
10s+	~50%+	Severe impact

Key Metrics to Measure

Metric	Good	Needs Work	Poor
Time to First Byte	< 200ms	< 500ms	> 500ms
First Contentful Paint	< 1.8s	< 3s	> 3s
Largest Contentful Paint	< 2.5s	< 4s	> 4s
Time to Interactive	< 3.8s	< 7.3s	> 7.3s
Full Page Load	< 3s	< 5s	> 5s

React Performance Patterns


// Code splitting
const HeavyComponent = lazy(() => import('./HeavyComponent'))

// Memoize expensive components
const ExpensiveList = memo(function ExpensiveList({ items }) {
  return items.map(item => )
})

// Skeleton loading for perceived performance
function Page() {
  return (
    }>
      
    
  )
}

Measuring Load Time

// Performance API for precise measurements
function measureLoadTime() {
  const timing = performance.getEntriesByType('navigation')[0]

  return {
    dns: timing.domainLookupEnd - timing.domainLookupStart,
    tcp: timing.connectEnd - timing.connectStart,
    ttfb: timing.responseStart - timing.requestStart,
    domContentLoaded: timing.domContentLoadedEventEnd - timing.fetchStart,
    fullLoad: timing.loadEventEnd - timing.fetchStart
  }
}

// Report to analytics
window.addEventListener('load', () => {
  const metrics = measureLoadTime()
  if (metrics.fullLoad > 3000) {
    console.warn('Page load exceeded 3s target:', metrics)
  }
})

Testing Tools

Tool	Best For
Lighthouse	Overall performance audit
WebPageTest	Detailed waterfall analysis
Chrome DevTools	Real-time debugging
PageSpeed Insights	Field data + lab data
GTmetrix	Historical tracking