Skip to content
https://www.codepen.io

Performance

· 16 checks — Lighthouse + waterfall + sustainability rolled into one auditable list.
SCORE
74
GRADE
C
FIX
5
REVIEW
1
PASS
8
INFO
2

Performance-focused optimization plan with CWV assessment, top offenders, and time estimates

Mobile Desktop
34
Performance Overall performance score (0–100) based on Core Web Vitals and other metrics. 90+ is good.
86
Accessibility Measures how accessible the page is for users with disabilities. Checks color contrast, ARIA labels, and semantic HTML.
81
Best Practices Checks for modern web development best practices including HTTPS, no console errors, and secure JavaScript.
92
SEO Measures basic SEO optimizations: meta tags, crawlability, link text, and mobile friendliness.

First Contentful Paint First Contentful Paint — how long until the browser renders the first piece of content. Under 1.8s is good.

9.71 s

Largest Contentful Paint Largest Contentful Paint — how long until the largest visible element loads. Under 2.5s is good.

11.91 s

Total Blocking Time Total Blocking Time — total time the main thread was blocked, preventing user input. Under 200ms is good.

986 ms

Cumulative Layout Shift Cumulative Layout Shift — measures visual stability. How much the page layout shifts during loading. Under 0.1 is good.

0.007

Speed Index Speed Index — how quickly content is visually displayed during load. Under 3.4s is good.

9.71 s

Time to Interactive Time to Interactive — how long until the page is fully interactive and responds to user input. Under 3.8s is good.

11.99 s

Page Load Progression

604 ms
1.2 s
1.8 s
2.4 s
3.0 s
3.6 s
4.2 s
4.8 s
Checks
16
8 PASS 1 REVIEW 5 FIX
D
Page Weight Budget
Action
2.6 MB transferred, 65 requests
FIX
2.6 MB transferred, 65 requests
Warning::
Page weighs 6.5 MB (2.6 MB transferred)
Warning::
Images are 1.3 MB — compress or use modern formats
Convert images to WebP/AVIF and resize to display dimensions to reduce transfer size.
Got: 1.3 MB
Warning::
JavaScript is 1.0 MB — consider code splitting or lazy loading
Large JavaScript bundles delay interactivity. Split code by route or defer non-critical scripts.
Got: 1.0 MB
Info::
65 HTTP requests
Info::
Estimated 0.54 g CO2 per page load
2.6 MB / 2.4 MB budget
2.6 MB transferred
65 requests
0.54 g CO2 per page load
Images 1.3 MiB 50%
JavaScript 1.0 MiB 40%
Fonts 165.5 KiB 6%
CSS 77.3 KiB 3%
HTML 7.4 KiB 0%
Other 3.9 KiB 0%
Other 2.7 KiB 0%
Other 1.0 KiB 0%
Other 0 B 0%
0 2.4 MB 4.9 MB
Over budget

Convert images to WebP/AVIF and resize to display dimensions to reduce transfer size.

Why this matters

Image bandwidth is high — modern formats (WebP/AVIF) and resizing typically cut it 50%+.

Source: web.dev

Large JavaScript bundles delay interactivity. Split code by route or defer non-critical scripts.

Why this matters

JavaScript bundle is large — code-split routes and lazy-load off-screen components to defer.

Source: web.dev

D
Third-Party Impact
Action
100% third-party, 0 ms blocking
FIX
100% third-party, 0 ms blocking
Warning::
Third-party code accounts for 100% of page weight (2.6 MiB of 2.6 MiB)
Info::
Third-party blocking time is low (0 ms)
100%
First-party Third-party
F
JS Execution Cost
Action
3966ms total JS execution
FIX
3966ms total JS execution
Warning::
https://cpwebassets.codepen.io/assets/packs/js/ven...: 1162ms CPU time
Warning::
https://codepen.io/: 1003ms CPU time
Warning::
https://cpwebassets.codepen.io/assets/packs/js/eve...: 648ms CPU time
Warning::
Unattributable: 618ms CPU time
Warning::
https://codepen.io/cdn-cgi/challenge-platform/scri...: 349ms CPU time
Warning::
Third-party scripts: 3966ms (100% of total)

