구글 콘솔 코어 웹 바이탈에서 블로그 로딩 속도가 느리면 문제가 있다고 알려줍니다. 주로
CLS와 LCP 부분에서 문제가 발생하며 저 같은 초보 블로거들은 이들 문제를 개선하기 위해 부단한 노력을 해보지만 마음처럼 개선되지 않습니다. 블로그 로딩 속도가 느린 페이지는 구글 검색에서 상위 노출이 어렵다고 합니다.
아래는 구글에서 제공하는 블로그 속도를 확인하는 사이트 링크입니다.
티스토리 속도 측정 사이트 링크
위 사이트에 들어가서 자기 티스토리 게시물 주소를 넣고 옆에 있는 분석을 누르면 모바일과 데스크톱의 속도 점수가 아래 이미지처럼 표시됩니다.
속도 측정 결과 성능값이 데스크톱 90, 모바일 77로 측정되었습니다. 이 정도 점수라면 상당히 높은 점수이지만 데스크톱은 통과했고 모바일은 CLS 점수가 0.126으로 0.1을 초과해서 바이탈 테스트를 통과하지 못하였습니다.
측정결과 문제가 있는 부분
아래로 스크롤하면 아래 이미지가 보이는데 이들 부분에 문제가 있다고 설명하는 것으로 위에서부터 문제가 심각한 것입니다. 아래 이미지는 인터넷상에서 남의 티스토리주소를 복사해 테스트한 결과 페이지입니다.
렌더링 차단 리소스란
웹페이지를 열면 코드를 위에서 아래로 읽는데 HTML, CSS, JAVASCRIPT가 들어있으며 소스 코드를 해독하면서 뭔가 중요한 내용이 있으면 멈추고 그 소스나 스크립트를 해독하는데 그 중요한 내용이 렌더링 차단 리소스이며, CSS와 Javascript가 해당됩니다.
CSS는 렌더링이 차단되지 않도록 하기 위해 아래 예처럼 항상 HTML 문서 최상단에 배치하며,
<head>
<link href="style.css" rel="stylesheet" />
</head>
위에서 부터 해독하기 때문에 특별한 경우가 아니라면 아래 예처럼 자바스크립트를 body의 마지막 부분에 위치시켜야 합니다.
<body>
<div>...</div>
<div>...</div>
<script src="app.js" type="text/javascript"></script>
</body>하지만 이러한 부분은 우리 같은 초보 블로거들이 해결하기 어렵습니다.
차세대 형식 이미지 제공
우리가 티스토리에 올리는 이미지는 일반적인 확장자 jpg, gif, png 이미지의 확장자들로 이미지 크기가 커서 읽어 들이는데 시간이 소요되므로 이들 이미지를 압축하거나 JPEG 2000, JPEG XR, WebP와 같은 차세대 이미지 형식을 이용하는 방법을 말합니다. 하지만 이들 차세대 이미지 형식은 브라우저별 호환성 문제를 감안하여 올리셔야 합니다. 사이트의 모든 이미지를 변경하는 작업은 어렵기 때문에 처음 스킨에 업로드했던 공동으로 사용하는 이미지들은 몇 개 안 되기 때문에 압축하여 올릴 수 있습니다.
이들 이미지를 변경해 주는 온라인 사이트는 찾아보면 많으며 대표적으로 https://converter.app/ko/png-webp/ 가 있으며 프로그램은 Photoscape X 가 있습니다.
초기 서버 응답시간 단축
이 부분은 티스토리 서버 문제이므로 블로거들이 수정할 수 없는 부분입니다.
오프스크린 이미지 지연
위 blank.png을 다운받아 티스토리 관리자-스킨 편집-HTML 편집-파일업로드순으로 찾아가 업로드 - 업로드한 파일의 마우스 우클릭을 하여 링크 주소 복사합니다. 아래 소스 중간 부분에 복사한 링크를 붙이기 하여 이 소스를 </head> 바로 윗부분에 삽입합니다. 이 파일은 이미지가 로딩 대기 중일 때 부하가 덜 걸리게끔 투명한 아주 작은 이미지로 로딩 위함입니다.
<!--lazy test start-->
<script>document.addEventListener("DOMContentLoaded",()=>{let e=!1;const t=e=>{e.classList.contains("loaded")||(e.src=e.dataset.src,e.removeAttribute("data-src"),e.dataset.srcset&&(e.srcset=e.dataset.srcset,e.removeAttribute("data-srcset")),e.classList.add("loaded"))},s=e=>{e.dataset.src=e.src,e.dataset.src&&(e.dataset.srcset=e.srcset,e.removeAttribute("srcset")),e.src="복사한 링크 붙이기"};if("IntersectionObserver"in window){const e=new IntersectionObserver((e,s)=>{e.forEach(e=>{if(!e.isIntersecting)return;const r=e.target;t(r),s.unobserve(r)})},{root:null,rootMargin:"200px"});document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(t=>{s(t),e.observe(t),t.classList.add("observing")})}else{const r=()=>{const{scrollY:e}=window;document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(s=>{if(s.classList.contains("loaded"))return;const r=s.parentNode.offsetTop;r+s.offsetHeight>e&&e+window.innerHeight>r&&t(s)})};document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(o=>{s(o),r(),window.addEventListener("scroll",()=>{e||(window.requestAnimationFrame(()=>{t(),e=!1}),e=!0)},{passive:!0})})}});</script>
<!-- lazy test end-->이미지 크기 적절하게 설정하기
이미지의 크기가 로딩 속도에 많은 영향을 미치므로 고화질, 고해상도 이미지의 경우 이미지의 크기를 적당한 크기로 줄여 올려야 합니다.
사용하지 않는 CSS 줄이기
이 부분도 기술적으로 어려운 영역으로 패스
사용하지 않는 자바스크립트 줄이기
초보 블로거에겐 어려운 문제입니다.
CSS 축소하기
이 부분도 기술적으로 어려운 영역으로 패스
이미지 요소에 width 및 height가 명시되어 있지 않습니다
위 이미지처럼 올리는 모든 이미지마다 좌측 상단 화살표를 눌러 크기를 지정해주고 또 하단 이미지 설명과 우측 상단 톱니바퀴를 눌러 alt 태그를 써주어야 합니다.
구글 애널리틱스 지연으로 블로그 속도 향상 하기 Lazyload
<!-- 구글 애널리틱스 지연 시작 -->
<script type="text/javascript">
/*<![CDATA[*/
var lazyAnalytics=!1;function gtag(){dataLayer.push(arguments)}window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyAnalytics||0!=document.body.scrollTop&&!1===lazyAnalytics)&&(function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=본인코드";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}(),lazyAnalytics=!0)},!0),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","본인코드");
/*]]>*/</script>
<!-- 구글 애널리틱스 지연 끝 -->코드 본문 두 군데 본인의 구글 애널리틱스 코드를 넣어야 합니다.
구글 애드센스 지연 로딩으로 타사 코드 영향 줄이기 Lazyload
<!-- 구글 애드센스 지연 시작 -->
<script>/*<![CDATA[*/
var lazyadsense = false; window.addEventListener("scroll", function(){ if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) { (function() { var ad = document.createElement('script'); var crs = document.createAttribute('crossorigin'); crs.value = 'anonymous'; ad.setAttributeNode(crs); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-본인애드센스코드번호'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyadsense = true; } }, true)
/*]]>*/</script>
<!-- 구글 애드센스 지연 끝 -->코드 본문 한 군데 본인의 구글 애드센스 코드를 넣어야 합니다.
운영 관리 중인 티스토리 문제점들
모바일 CLS 0.126으로 바이탈 통과하지 못한 제 티스토리 속도 측정 결과 문제점들입니다. 오프스크린 이미지 지연하기는 데스크톱결과에는 나오지 않는데 모바일 결과에만 나타납니다. 정말 노력할 만큼 했는데 더 이상 문제점이 줄어들지 않아요..ㅠㅠ
글을 마치며
초보 블로거라면 최상의 방법은 속도에 최적화된 스킨을 사용하고 또 전문가에게 도움을 받는 것입니다. 글을 쓴 저 역시 초보 블로거로 필요한 부분만 사용하시면 되며, 이상으로 초보 블로거가 할 수 있는 티스토리 속도 높이기에 관한 글을 마칩니다.
