(티스토리 팁) 블로그 속도가 느릴 때 Preload 기능으로 빠르게 하기
preload 기능을 이용해서, 티스토리 블로그 속도를 향상시키는 방법입니다.
티스토리 블로그가 느릴 때 개선시킬 수 있고, 구글 상위 노출에도 도움이 됩니다.
Preload, defer의 개념
해외에서는 이미 유명한 내용이고, 알고 보면 별 내용이 아니죠.
우리가 어떤 웹페이지를 열 때, 특정 순서에 따라 여러 파일들을 불러들입니다.
밑의 그림은 제 블로그 첫 페이지를 열 때인데, 웹페이지 한 개만 열었는데도, 상당히 많은 파일을 서버로부터 받는 것이 보입니다.
Preload는 말 그대로, 웹페이지를 열 때 초반에 필요한 파일은 먼저 불러들인다는 것입니다.
Defer는 뒤로 미룬다는 뜻인데, 로딩 초반에 필요하지 않은 파일은 뒤로 미룬다는 것입니다.
웹브라우저에게 어떤 파일을 먼저 불러들일지, 어느 파일은 나중에 불러들일지 가르쳐주는 거죠.
폰트파일과 CSS파일은 먼저 불러들이는 게 좋습니다. 즉, preload를 사용합니다.
폰트파일이 늦게 로딩되면, 기본폰트로 나온 후, 폰트가 갑자기 변하는 모습을 볼 수 있어요.
FOUT (flash of unstyled text)라고 부르기도 하죠.
CSS파일을 나중에 로딩하면, 아무 꾸밈 없는 단순한 글자와 이미지만 나열되었다가, 깜빡하면서 꾸며둔 모양으로 변하는 모습이 보이죠.
script.js는 기능에 대한 내용이니, 화면이 다 나온 후에 로딩해도 되겠죠? defer로 미루면 됩니다.
Preload, defer 적용 전후 비교
적용 전후의 로딩순서와 소스코드를 살펴보겠습니다.
!!주의!! 소스코드 변경 전에, 먼저 백업을 해두시기 바랍니다. 소스코드 수정이 익숙하지 않은 분들은 기존의 코드와 엉킬 수 있어요.
!!주의!! 일부 스킨은 <script>에 defer를 넣으면 일부 기능이 작동하지 않는 경우가 있습니다. 이유는 대부분 jQuery 라이브러리를 이용했기 때문인데, 이 경우는 부득이하게 defer는 사용하실 수 없습니다.
Preload, defer 적용 전
HTML 소스코드
Noto Sans KR 웹폰트를 로드하고, CSS 파일을 로드하고, javascript 파일을 로드하고 있습니다.
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
<script src="./images/script.js"></script>
</head>
로딩순서
HTML 파일은 작성된 순서대로 하나하나 처리하는 방식이지만, 막상 로딩 순서를 보면 예상과는 조금 다르죠.
9번째 로딩되는 게 웹폰트, 11번째가 CSS파일, 12번째가 js파일입니다.
필요한 파일을 먼저 로딩시키고 덜 중요한 js 파일은 나중에 로딩시키면, 사이트 속도점수를 개선시킬 수 있어요.
Preload, defer 적용 후
HTML 소스코드
웹폰트, CSS를 로딩시키기 전에 preload라는 것을 먼저 명시해줬습니다.
<script> 태그 안에는 defer 속성을 줬죠.
<head>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet" />
<link rel="preload" href="./style.css" as="style" />
<link rel="stylesheet" href="./style.css" />
<script src="./images/script.js" defer="defer"></script>
</head>
주의점
로딩순서
아까와 확연히 다른 모습입니다.
화면에 표시하기 전에 필요한 파일들, 즉 웹폰트와 CSS가 5, 6번째 파일로 먼저 로딩되고, script.js가 훨씬 뒤에 로딩되는 것을 볼 수 있어요.
결론
아시다시피 CSS 파일은 스타일을 지정해둔 파일들입니다.
본문의 상하좌우 여백은 어떤지, 상단 내비게이션 바는 어떤 모양으로 나타낼 것인지, 폰트 색깔, 크기는 어떤지, 썸네일 크기는 어떻게 지정할지 등등..
웹폰트 파일을 <link> 태그로 불러들이는 것은 사용할 폰트를 로딩하는 과정이겠죠.
CSS 파일도, 웹폰트도 당연히 먼저 로딩되어야 사용자 경험이 좋을 것입니다.
평범한 글자 먼저 나타난 후, 깜빡거리면서 화면 모습이 바뀌는 건 보기 안 좋죠.
또한 웹브라우저에게 임의로 중요도 순서를 판단시키지 않으므로, 퍼포먼스 면에서도 더 좋아요.
javascript 파일은 기능을 담은 파일입니다.
돋보기 아이콘을 누르면 검색창이 나타난다던지, 스크롤이 어느정도 내려가면 최상단 아이콘이 나온다던지, 댓글 접기 아이콘을 누르면 댓글이 없어진다던지 등.
간단하게 생각해도 js 파일은 먼저 로딩될 필요는 없겠죠?
defer 속성을 줘서 뒤로 미루는 게 퍼포먼스 면에서 더 좋습니다.
소개드린 방법을 통해 사용자 경험을 향상시킬 수 있고, 동시에 사이트 속도를 미약하게나마 개선시키므로 검색엔진에서도 더 좋은 점수를 받게 됩니다.
Preload에 대한 것은 구글 개발자 rel='preload'에서 얘기를 하고 있고,
모질라 개발자 rel="preload"에서도 언급하고 있습니다.
이 방법을 활용하시는 것도 좋지 않을까요?
본문 중 !!주의!! 부분을 꼭 염두해두시고 하시기 바랍니다.
특히 백업은 반드시 해놓으셔야 해요.