Main Thread Breakdown

Script Evaluation 46% Other 24% Style & Layout 13% Script Parsing & Compilation 12%
ScriptTotalScriptingParse/CompileParty
https://cpwebassets.codepen.io/assets/packs/js/vendor-9a4e874746c7ba6cb4f7.chunk.js1162ms798ms264ms3rd
https://codepen.io/1003ms29ms1ms3rd
https://cpwebassets.codepen.io/assets/packs/js/everypage-4eb662cbcfa735a99fa7.js648ms637ms9ms3rd
Unattributable618ms19ms0ms3rd
https://codepen.io/cdn-cgi/challenge-platform/scripts/jsd/main.js349ms325ms3ms3rd
https://cpwebassets.codepen.io/assets/packs/js/6-71433d627ed09ffe0e50.chunk.js186ms1ms185ms3rd
F
JS Bundles
Action
9 scripts, 642 KB unused
FIX
9 scripts, 642 KB unused
Warning::
https://cpwebassets.codepen.io/assets/packs/js/ven...: 424 KB unused (64%)
Consider code splitting or tree shaking to reduce unused code.
Warning::
https://cpwebassets.codepen.io/assets/packs/js/6-7...: 218 KB unused (65%)
Consider code splitting or tree shaking to reduce unused code.
Info::
Total unused JavaScript: 642 KB
642 KB unused JavaScript

Downloaded but never executed on this page.

ScriptSizeUnusedMinifiedParty
https://cpwebassets.codepen.io/assets/packs/js/vendor-9a4e874746c7ba6cb4f7.chunk.js660 KB424 KB (64%)✓3rd
https://cpwebassets.codepen.io/assets/packs/js/6-71433d627ed09ffe0e50.chunk.js334 KB218 KB (65%)✓3rd
https://cpwebassets.codepen.io/assets/common/browser_support-2c1a3d31dbc6b5746fb7dacdbc81dd613906db219f13147c66864a6c3448246c.js1 KB—✓3rd
https://cpwebassets.codepen.io/assets/packs/js/everypage-4eb662cbcfa735a99fa7.js22 KB—✓3rd
https://cpwebassets.codepen.io/assets/packs/js/referrer-tracking-5d275cb3ce20c0c5d483.js1 KB—✓3rd
https://cpwebassets.codepen.io/assets/packs/js/Homepage-Anon-8f60905145f01773ec50.chunk.js6 KB—✓3rd
https://codepen.io/cdn-cgi/challenge-platform/h/b/scripts/jsd/625261456364/main.js?12 KB—✓3rd
https://cdn.carbonads.com/carbon.js?serve=CK7IVK7U&placement=codepenio11 KB—✓3rd
https://srv.buysellads.com/ads/CEAICKQN.json?callback=customJSONPCallback1 KB—✓3rd

Consider code splitting or tree shaking to reduce unused code.

Why this matters

This bundle has high unused code — code-split or tree-shake to ship only what executes.

Source: web.dev / Lighthouse coverage

Consider code splitting or tree shaking to reduce unused code.

Why this matters

This bundle has high unused code — code-split or tree-shake to ship only what executes.

Source: web.dev / Lighthouse coverage

F
HTTP Caching
Action
No cache headers
FIX
No cache headers
Warning::
No Cache-Control header found
Browsers will use heuristic caching, which can be unpredictable. Set explicit cache headers.

No Cache-Control header

Adding a Cache-Control header can significantly improve repeat-visit performance.

C
Image Optimization
Action
35 images, 0 KB saveable
REVIEW
35 images, 0 KB saveable
Warning::
https://cpwebassets.codepen.io/assets/packs/icon-b... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/icon-l... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://static4.buysellads.net/uu/7/173968/1774279... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/editor... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/square... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://static4.buysellads.net/uu/7/173968/1774279... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/icon-s... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/adobe-... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/editor... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/grubhu... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/airbnb... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/ibm-c6... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/editor... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/netfli... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/micros... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/editor... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/editor... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/salesf... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/lyft-8... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
Warning::
https://cpwebassets.codepen.io/assets/packs/editor... is missing width/height — may cause layout shift
Set explicit width and height to prevent CLS.
35 images 1.3 MB
0 oversized -0 KB
27 legacy format
20 missing dimensions CLS risk

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

