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.

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

9. Change in approach

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

27. Issues we’ve faced

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

37. Summary
•User journey
Approach
•Resource Hints

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