Introdution
Social media platforms like TikTok, Instagram, and Twitter use infinite scrolling instead of pagination. However, I wasn't sure when to use the classic pagination or infinite scrolling. Sometimes I implemented infinite scrolling using IntersectionObserver, but later I realized there are more ways to implement infinite scrolling. I didn't know why exploiting the onScroll event listener is a bad practice. Therefore, I'll sort out the pros and cons of infinite scrolling, when to use it, and 2 ways you can implement it.
Upsides of Infinite Scrolling
Fewer interruptions
Each user engages in different activities while on the same page. They might look for a specific piece of information or an item. Otherwise, they might just want to consume the content and kill some hours without goals. If the latter is the case, they click the link to the next page to load more. This can be an interruption to user activity. By removing this interruption, users can keep engaging in their activity without distraction.
Cheap interaction cost
While interaction cost shares a similar point of view with interruptions, this is a significant difference. Infinite scrolling reduces the number of interactions to achieve the same result. It doesn't need two interaction steps, scrolling to the bottom and clicking the link. Just a scroll to the bottom action works.
Optimized for mobile devices
The small viewport is the nature of mobile devices. Therefore, mobile users keep their fingers close to the screen to get ready to scroll down. Therefore, infinite scrolling can give good user experiences to mobile users rather than desktop users.
Downsides of Infinite Scrolling
Hard to refind content
Let's say user navigates from feed(infinite scrolling) page to detail page, and he(she) wants to navigate back to feed page. In classic infinite scrolling user scrolls down to where he(she) was from the beginning of the content. This can worsen user experiences. You can mitigate this issue by using persisting the scrolling state and the loaded content.
Page load becomes slow
The page gets slower and slower as you scroll down more and more. There is too much content in the document, so the page gets slower. If user navigates from the detail page to the feed page again, you need to load all the contents from the beginning. Even though we can mitigate this issue by using virtual scroll, lazy loading, and caching, the content still takes up memory and lower performance.
Illusion to completeness
Scroll indicates how far users have to go till the end of the content. However, an infinite scrolling page cannot be an indicator by nature. This can be a huge problem if user thinks the current end of the page is the end of the content. They will miss a lot of information on the page.
No Footer Layout
Most websites usually place Footer to display their contacts, legal rights, and links to their social media accounts. Now that we can't access the end of the page, the footer Layout cannot be accessed anymore, and users miss out on related content.
Poor SEO
Since search engine bots can only see the rendered result of the first content load, they cannot index the second+ content. This can harm SEO.
How to implement infinite scrolling
Why Intersection Observer is Better than Scroll Event for Infinite Scrolling List
Intersection Observer가 scroll event handler에 비해서 성능이 좋다.
실험
Intersection Observer로 구현한 infinite scrolling list와 scroll event handler로 구현한 infinite scrolling list를 비교하였다.
scroll event handler에는 throttling과 caching이 적용되어 있다.
실험 결과
Scroll event handler에서 frame drop 현상이 크게 나타났다. 노란색, 빨간색 영역이 컸다.
CPU를 6배로 느리게 하고 실행한 결과, frame drop 현상이 실험 중 체감이 될 정도로 크게 느껴졌다. 스크롤링으로 페이지의 다른 부분으로 이동했을 때 screen을 paint하는데 3초 이상 소요되는 경우가 있었다.
core web vitals에서 interaction to next paint는 200ms 이하를 권장하고 있기에 이는 안 좋은 UX를 초래할 수 있다.
원인 분석
Intersection Observer 경우는 element간 교차가 발생할 경우만 비동기로 실행되어 main thread를 blocking하지 않지만, scroll event handler의 경우 스크롤 event가 발생할 때마다 main thread를 blocking한다.
throttling을 하더라도 element가 교차하지 않는 시점에 event handler가 호출되고, caching을 시키더라도 cache된 값을 가져오는function call은 여전히 발생하는 것이 원인으로 보인다.
결과
공수 비교: scroll event handler 구현은 caching과 throttling에서 복잡하게 구현하게 되므로 Intersection Observer보다 공수가 크다.
쓸데없는 main thread blocking 유무: caching과 throttling을 구현하더라도, main thread blocking 빈도는 본질적으로 scroll event handler가 훨씬 더 많을 수밖에 없어 극한의 디바이스 환경에서는 frame drop을 겪을 수도 있다. 반면 Intersection Observer는 소모적은 main thread blocking이 발생하지 않는다.
픽셀 단위 customization: scroll event에서 요소의 정확한 픽셀 단위를 파악할 수는 있겠다.
따라서 요소의 픽셀 단위 절대 위치가 필요한 게 아니라면 IntersectionObserver를 쓰는게 사용자 경험에 좋다.
https://itnext.io/1v1-scroll-listener-vs-intersection-observers-469a26ab9eb6
https://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
Medium
Top comments (0)