사이트나 블로그 로딩에 너무 시간이 오래 걸리면 사용자들의 전환율, 즉, 광고 클릭률이 떨어진다는 구글에서의 연구 결과 보고서가 있습니다.
이 때문에 SEO를 위한 단순한 리다이렉팅 개선 이후에도 블로그는 속도를 최대한 우선시해서 설정하는 것이 중요한데요. 오늘 본 글에서는 사이트 최적화에 대해 제가 공부하고 있고, 또 시도한 방법들을 소개해보겠습니다.
단, 이를 이해하기 위해서는 html이나 css에 대한 개념이 어느 정도 있어야 하므로 이는 참고해 주시길 바랍니다.
티스토리 속도 최적화를 위한 폰트 및 자바스크립트 수정 이유
html을 이용하는 사이트는 html이 인터프리터 언어이므로 기본적으로 위에서부터 아래로 순서대로 실행됩니다.
jsp의 경우에는 jsp부터 먼저 실행과 나서 html이 실행되지만, 티스토리는 html이 가장 먼저 실행되는 것이 맞습니다.
따라서 티스토리의 경우 위에서부터 아래로 쭉 읽어나가다가 <style> 함수를 발견하면 그곳에서 css를 발견합니다.
그런데 여기서 문제가 하나 있습니다.
만약에 북클럽 스킨을 사용하셔서 CSS를 확인해 본다면 다음과 같은 코드를 발견하실 수 있을 것입니다.
@import url(http://...)
이는 폰트 로딩 방법 중 대표적으로 가장 느린 로딩 방법 중에 하나입니다.
제가 아는 바로 @import의 동작 순서는 다음과 같습니다.
| 과정 | 1 | 2 | 3 | 4 |
| html 진행도 | style 함수 로드 | 다음 함수로의 동작 | ||
| 폰트 진행도 | css 전체를 로드 | @import를 찾아 실행 |
이렇게 되면 html이 진행될 때 css가 전체적으로 해석되야만 @import를 발견할 수 있습니다.
이는 다음 html 동작 자체에 엄청난 속도의 저하를 일으킵니다.
그렇기 때문에 이 글에서 저는 아예 @import를 주석처리함으로써 외부 폰트를 없애 버렸습니다.
하지만 이렇게 되면 자신이 원하는 폰트를 쓰지 못하고 티스토리 자체의 기본 폰트를 쓰기 때문에 불편함과 가독성이 많이 떨어진다는 단점이 있습니다.
그러나 폰트를 로딩하는 방법에는 import만 있는 것이 아닙니다. html 자체에서 로딩을 하는 <link rel="preload">라는 것이 있습니다.
link에서 preload를 쓰게 되면 html에서 불러오는 것이므로 진행 순서가 다음과 같습니다.
| 과정 | 1 | 2 |
| html 진행도 | link preload | 다음 함수로 이동 |
| 폰트 진행도 | 바로 link 로드 |
이렇게 되면 html이 진행함과 동시에 폰트의 로딩도 동시진행이 되므로 확실하게 과정이 간결해진 것을 볼 수 있습니다.
preload는 폰트뿐만 아니라 다른 스크립트나 이미지에도 적용될 수 있지만, preload가 만능은 아닙니다.
왜냐하면 너무 중복해서 로딩하게 된다면 오히려 로딩 과정이 촘촘해져서 쓰지 않았을 때보다 초반 로딩이 더욱 느려지기 때문입니다.
비유하자면 하나였던 인터넷 선을 여러 개로 늘려주는 것이라 생각하시면 됩니다.
따라서 폰트나 이미지 같이 빠르게 로딩이 필요한 것들을 먼저 로딩하게 설정하는 것이 이득입니다.
이는 pagespeed insight에서 연결해 주는 웹폰트 로딩 개선 방법에서 설명하고 있습니다.
속도 최적화를 위한 preload 사용 방법
preload를 사용하기 위해서는 다음과 같은 양식을 써야 합니다.
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
<link> 함수의 규칙은 다음과 같습니다.
- rel은 어떤 타입의 명령을 내릴 것인지에 대한 특성입니다. 여기서는 preload라는 명령으로 고정합니다.
- href는 어떤 url을 로딩해야 하는지에 대한 값을 넣어주는 곳입니다.
- as는 파일의 유형을 지정해 주는 것으로서 rel="preload" 또는 rel="prefetch" 특성을 지정했을 때만 사용합니다.
여기선 폰트를 바꾸는 것이 목적이기 때문에 font를 씁니다. 이 유형에 대해서는 찾아보시면 여러 종류가 나옵니다. - crossorigin 속성은 글꼴이 CORS(Cross Origin Resource Share) 요청으로 리소스를 가져와야 하는지에 대한 여부를 나타냅니다. 한마디로 외부에서 어떤 파일을 가져와야 한다면 무조건 써줘야 하는 값입니다.
따라서 북클럽에서 preload를 사용하려면, 일단 사용할 폰트를 다운로드하여 업로드하여야 합니다.
이 방법에 대해서는 다른 블로그에서 자세히 설명하고 있습니다. 자신의 스킨이 북클럽이라면 참고하시면 됩니다.
preload의 사용법은 사실 pagespeed insight에서, "웹 폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기"라는 것의 해결방법과도 같습니다.
그렇기 때문에 "웹 폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기"를 어떻게 해결해야 할지 고민 중이시라면 preload를 쓰는 방법을 찾으시면 됩니다.
그러나 만약에 자신의 스킨이 고래스킨이라면 다음 코드와 같이 쓰면 됩니다.
<link rel="preload" href="./style.css" as="style" crossorigin />
<link rel="stylesheet" href="./style.css"/>
위의 블로그에서는 북클럽 스킨의 예시 때문에 woff2 자체를 다운로드하여서 썼지만, 고래스킨에서는 이미 @font-face로 폰트를 서버에서 가져오고 있으므로 아예 CSS 자체를 미리 로드하는 방식으로 쓰는 것이 옳습니다.
그래서 이렇게 적용하게 되면, 폰트의 로딩 속도가 조금 빨라진 것에 대한 체감을 할 수 있습니다.
CSS를 미리 로딩하는 과정이므로 CSS가 무거운 블로그의 경우 훨씬 체감이 됩니다.
마치며
이상으로 효율적인 티스토리 광고 최적화를 위한 폰트 로딩 속도 향상 방법과 그 이유에 대해서 배워보았습니다.
블로그 마케팅은 아직도 알아갈게 많아서 신비한 것 같습니다. 프로그래밍과 글쓰기, 그리고 마케팅까지 모두 할 줄 알아야 하는 분야라서 더욱 그런 듯싶네요.
아무튼 여러분도 html에 대해 익혀서 블로그 속도 향상으로 더욱 많은 애드센스 수익 얻어가셨으면 좋겠습니다.