Set explicit width and height to prevent CLS.

Why this matters

Image without explicit width/height — browser can't reserve space; CLS jumps when image loads.

Source: web.dev / Core Web Vitals

A+
Text Compression
All text resources are compressed
PASS
All text resources are compressed
Info::
All text resources are compressed
All text resources are properly compressed.
A+
Font Loading
6 fonts (165 KB)
PASS
6 fonts (165 KB)
Info::
6 font(s) use font-display: swap (FOUT risk but functional)

Web fonts

6

165 KB total

Render-blocking

0

of 6

Dominant font-display

swap

Most common across fonts

Font loading timeline
Transfer FOIT (block) FOUT (swap)
0 ms 2.0 s 4.0 s 6.0 s 8.0 s 10.0 s 12.0 s FCP 9.7 s LCP 11.9 shttps://codepen.io/cf-fonts/s/lato/5.0.18/latin/400/normal.woff2normal.woff2 https://codepen.io/cf-fonts/s/lato/5.0.18/latin/400/normal.woff2 — 23.3 KiB — 0 ms — font-display: swaphttps://codepen.io/cf-fonts/s/lato/5.0.18/latin/900/normal.woff2normal.woff2 https://codepen.io/cf-fonts/s/lato/5.0.18/latin/900/normal.woff2 — 22.2 KiB — 0 ms — font-display: swaphttps://public.codepenassets.com/fonts/telefon-black.654a55c7fc5c69899e4c776e9440cb.woff2telefon-black.654a55c7f... https://public.codepenassets.com/fonts/telefon-black.654a55c7fc5c69899e4c776e9440cb.woff2 — 36.0 KiB — 0 ms — font-display: swaphttps://codepen.io/cf-fonts/s/lato/5.0.18/latin/700/normal.woff2normal.woff2 https://codepen.io/cf-fonts/s/lato/5.0.18/latin/700/normal.woff2 — 22.8 KiB — 0 ms — font-display: swaphttps://public.codepenassets.com/fonts/telefon-bold.30e9132f184f36be19ce6e4b9024ab.woff2telefon-bold.30e9132f18... https://public.codepenassets.com/fonts/telefon-bold.30e9132f184f36be19ce6e4b9024ab.woff2 — 37.1 KiB — 0 ms — font-display: swaphttps://codepen.io/cf-fonts/s/lato/5.0.18/latin/400/italic.woff2italic.woff2 https://codepen.io/cf-fonts/s/lato/5.0.18/latin/400/italic.woff2 — 24.1 KiB — 0 ms — font-display: swap
normal.woff2 woff2 swap
Size 23 KB
Load time 0 ms
Start 0 ms
Risk FOUT — text flashes from fallback to web font
normal.woff2 woff2 swap
Size 22 KB
Load time 0 ms
Start 0 ms
Risk FOUT — text flashes from fallback to web font
telefon-black.654a55c7f... woff2 swap
Size 36 KB
Load time 0 ms
Start 0 ms
Risk FOUT — text flashes from fallback to web font
normal.woff2 woff2 swap
Size 23 KB
Load time 0 ms
Start 0 ms
Risk FOUT — text flashes from fallback to web font
telefon-bold.30e9132f18... woff2 swap
Size 37 KB
Load time 0 ms
Start 0 ms
Risk FOUT — text flashes from fallback to web font
italic.woff2 woff2 swap
Size 24 KB
Load time 0 ms
Start 0 ms
Risk FOUT — text flashes from fallback to web font
Optimization checklist
  • Preload critical fonts (priority=high)
  • Use woff2 format for all fonts
  • Set font-display to swap, optional, or fallback
  • Subset large fonts (≤100 KB each)
