Blogger 이애하기 : 구글 PageSiteInsight로 페이지 로딩 속도 개선하기-1(보완필요)

개인 블로그 또는 개발하는 웹 사이트의 속도를 개선하고 싶다면

구글에서 제공하는 PageSiteInsight 서비스로 간단하게 측정을 해볼 수 있다.

측정하고자 하는 페이지의 URL만 넣고 실행시키면

Headless Chromium을 사용하여 다양한 테스트를 거쳐 지표로 나타내어준다.

지표 뿐 아니라 어느 부분에서 지연이 되고, 어떤 부분을 개선해야한다고

리포트까지 해주니 사이트가 심각하게 느리다 싶으면 참고하는 것이 좋다.

내 구글 Blogger를 개설하고나서 한창 커스터마이징을 하고 있을 때,

UI킷으로 커스터마이징 하기에는 한계가 있어서,

테마의 HTML코드를 만지고 있던 때였다.

다른 테마는 확인해보지 않았지만

이 테마의 HTML 코드 스타일은 대략 다음과 같다.

우선 CSS세팅 부분에서는 Grouping을 통해서
공통 영역별로 CSS옵션들을 묶어주었고, 이 스타일이 적용될 HTML 영역을 명시해놓았다.

UI패널로 세팅하지 않고 HTML 편집을 통해서 수정하기까지에는
적응하는데 시간이 좀 걸렸다.

디자인적으로 그나마 통일성이 갖춰진 뒤에는,

빈약한 기본 Blogger프로필이 신경쓰였다.

이 프로필보다는 구인-구직 및 커리어 사이트의 로고가 달린
명함이 있으면 좋겠다고 생각하여.

사이드바 영역의 기본 프로필 밑에 Linkedin 배지를 배치했다.

하지만 왠지 모르게 페이지 refresh 및 페이지 이동,
초기 랜딩페이지에 접속할 때 linkedin배지가 늦게 뜨고 뜨기전까지는 

보기 흉한 형태의 컴포넌트가 그 자리를 대체하는 것이 눈에 보였다.

그리고 대체로 사이트 전체가 생각만큼 컨텐츠를 빠르게 로딩하는 것처럼 보이지 않았다.

PageSiteInsight로 측정해본 결과는 다음과 같았다.

워낙 간단한 사이트라 지표들의 상태는 괜찮았다.

1.첫번째 텍스트 or 이미지가 표시되기까지 시간,

2.페이지 컨텐츠가 얼마나 빨리 표시되는지,

3.최대 텍스트 or 이미지 표시 시간,

4.사용자가 완전히 페이지와 상호작용할 수 있기까지 걸리는 시간,

5. 1+4의 시간 

6. 누적 레이아웃 변경

그럼에도 불구하고 구글은 다음과 같은 조치를 권했다.

1.초기 서버 응답시간 단축

2.웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기

3.이미지 요소에 명시적인 너비 및 높이를 설정하여 레이아웃 변경 횟수를 줄이고
  누적 레이아웃 변경을 개선

4.중요 요청 체이닝 차단

콘텐츠의 크기 문제은 아니었다.
제일 큰 컨텐츠가 구글에서 기본으로 제공하는 사진배경이었다.

크리티컬 요청 체인의 요소는 주로 Font와 Widget을 요청하는 과정이었다.

Font는 gstatic 구글 웹폰트를 쓰는듯 하였고

Widget은 아직 파악이 안 됐다.

다만 트리에서는..

다음과 같이 제시하고 있었는데,

1. blogger static widget javascript

2. blogblog javascript

3. gstatic clipboard javascript

4. linkedin 배지 javascript

에서 가장 많은 비효율성이 발생했다.

gstatic은

이미지, CSS, javascript 코드를 호스팅하고 있는 구글 소유 도메인이다. CDN이 그 예

cdn역할을 하고 있는 gstatic은 

- 컨텐츠 데이터를 보다 짧은 로딩 시간에 전달하기 위해
- 이정적 컨텐츠들을 위 도메인을 통해 캐싱하고 대역폭을 줄인다.

- 구글 맵, 지도 보유