PageSpeed Insights에서 스크롤 성능 개선에 패시브 리스너를 사용하지 않음 문제 해결

우연치 않게 오랜만에 구글 PageSpeed Insights에서 사이트 진단을 해봤습니다. 구글 PageSpeed Insights는 자신의 웹사이트 성능을 테스트 해보고 문제가 있다면 문제점을 알려줍니다.

워드프레스 홈페이지를 운영하면서 처음을 제외하고는 플러그인이나 사이트 검사를 해본지 오랜 시간이 흘렀기 때문에, 현재 홈페이지에 어떤 문제가 있는지 한번 확인을 해봤습니다.

콘텐츠 요약: 보이기

오류: 스크롤 성능 개선에 패시브 리스너 사용

코딩에 지식이 없어서 뭔지는 잘 모르겠지만, “스크롤 성능 개선에 패시브 리스너 사용”이라는 항목에 빨간불이 들어와 있었습니다. 내용은 “터치 및 휠 이벤트 리스너를 `passive`(으)로 표시하면 페이지 스크롤 성능을 개선할 수 있습니다.”라고 써있습니다.

오류가 있다는 것은 해결을 하라는 의미이기 때문에 몰라도 찾아서 해결을 해야 합니다. 그래서 구글링으로 해결 방법을 찾아봤습니다.

PageSpeed Insights: 스크롤 성능 개선에 패시브 리스너를 사용하지 않음 문제 해결 방법

구글링으로 찾아보니 워드프레스에서 외모 > 테마 파일 편집기 > functions.php 파일을 수정해주면 된다고 합니다.

functions.php 파일에 추가할 내용:

function wp_dereg_script_comment_reply(){wp_deregister_script( 'comment-reply' );}
add_action('init','wp_dereg_script_comment_reply');
add_action('wp_head', 'wp_reload_script_comment_reply');
function wp_reload_script_comment_reply() {
    ?>
<script>
//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
document.getElementsByClassName("comment-reply-link").onclick = 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));
}
</script>
    <?php
}