렌더링 차단 리소스 제거하기 seo 플러그인6

렌더링 차단 리소스에 대해 궁금하신가요?

보통은 구글 서치 콘솔에서 코어 웹 바이탈을 확인하는 도중에 발견하게 되는데요.

보고서 열기를 클릭해 들어가시면 해당 URL에 어떤 문제가 있는지 심각도와 이유를 함께 확인하실 수 있습니다.

저는 여기서 확인되는 수많은 문제 중에 렌더링 차단 리소스 제거하기라는 것이 확인되었는데 이것을 해결하는 방법에 대해서 알아보고자 합니다.

렌더링-차단-리소스-제거하기-seo-플러그인6

렌더링 차단 리소스가 무엇인지와 문제 확인

렌더링 차단 리소스는 웹사이트의 렌더링을 차단하거나 방해하는 요소인데 이 리소스를 최적화하셔야만 문제가 되었던 페이지의 로딩 속도를 높이고 개선하실 수 있습니다.

이것이 생기는 원인이 헤더 부분에 위치해 있는 자바스크립트 파일과 CSS 파일이 주된 원인이라고 하는데요.

페이지 속도뿐만 아니라 검색 순위에도 영향을 미친다고 하니 해결하시는 것이 좋습니다.

그러니까 사용자가 웹사이트를 방문했을 때 CSS 코드와 javascript 파일이 로드되면서 페이지가 뜨는 데 오랜 시간이 걸리니 제거하라는 의미입니다.

먼저, 문제 확인을 위해 구글서치 콘솔에서 코어 웹 바이털로 들어가셔서 URL 그룹에 떠 있는 해당 URL을 클릭하신 다음, 오른쪽에 뜨는 URL을 클릭해 줍니다.

그리고 URL CLS에 보이는 개발자 자료실에 들어가시면 문제 상황들이 뜨는 보고서 분석 화면이 나타나는데 분석 버튼만 눌러주시면 됩니다.

개발자자료실

그러면 Page Speed Insights에서 성능 문제와 진단 내용을 확인하실 수 있는데, 확인된 문제 중에 저는 렌더링 차단 리소스 제거하기를 클릭해 보았습니다.

그런데 사실, 문제는 확인하였지만 코드를 잘 다루시는 분들이 아니면 그다음 어디에서 어떻게 제거하라는 건지 알 수가 없었습니다.

열심히 문제를 찾았는데 여기서 멈칫하는 순간이 오고, 이리저리 방법을 찾아는 보지만 웹 개발에 대해 익숙한 분들만이 이해할 수 있는 용어와 코드들이 눈에 들어옵니다.

그리고 아래, 오프스크린 이미지 지연하기를 누르시고 지연 로드 wordpress 플러그인이라고 클릭해 보시면 문제 해결을 위한 해당 필요 플러그인을 보여줍니다.

이러한 플러그인들로 문제를 해결할 수 있다고 하는데 각각의 장단점과 주의 사항도 있다고 하니 염두에 두셔야겠습니다.

페이지 속도 향상과 사이트 성능을 좋게 하기 위해 해결해야 하는 문제들을 몇 개 나열해 보면,

CSS 로딩 최적화하기, 필수적이지 않은 Javascript를 연기, 오프스크린 이미지 연기, 렌더링 차단 리소스 제거 등이 있습니다.

여러 가지 문제들이 확인되었고 방법이 제시되어 있지만 문제는 복잡한 코드를 함부로 건드릴 수 없다는 것이었습니다.

그래도 계속해서 뜨는 문제를 보면서도 그냥 둘 수 없어 방법을 찾던 중 다행히도 워드프레스의 경우 코드를 몰라도 이러한 문제들을 해결할 수 있는 플러그인이 있다고 하여 그것을 찾아보았는데요.

Autoptimize, WP Rocket, clearfy, 래빗로더, Jetpack Boost, Async JavaScript 등

웹 페이지 로딩 속도를 향상시키면서 위에 나열된 문제를 해결할 수 있는 여러 플러그인들이 확인되었습니다.

각각의 장단점이 분명히 있으니 권유한다고 무조건 적용하지 마시고, 원래 설치되어 있는 플러그인과 충돌을 일으키는 것은 없는지 꼼꼼히 비교해 보시고 결정하시는 것이 좋습니다.

하나씩 적용해 보시고 내 사이트에 문제를 일으키는 것은 없는지 확인하시면서 맞는 것으로 사용하시면 될 것 같습니다.

참고로 워드프레스를 사용하시는 경우 5.4 버전부터는 이미지 지연 로딩 기능이 추가되었다고 하니 참고하시면 되겠습니다.

위의 플러그인 중 WP Rocket의 후기가 대부분 좋았는데, 저의 경우는 유료 플러그인은 솔직히 부담스러운 면이 있어서 무료 버전도 운영되는 Clearfy를 사용해 보려고 합니다.

★그리고 주의하실 사항은 플러그인을 사용하시기 전에 무조건 사이트를 백업하셔야 데이터가 손실되어도 대처하실 수 있다는 점을 꼭 잊지 마시기를 바랍니다.

그럼, 설치 방법 및 주의 사항을 참고하셔서 느린 워드프레스 속도 최적화를 위한 설정을 해보세요. 다음 포스팅에서 설치 방법과 과정을 도와드리도록 하겠습니다.

지금까지 렌더링 차단 리소스가 무엇인지와 문제 확인 방법, 렌더링 차단 리소스 제거 방법에 대해서 안내해 드렸는데요.

페이지 로딩 속도 향상을 위해 어떤 플러그인이 있는지에 대해서도 알아보았습니다. 빠른 결과물들 얻으셨기를 바라며 함께 보시면 도움 되는 글들도 있으니 확인하시고 많은 도움 되셨으면 좋겠습니다.

▼▼함께 보시면 도움되는 글▼▼

♥meta name=description 태그에 동일설명문 발견 해결법

♥구글 서치 콘솔 NOINDEX 태그에 의해 제외되었습니다.[이렇게 해결]