Link prefetching presentation
0 likes102 views
The document discusses link prefetching and its impact on user experience, emphasizing a user journey approach to improve load times. Technical methods such as resource hints like preload, prefetch, and prerender are explored, alongside monitoring through KPIs. The document outlines the transition from manual to automated solutions for optimizing web performance, highlighting significant reductions in partner site load times.
Link prefetching presentation
- 1. Link Prefetching The good the bad and the ugly
- 2. WiFM •Approach: ownership on the entire user journey •Technical: Resource Hints as an example
- 3. About the speakers Itay Friedman - web team lead Yarin Goldman - senior developer We both work @ Natural Intelligence. We give you enough credit - if you’ll want to contact us you’ll manage
- 4. User Journey
- 8. User Journey
- 10. Change in approach Exhaustion of capabilities
- 11. Change in approach Julia Grace on “the Changelog”
- 12. Change in approach Can we get Google to preload our site?
- 13. –Kobi Salinas “Great idea! How can we implement it here?”
- 14. Our Goal Improve partner’s load time
- 15. Means to our end: Resource hints • Preload • <link rel=“preload” href=“/style.css” as=“style”> • Prefetch • <link rel=“prefetch” href=“/library.js” as=“script”> • Prerender • <link rel=“prerender” href=“/next-page.html”>
- 16. More resource hints • dns-prefetch • <link rel=“dns-prefetch” href=“//example.com"> • preconnect • <link rel=“preconnect” href=“//cdn.example.com" crossorigin> • iframe*
- 17. KPIs • Don’t hurt • Load time* • Page speed score • Improve • Partner’s load time
- 18. KPIs • Don’t hurt • CTR • Load time* • Page speed score • Improve • Conversion rate % • Partner’s load time
- 19. POC - Manual 1. Prediction model 2. Scraping assets 3. Filtering non-cacheable assets 4. Create and inject a tag 5. Track changes
- 20. Real Solution 1. Prediction model - Machine Learning 2. Scraping assets - Automated script 3. Auto Filtering non-cacheable assets 4. Auto Create and inject a tag 5. Auto Track changes
- 21. Results
- 22. Before partner’s load time 7.5 sec
- 23. Prerender partner’s load time 6.5 sec
- 24. Prefetch partner’s load time 4.5 sec
- 25. More Results 3.3 sec -> 1.1 sec
- 26. Prefetch Partner #2 partner’s page load time 3.3 sec 1.1 sec
- 28. Issues we’ve faced • Page Speed Score • Load time • Prerender • Pixels • JS events
- 29. Issues we’ve faced • Page Speed Score • Load time • Prerender - deprecated & removed • Pixels • JS events
- 30. Issues we’ve faced • Page Speed Score • Load time • Prerender • Pixels • JS events
- 31. Issues we’ve faced • Page Speed Score • Load time • Prerender • Pixels • JS events
- 32. –Someone probably “Performance is a marathon - not a sprint”
- 33. Talk with Elena on Google PSS
- 34. The ״damage״
- 35. More use cases • Login screen • Pagination • Cart/Checkout • Every other funnel
- 36. Tools used • WebPagetest • InfluxDB • webpagetest-influxdb • Grafana
- 39. Links • The Changelog podcast episode with Julia Grace • Can I use • Webpagetest-influxdb • Prerender deprecated • NoState Prefetch
- 40. Links - blog posts • Lightning fast websites with prefetching • Preload Prefetch & Priorities in Chrome • What is resource hints • W3C - resource hints