Debugging bfcache, make your page load instantly - DevTools Tips

Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=Y2IVv5KnrmI



Duration: 5:34
7,928 views
0


Join Jecelyn and special guest Barry as they dive deep into the world of the bfcache and how it can make it lightning-fast to navigate around web sites. Learn how to optimize your site for the bfcache, and discover powerful debugging techniques to troubleshoot any blocking issues. Make sure your users are benefiting from this free web performance boost!

Chapters:
0:00 Intro
0:14 What is bfcache
1:00 When is bfcache in used
1:18 Test bfcache with DevTools
2:28 Tip: Test with Incognito mode
2:47 Test bfcahce with Lighthouse
3:03 Collect blocking reasons with notRestoredReasons API
3:15 Replace cache-control: no-store - Common blocking reason
3:53 Stop using unload handlers - Common blocking reason
4:37 Tip: Test with override permissions-policy headers
5:05 Ending

Resources:
Back/forward cache → https://goo.gle/49XnGNM
Test back/forward cache → https://goo.gle/3GmLCML
notRestoredReasons API → https://goo.gle/bfcache-notrestoredreasons
Case study → https://web.dev/case-studies/yahoo-japan-news-bfcache

Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Barry Pollard → https://goo.gle/tunetheweb
Chrome DevTools → https://goo.gle/chromedevtools

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

#DevToolsTips #WebPerformance #Cache







Tags:
Chrome
Developers
Google
Web
devtools tips
devtools latest
devtools tutorial
debugging bfcache
how to debug bfcache
chrome latest
chrome updates
chrome developer
chrome for developers
developer
google chrome