A+
Resource Caching
All resources properly cached
PASS
All resources properly cached
Info::
No caching issues found
All static resources have appropriate caching headers.
A+
Critical Rendering Path
No render-blocking resources
PASS
No render-blocking resources
Info::
No render-blocking resources detected
A+
Resource Hints
No optimization needed
PASS
No optimization needed
Info::
No resource hint issues
A+
Render-Blocking Resources
No render-blocking resources detected
PASS
No render-blocking resources detected
Info::
No render-blocking resources detected in <head>
A+
Third-Party Resources
No third-party resources detected
PASS
No third-party resources detected
A+
Green Hosting
Whether the site is served from green-energy infrastructure
PASS

Green Hosting

This site is hosted on green energy infrastructure

Provider: Cloudflare

Network Waterfall
65 requests over 0ms
INFO

Performance analysis not available for this result.

Third-Party Script Cost
Per-script blocking time, transfer cost, and cache headers
INFO
100% of JavaScript execution is third-party
First-party Third-party 3966ms · 1024KB · €43/mo
cpwebassets.codepen.io
Other
Costly
Execution 1162ms
Transfer 660 KB
Unused 64%
Monthly Cost €13/mo
codepen.io
Other
Costly
Execution 1003ms
Transfer 7 KB
Monthly Cost €11/mo
cpwebassets.codepen.io
Other
Costly
Execution 648ms
Transfer 22 KB
Monthly Cost €7/mo
Unattributable
Other
Costly
Execution 618ms
Transfer 0 KB
Monthly Cost €7/mo
codepen.io
Other
Costly
Execution 349ms
Transfer 0 KB
Monthly Cost €4/mo
cpwebassets.codepen.io
Other
Optional
Execution 186ms
Transfer 334 KB
Unused 65%
Monthly Cost €2/mo

These scripts may cost more than they're worth

  • cpwebassets.codepen.io adds 1162ms and costs ~€13/month
  • codepen.io adds 1003ms and costs ~€11/month
  • cpwebassets.codepen.io adds 648ms and costs ~€7/month
  • Unattributable adds 618ms and costs ~€7/month
  • codepen.io adds 349ms and costs ~€4/month

100% of JavaScript execution time is spent on third-party scripts. Consider auditing which scripts are essential.

Why this matters

When third-party JS execution time exceeds your own, performance gains from frontend work are capped by code you don't own.

Learn more ▾

Every millisecond of third-party JS competes with your own for main-thread time. If their share is bigger than yours, optimization on your code base barely moves the needle. Audit, defer, or remove third-parties before further frontend optimization. Use Lighthouse's third-party audit to identify the worst offenders.

Source: web.dev

cpwebassets.codepen.io takes 1162ms of CPU time. Consider loading it asynchronously or replacing it with a lighter alternative.

Why this matters

This script has high main-thread execution time — optimize hot paths or defer.

Source: web.dev

64% of cpwebassets.codepen.io's code is unused. The script may be loading features you don't use.

Why this matters

Bundle has high unused-code ratio — tree-shaking and route-splitting recover the wasted bytes.

Source: web.dev

codepen.io takes 1003ms of CPU time. Consider loading it asynchronously or replacing it with a lighter alternative.

Why this matters

This script has high main-thread execution time — optimize hot paths or defer.

Source: web.dev

cpwebassets.codepen.io takes 648ms of CPU time. Consider loading it asynchronously or replacing it with a lighter alternative.

Why this matters

This script has high main-thread execution time — optimize hot paths or defer.

Source: web.dev

Unattributable takes 618ms of CPU time. Consider loading it asynchronously or replacing it with a lighter alternative.

Why this matters

This script has high main-thread execution time — optimize hot paths or defer.

Source: web.dev

codepen.io takes 349ms of CPU time. Consider loading it asynchronously or replacing it with a lighter alternative.

Why this matters

This script has high main-thread execution time — optimize hot paths or defer.

Source: web.dev

65% of cpwebassets.codepen.io's code is unused. The script may be loading features you don't use.

Why this matters

Bundle has high unused-code ratio — tree-shaking and route-splitting recover the wasted bytes.

Source: web.dev

How third-party costs are calculated

All checks on this page are automated. Results are estimates - run targeted manual reviews when the score affects a release decision.

Send Feedback