구글 블로그, PageSpeed Insights에서 '렌더링 차단 요청' 문제 해결해서 성능 점수 올리기

오랜만에 페이지 스피드 인사이트^{PageSpeed Insights}에서 구글 블로그의 성능을 측정해 보았다.

그동안 블로그에 이런저런 코드들을 추가했더니 블로그가 이전보다 조금 무거워진 것 같다.

그래서 직접 해결할 수 있는 것들을 하나씩 해볼까 한다.

블로그나 웹사이트의 속도를 측정해주고 개선점을 알려주는 사이트, PageSpeed Insights

PageSpeed Insights는 웹사이트 속도를 측정하고 개선점을 알려주는 웹사이트입니다. 이 글은 PageSpeed Insights를 소개하고, 어떻게 사용해야 하는지, 주요 지표는 무엇을 의미하는지 자세히 알려주는 가이드입니다.

PageSpeed Insights에 대해서 잘 모르시는 분은 이 포스트를 참고하시길.

'렌더링 차단 요청' 탭의 문제를 해결해 보자

이전에도 했던 말 같은데, 여기서 측정되는 성능의 숫자는 측정할 때마다 다르게 나오니 숫자에는 너무 신경 쓰지 말자.

아래쪽에 나오는 내용이 중요하다.

가장 위쪽에 있는 '렌더링 차단 요청'을 확인했다.

여기 있는 문제를 해결하면 예상 절감 시간이 900밀리초라고 한다.

1. defer 속성 추가

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 www.gstatic.com/charts/loader.js를 검색한다.

<script defer='defer' src='https://www.gstatic.com/charts/loader.js' type='text/javascript'/>

<script 바로 뒤에 defer='defer'를 추가해서 HTML 분석이 끝난 뒤에 loader.js가 로드되게 만든다.

jquery의 경우에는 defer='defer'를 추가하면 블로그의 사이드바에 문제가 생기기 때문에 생략한다.

2. FontAwesome CSS를 비동기식으로 로드

또 [ctrl + F] 키를 누르고 fontawesome을 검색한다.

<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet' media='print' onload='this.media=&quot;all&quot;'/>

/> 직전에 media='print' onload='this.media="all"'를 추가한다.

브라우저는 HTML을 읽다가 <link rel='stylesheet'>를 만나면 "아, 화면을 그릴 때 필요한 스타일시트구나!"라고 생각하고, 그 파일을 다 다운로드할 때까지 화면의 렌더링을 멈춘다.

하지만 media='print' 속성이 들어가면, 브라우저는 "이 파일은 인쇄할 때만 필요한 거네? 지금 당장 화면을 그리는 데는 필요 없겠다."라고 판단한다.

덕분에 브라우저는 파일을 다운로드는 하되, 화면을 그리는 작업을 멈추지 않고 계속 진행한다.

onload='this.media="all"'은 파일 다운로드가 백그라운드에서 완료되는 순간, onload 이벤트가 발생한다.

이때 this.media="all"이라는 자바스크립트 명령이 실행되고, 비로소 아이콘이나 스타일이 화면에 실제로 적용된다.

파일이 준비되면 자바스크립트 명령을 통해 '인쇄용'이었던 미디어 속성을 다시 '전체(all)'로 변경해주어, 그제야 아이콘이나 스타일이 화면에 실제로 입혀지게 되는 원리다.

코드 저장 후에 다시 측정했다.

아까도 말했지만, 숫자를 믿지는 말자.

수정 전에 측정했던 것보다 낮게 나오는 때도 있으니까.

중요한 건 여기다.

렌더링 차단 요청에서 FontAwesome과 Google CDN이 사라져 있다.

시간도 확실히 절감되어 있다.

이 방식을 적용하면 페이지가 처음 로딩될 때 아주 짧은 순간 아이콘이 엑박으로 보이거나 텍스트로 보일 수 있다.

하지만 페이지 전체 로딩 속도를 높이기 위한 합리적인 방법이니 안심해도 좋다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.