[BlogDev] 페이지 로딩 속도 개선 작업

작업 동기

깃헙 페이지 빌드는 이전의 TIL 분리 작업과 카테고리 카운트 로직 삭제를 통해 어느 정도 확보했지만, 현재 가지는 가장 큰 문제는 페이지 로딩이 너무 오래 걸리는 문제이다. 벤치마킹을 해보지는 않았지만, 각 페이지 이동마다 약 2~4초정도 렌더링을 체감하고 있다.

크롬 개발자 모드의 네트워크를 통해 정확히 확인한 결과 DOMContentLoaded까지 약 4~6초 범위인 것을 확인했다. 심각한 정도이다. 이 원인을 분석하고, 보다 더 빠른 렌더링을 위해 개선해보려 한다.

문제점 파악

콘텐츠 다운로드 속도

시간	프로필 사진	접속 유저 카운트 뱃지
총 시간	5.31s	1.07s
다운로드	4.92초	1.

정말 심각하다. 이 2개만 없애도 충분히 빠르게 렌더링이 가능할 것 같다. 이것들을 어떻게 해결할 수 있을까…

용량 문제

컨텐츠 다운로드 시간이 오래 걸리는 것으로 보아, 프로필 사진이 필요 이상으로 큰 용량을 가지므로 이에 대한 조정이 렌더링 시간의 변화로 이어지지 않을까 생각해보았다.

그래서 같은 테마에 그나마 빠른 렌더링 속도를 가진 분의 블로그와 비교해보았다.

	비교 블로그	내 블로그
사진 용량
상대 용량	1	19.3
상대 화소수	1	61.11

휴대폰으로 찍은 사진을 그대로 github CDN을 사용하여 올렸더니 용량도 너무나 크고, 화질도 3024x3024로 불필요할만큼 컸다. 음. 아마도 이 화질 부분을 개선하면 훨씬 빠른 렌더링 속도를 가질 수 있을 것 같다고 강하게 느껴진다.

300x300 수준으로 각각 1/10씩, 즉 용량을 기존의 1%로 줄여보자.

결과

이미지 자체에 대한 대기시간이나 콘텐츠 다운로드 시간은 확연히 줄었다. 무시할 수 있는 수준이다. 하지만 로딩 시간은 그리 차이가 나지 않았다.

로드는 4~5초 내외를 계속 유지중이다. 그렇다면 뭐가 문제인걸까.

네트워크 폭포를 보면 약 3초정도의 빈 공백이 있다. 도대체 뭐가 문제일까.

메모리 캐시의 로딩 문제?

특히나 사진과 gif 파일을 CDN으로 올린 포스트의 경우 시간이 훨씬 오래 걸렸는데, 새로고침을 통해 다시 같은 페이지로 가자, 메모리캐시에 저장된 것을 가져온 덕일까 조금 시간이 단축됐음에도 불구하고 약 5~6초의 로딩 시간을 필요로 했다.

폭포를 보면 역시나 사이에 어마어마하게 큰 공백이 있다. 작업 각각에 대한 로딩 시간은 그리 크지 않은데 이 공백에 의해 전체적인 로딩이 멈춘 듯한 현상을 보인 것 같다. 메모리 캐시를 불러오는 시간인걸까? 하지만 그렇게 큰 데이터를 가져오는 것도 없어보인다…

lunr!!!!

아까부터 자꾸 눈에 거슬렸던 파일이 있다. 바로 lunr이다.

lunr.js라고 블로그의 내용에서 검색 기능을 추가하는 client side full-text search engine이다. minimal-mistake 테마에서 기본적으로 검색에 사용하도록 내장되어 있다. 그런데 사진에서 보듯 lunr-store.js에 모든 포스트의 제목과 카테고리 태그 정보들이 json 형태로 존재했다.

아마도 이 데이터가 캐시로 저장된다고는 하지만, 크기가 몹시 크기 때문에 이런저런 문제로 로딩에 영향을 주는 것이라 판단하여 _config.yml에서 search를 사용하지 않는 것으로 하였다.

검색 기능을 정말 필요한 기능이지만, 이것이 속도를 결정한다는 것은 추측일 뿐이고, false 처리해도 필요 시 다시 되돌릴 수 있으므로 일단은 검색 기능을 포기해보았다.

결과

네트워크에 lunr 관련 파일이 모두 로딩되지 않았고, 로딩시간이 몹시 짧아짐을 확인할 수 있었다. 즉, 로딩 속도에 지배적인 영향을 미쳤던 것은 모든 포스트의 정보를 가져오려 했던 lunr 관련 파일들이었다.

이제는 페이지를 이동할 때마다 버벅이던 로딩이 눈에 띄게 줄어서 사용성이 몹시 증가함을 느낀다.

검색 기능 못 잃는데…

검색 기능은 블로그 포스트가 많아지면 많아질수록, 나중에 작성했던 블로그 포스트에서 필요한 정보를 추출하기 위해 반드시 필요한 기능이다. 그래서 이 기능이 없는 것은 반쪽짜리 블로그라는 생각이 든다. 물론 뭐 카테고리를 타고타고 들어가면 된다지만 말이다…

검색 기능을 되찾는 건 추후에 다시 다루도록 하겠다! 우선 로딩 속도 개선 성공!!