패시브 리스너를 사용하여 SEO 점수 올리기

🤔 Question

👉 웹사이트를 스크롤할 때 화면이 버벅거리거나 느려진 적이 있나요?

이런 문제는 스크롤 이벤트 처리 방식 때문에 발생할 수 있습니다.

오늘은 패시브 리스너(Passive Listener) 를 사용해서 스크롤 성능을 개선하고, SEO에도 도움 되는 방법을 초등학생도 이해할 수 있게 쉽게 설명해볼게요 🙂

 

🎯 먼저 스크롤 이벤트란?

여러분이 웹사이트를 위아래로 움직이는 행동을 스크롤(scroll) 이라고 합니다.

웹사이트는 사용자가 스크롤할 때 "아! 지금 스크롤했네!" 하고 감지할 수 있습니다.

이때 실행되는 기능을 스크롤 이벤트 리스너(Event Listener) 라고 부릅니다.

 

🎯 그런데 왜 느려질까요?

브라우저는 사용자가 스크롤할 때마다 스크롤 이벤트를 아주 자주 실행합니다.

그런데 이벤트 안에서 "스크롤을 막아야 할까?" 를 매번 확인하면 시간이 걸립니다.

이 과정 때문에 화면이 버벅거리거나 끊겨 보일 수 있습니다.

특히 모바일에서 더 크게 느껴집니다.

 

🎯 패시브 리스너란?

패시브 리스너(Passive Listener)는 브라우저에게 이렇게 말하는 것입니다.

"이 스크롤 이벤트에서는 스크롤을 막지 않을게. 그러니까 먼저 부드럽게 스크롤해!"

이 한마디 덕분에 브라우저는 스크롤을 먼저 부드럽게 처리하고 나중에 이벤트 코드를 실행합니다.

그래서 화면이 훨씬 매끄러워집니다 🙂

 

🎯 어떻게 사용하나요?

스크롤 이벤트를 등록할 때 옵션에 passive: true 를 추가하면 됩니다.

예를 들면 이런 느낌입니다.

window.addEventListener('scroll', function() { ... }, { passive: true });

이렇게 설정하면 "이 이벤트는 스크롤을 막지 않는다" 라고 브라우저에 알려주는 것입니다.

 

🎯 SEO와 무슨 관계가 있나요?

구글은 웹사이트 속도가 빠르고 사용하기 편한 사이트를 더 좋아합니다.

스크롤이 부드러우면 사용자는 더 오래 머물고 페이지 체험 점수가 올라갑니다.

이것은 SEO(검색엔진 최적화) 점수에도 좋은 영향을 줄 수 있습니다.

즉, 패시브 리스너 = 부드러운 스크롤 = 좋은 사용자 경험 = SEO 향상 이라고 이해하면 됩니다 🙂

 

🎯 언제 사용하면 좋을까요?

✔ 스크롤 이벤트를 사용하는 모든 웹사이트

✔ 모바일에서 스크롤이 자주 끊기는 경우

✔ SEO 점수를 조금이라도 올리고 싶을 때

대부분의 일반적인 스크롤 이벤트는 패시브 리스너를 사용해도 안전합니다.

 

☔ 정리

패시브 리스너는 브라우저에게 스크롤을 먼저 부드럽게 하라고 알려주는 기능입니다.

덕분에

✔ 스크롤이 매끄러워지고

✔ 사용자 경험이 좋아지고

✔ SEO에도 긍정적인 영향을 줍니다.

작은 설정 하나로 웹사이트 품질이 크게 올라갑니다 😊

 

 

If I was of any help to you, please buy me coffee 😿😢😥

If you have any questions, please leave them in the comments

Buy me a coffee

▶ Youtube Sub

🧭 References

[1] reference : https://doctorson0309.tistory.com/

[2] Ads : https://apps.apple.com/us/app/beluga-classic-film-filters/id6744041061