Link prefetching presentation
•
0 likes•97 views
Link prefetching - the good the bad and the ugly - Itay Friedman & Yarin Goldman When improving performance, people usually solely focus on their own area of responsibility, neglecting to see the rest of the user’s flow. Utilizing the big picture, zooming in/out when needed, will get you the most surprising and useful insights, to get the most significant improvements for your users. We will specifically talk about how we utilized: - Prerendering and other resource hints. - (POC) Prediction models. - Insights from in-house performance measurements.
Report
Share
More Related Content
What's hot
What's hot (16)
Similar to Link prefetching presentation
Similar to Link prefetching presentation (20)
Recently uploaded
Recently uploaded (20)
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