SEO 상위 노출을 위해 사이트의 속도 및 최적화는 중요한 요소입니다. PageSpeed Insights에서 사이트 분석을 통해 다양한 개선점을 확인할 수 있습니다. 오늘은 “스크롤 성능을 향상시키기 위해 패시브 리스너를 사용하지 않습니다”라는 메시지에 대한 해결 방법을 알아보겠습니다.
1. 패시브 리스너(Passive Listeners)
Google에 노출하기 위해서 페이지 속도 관리는 매우 중요합니다. PageSpeed Insights 분석에서 “스크롤 성능 향상을 위해 패시브 리스너를 사용하지 않습니다.”라는 메시지는 결국 패시브 리스너를 사용하라는 말과 같습니다. 그러면 패시브 리스너는 무엇인지 알아야 합니다. 복잡하고 어려운 원리는 따로 다루지 않고 간단하게 설명하겠습니다. 모바일이나 PC 환경에서 웹페이지에 접속하면 휠, 터치 동작을 하게 됩니다. 이때 동작을 감지하여 스크롤 기능을 향상 시켜줍니다. 즉 휠이나 터치 동작에 빠르게 반응하는 스크롤 기능을 활성화 해주면 해결되는 문제입니다.
1) 스크롤 향상을 위한 코드 작성
(1) 워드프레스 wp-admin 접속
우선 워드프레스 관리자 페이지에 접속합니다. 메뉴에서 외모 → 테마 파일 편집기 → Theme Functions (functions.php)를 선택하고 아래에 있는 코드를 추가합니다. 추가를 마치면 “파일 업데이트”를 클릭하여 저장합니다.
function wp_dereg_script_comment_reply(){wp_deregister_script( ‘comment-reply’ );}
add_action(‘init’,’wp_dereg_script_comment_reply’);
(2) 파일질라 ftp 접속
이제 파일질라ftp를 이용하여 서버에 접속하겠습니다. 파일질라 ftp에 대한 자세한 내용은 아래 링크를 참고하세요
파일질라 ftp에 접속하고 “/applications/사용자 이름/public_html/wp-includes/js”로 이동합니다. 사용자 이름으로 표시한 부분은 다를 수 있으니 워드프레스가 설치된 폴더명을 확인하기 바랍니다. js 폴더 안에서 “comment-reply.min.js”를 선택하고 마우스 오른쪽을 클릭하여 “보기/편집”을 선택합니다. “comment-reply.min.js” 파일이 열리면 맨 밑으로 이동하여 아래 추가된 코드를 추가해줍니다.
//Function checks if a given script is already loaded
function isScriptLoaded(src){
return document.querySelector(‘script[src=”‘ + src + ‘”]’) ? true : false;
}
//When a reply link is clicked, check if reply-script is loaded. If not, load it and emulate the click
$(‘.comment-reply-link’).click(function(){
if(!(isScriptLoaded(“/wp-includes/js/comment-reply.min.js”))){
var script = document.createElement(‘script’);
script.src = “/wp-includes/js/comment-reply.min.js”;
script.onload = emRepClick($(this).attr(‘data-commentid’));
document.head.appendChild(script);
}
});
//Function waits 50 ms before it emulates a click on the relevant reply link now that the reply script is loaded
function emRepClick(comId) {
sleep(50).then(() => {
document.querySelectorAll(‘[data-commentid=”‘+comId+'”]’)[0].dispatchEvent(new Event(‘click’));
});
}
//Function does nothing, for a given amount of time
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
(3) 확인 – PageSpeed Insights
위에서 제공한 코드를 모두 추가하고 나서 PageSpeed Insights에 접속하여 사이트를 다시 분석합니다. 제가 사용하고 있는 GeneratePress 테마와 Astra-pro 테마에서 모두 정상적으로 해결된 것을 확인했습니다.
