블로그: 티스토리
스킨: 북클럽
※ 스킨의 종류가 다를 경우 파일의 종류와 구조는 다르지만 설정만 적용 가능합니다.
속도 측정 도구: 구글 PSI (PageSpeed Insights)
편집 대상 파일: "style.css", "skin.html" (CSS와 HTML 파일)
블로그 시작하면서 간간이 속도 측정하면서 설정을 변경하고, 테스트하고 반복하였습니다.
폰트 설정에 관계된 페이지 속도의 등락이 거의 이상 증상으로 받아들일 정도로 괴이한 현상을 보여서 이것을 파악하는 데 대부분의 시간을 보냈습니다.
티스토리 블로거들의 전문적인 글과 구글 페이지 로딩 측정 사이트의 도움말 등을 하나씩 읽어보고 설정에 적용하여 테스트하였습니다. 오늘 변경한 설정이 속도도 안정적이면서 높게 나와서 해결이 된 느낌입니다.
전문적인 지식이 없다 보니 이제서야 원인을 찾은 것 같습니다.
블로그의 시스템 폰트(@font-face)의 용량이 큰 이유도 있지만 코드 적용 순서를 잘못 사용한 것이 실제 원인이었습니다.
이것에 대하여 정확한 설명이라고 할 수 있는 기반 지식이 부족하므로 보충 자료로 해당 파일의 폰트 설정과 관련된 코드 일부를 붙여 놓았습니다.
구글 PSI 속도 측정 및 분석 리포트 제공 서비스는 가볍게 볼 수 없는 정말 좋은 기능을 갖추고 있습니다.
하나의 의문점이 있습니다.
속도 측정이라는 것이 일관성 있고 안정성이 입증된 하나의 범용 서버 사이트에서 분석 대상인 블로그 등의 인터넷 주소를 측정하는 것이 좋다고 생각합니다.
반복해서 측정을 하다 보니까 해당 측정 페이지에 접속한 웹브라우저의 페이지를 벗어나 다른 사이트에 접속한 페이지로 포커스를 이동하거나, 다른 페이지나 앱을 동시에 띄우고 인터넷과 컴퓨터 사용을 가중하는 작업을 하면 구글 PSI에서 제공하는 분석 점수가 급격하게 낮아지는 경향이 있습니다.
트래픽을 분산하기 위한 목적으로 접속자 PC(모바일)와 PSI 서버가 분석 데이터를 주고 받으면서 작업이 진행되는 것이라고 생각합니다.
결론은 서버에서 측정하는 것이 아니라, 접속한 클라이언트의 컴퓨터나 인터넷 단말기에서 동시에 측정하는 것이라는 결론에 도달합니다. PSI에서 제공하는 분석 점수는 다른 측정 대상과의 비교보다는 자신의 측정 대상 사이트의 속도와 안정성을 파악하는데 적합할 것으로 생각합니다. 측정할 때에는 다른 작업을 모두 중지하는 것이 객관적인 결과를 이끌어 낼 수 있을 것입니다.
style.css 파일 내부 폰트 관련 코드
(2021.04.15)
/* 01. Web Font */
@font-face {
font-family: 'Noto Sans KR';
src: local('Noto Sans CJK kr Regular'),
local('noto-sans-cjk-kr-regular'),
url('./images/NotoSansCJKkr-Regular.woff2') format('woff2');
font-display: swap;
}
/* 02. Type Selector Reset */
body {
-webkit-text-size-adjust: none;
text-size-adjust: none;
font-family: 'Noto Sans KR', Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1em;
line-height: 1.5;
color: #333;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
font-size: 100%;
}
"@font-face"의 설정에는 "font-family", 폰트 파일의 소스 주소("src")를 설정하였습니다. 블로그의 업로드 공간에 약 200KB 용량의 폰트 파일을 올렸습니다. 그리고 로컬(local)과 서버(url) 모두 업로드한 폰트 파일과 연결했습니다.
약간의 차이는 있지만 구글이나 CDN 폰트 서버의 해당 파일을 연결하여도 속도 차이는 거의 없습니다.
어느 것을 사용해도 무방한데, 구글은 사용 시간에 따라서 속도 편차가 심합니다.
이전까지 "@font-face" 안에 "font-weight"와 "font-style"에 대한 설정도 같이 사용했었는데, 이것을 "body"로 완전하게 분리하고서 문제가 해결되었습니다.
제 기억이 맞는다면 구글이나 페이지 로딩 전문 전문 사이트에서도 이것에 대한 언급을 본 적이 없습니다. 제가 무지해서 그와 같이 사용했을 수도 있습니다.
폰트에 관한 여러 가지 설정을 폰트 파일의 소스 링크와 같이 "@font-face" 안에 설정하면 폰트 서버에서 검색해야 하는 폰트의 종류 범위가 넓어지므로 이런 현상이 발생하지 않았을까 추측합니다.
한 마디로 분리해서 설정하는 것이 빠릅니다.
skin.html 파일 내부 폰트 관련 코드
(2021.04.15)
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" />
</noscript>
<link rel="stylesheet" href="./style.css" as="style">
skin.html 파일에 폰트 관련 코드를 배치할 때,
<meta> 태그 바로 밑에 위치를 배정합니다. 좀 더 빠르게 관련 자료를 로딩하기 위함입니다.
그리고 CSS 파일 설정 코드의 위에 배치해야 합니다.
웹 사이트 혹은 블로그의 로딩 순서가 HTML, 폰트, CSS 순서로 진행되어야 합니다. CSS 파일을 폰트보다 먼저 로딩하면 짧은 시간이지만 CSS 파일의 설정이 HTML 페이지의 폰트 불일치로 인한 화면 깜빡임이나 변동 현상이 발생하기 때문입니다. 접속자에게 좋지 않은 인상을 줄 수 있습니다.
"style.css" 설정 윗 부분에 지정한 4개의 "link" 설정은 페이지 로딩 최적화 사이트에서 참고한 것입니다. 모두 폰트 관련 설정입니다.
"style.css"에서 블로그 업로드 공간에 배치한 폰트 외에, 구글 폰트 서버의 링크를 다시 한번 지정하였는데도 속도에 변화 없이 안정적인 로딩 상태를 지속합니다. 꼭 한 번 본인의 블로그에 반영하여 시험해볼 가치가 있는 코드입니다.
링크 걸어 놓습니다.
[출처] Making Google Fonts Load ~20% Faster
by Ahmad Awais
참고 페이지
How to load web fonts to avoid performance issues and speed up page loading
20 Tips for Optimizing CSS Performance
7 Tips to Load Google Fonts Faster
댓글