Improve web performance with Intersection Observer

If your site is suffering from a giant payload caused by a large number of images, Intersection Observer may be for you! Jo Franchetti introduces how to use this new JavaScript API and then explains how to lazy load your images once they scroll into view.

Transcript

1. INTERSECTION OBSERVER
2. Hello! I AM JO FRANCHETTI Web developer advocate @samsunginternet @thisisjofrank https://medium.com/@jofranchetti
3. SAMSUNG INTERNET ◦ Our team speaks at events and helps to support communities ◦ We produce code demos and blog posts ◦ Our team is super friendly and love to work on projects with users of our browser, come speak to me after the talk.
4. SAMSUNG INTERNET ◦ Web browser for android phones ◦ Specific UX for our users (privacy, VR) ◦ 3rd most popular mobile browser ◦ Available on android 5.0+ devices https://samsunginter.net/
5. INTERSECTION OBSERVER
6. WHAT’S THE PROBLEM? Large number of images on the page Infinite scrolling 3rd party page-impression scripts cause bloat Difficult/process intensive to calculate ?
7. Sluggish, janky interactions
8. Large downloads
9. Large downloads Bruce Lawson @brucel
10. No more watching/polling for intersections
11. No need for 3rd party libraries
12. Intersection Observer API
13. “ The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
14. EXAMPLE https://codepen.io/thisisjofrank/pen/pdQzMr
15. LAZY LOADING IMAGES https://www.livenation.co.uk/ https://medium.com/@aganglada/intersection-observer-in-act ion-efc118062366
16. INFINITE SCROLL https://codepen.io/tutsplus/pen/oppZpq
19. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
20. Creating an intersection observer Root Target
21. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
22. Creating an intersection observer Root Margin Target
25. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
26. Creating an intersection observer Callback executed! Callback executed!
27. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options); var target = document.querySelector('#element'); observer.observe(target);
28. Creating an intersection observer var callback = function(entries, observer) { entries.forEach(entry => { // entry.boundingClientRect // entry.intersectionRatio // entry.intersectionRect // entry.isIntersecting // entry.rootBounds // entry.target // entry.time }); }
29. THIS IS A SLIDE TITLE Here you have: ◦ A list of items ◦ And some text ◦ But remember not to overload your slides with content Your audience will listen to you or read the content, but won’t do both.
30. DOWNSIDES? Not Pixel perfect Not low latency Values will be ‘out of date’ by the time you get to use them Spending too much time in the callback will cause lag Differing levels of support across browsers ?
31. Examples https://slow-cats.glitch.me/ (lots of images, no intersection observer) https://fast-cats.glitch.me/ (same number of images, with intersection observer) https://www.webpagetest.org Test the performance of your sites
32. Creating an intersection observer
33. Creating an intersection observer
34. Creating an intersection observer
35. Creating an intersection observer
36. GO FORTH AND OBSERVE INTERSECTIONS
37. Thank you for listening! @thisisjofrank @samsunginternet