Skip to content

Pixboost/hero-banner-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hero Banner Demo

Hero banner demo for the blog article that show how well implemented hero banner could improve LCP and CLS Core Web Vital's metrics

Running the demo

docker run -p 8080:80 -v $(pwd):/usr/share/caddy -v $(pwd)/Caddyfile:/etc/caddy/Caddyfile caddy:2.3.0-alpine

Results

All measurements are done on github.io version of the page. We measured the performance on each iteration and tagged the repo, so you can explore changes and results.

Chrome info:

Google Chrome	90.0.4430.93 (Official Build) (64-bit)
Revision	4df112c29cfe9a2c69b14195c0275faed4e997a7-refs/branch-heads/4430@{#1348}
OS	Linux
JavaScript	V8 9.0.257.23
User agent	Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
Command Line	/usr/bin/google-chrome-stable --flag-switches-begin --flag-switches-end --origin-trial-disabled-features=SecurePaymentConfirmation
  • Network Throttle: Fast 3G
  • Disable Cache
  • Incognito mode
  • Device emulation - Moto G4

Full lighthouse result could be found in lighthouse.json file.

Tag LCP on Performance Tab (ms) LCP Lighthouse Notes
2-background-image 44951.1 35.7s
3-img-tag 44932.9 35.8s TTI dropped 3.8 -> 3.3, TBT dropped 2570 -> 2140

Packages

No packages published

Languages