워드프레스 블로그에서 렌더링 차단 자바스크립트 및 CSS 삭제 하는 방법

며칠 워드프레스 블로그를 만지작거리고 있는데 블로그 로딩 속도 향상시키려고 CSS 전송 최소화를 시도해보았다.

어제는 못했지만 오늘은 autoptimize라는 플러그인을 이용해서 드디어 CSS도 최적화를 했다.

autoptimize

페이지 스피드에서 이 메시지 볼 때마다 정말 어떻게 이걸 해야 할까 생각을 했는데 찾아보니 무엇이든 찾으면 방법이 있나보다.

css-delivery-optimize

스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 자바스크립트 및 CSS 삭제

페이지에 차단 CSS 리소스가 14개 있습니다. 따라서 페이지 렌더링이 지연됩니다.

페이지에서 스크롤 없이 볼 수 있는 콘텐츠 중 어떤 것도 다음 리소스가 로드될 때까지 기다리지 않고 렌더링할 수 없습니다.

차단 리소스 로드를 지연하거나 비동기식으로 로드하세요. 또는 해당 리소스의 주요 부분을 HTML에 직접 삽입하세요.

나를 힘들게 했던 메시지 구글 페이지 스피드

 

autoptimize라는 플러그인은 정말 대단한 것 같다

이것이 페이지 스피드점수를 10점이나 높여준다.

google-pagespeed-insights

 

사용법은 유튜브에서 검색하니 외국유저가 올려 놓은 게 있어서 그걸 보고 따라했다,

따라할 분은 아래 영상을 보고 따라하면 되는데 CSS 변환할 때 시간이 조금 오래 걸리니 인내심이 필요하다.

How to Eliminate Render Blocking CSS in Above-the-Fold Content in WordPress

아무튼 블로그 속도가 느리면 글을 안보고 그냥 가버리는 방문자가 많은데 구글 검색을 해보니 많은 워드프레스 블로그의 속도가 너무 느리다.

 

글을 읽고 싶어도 페이지가 늦게 열리니까 안 보게 된다.

아마도 디자인과 광고만을 생각해서 블로그를 만들어서 그런 것이 아닌가 생각을 해본다.

 

블로그는 예쁜 게 만드는 것도 좋겠지만 속도가 빠른 것이 그 보다 중요한 것이라 생각한다.

방문자들은 단 몇 초 만에 페이지를 보다가 닫는데 특히 페이지가 늦게 열리는 경우엔 1초안에도 닫고 가버린다.