로딩 시간(속도)를 개선하는 방법

이 글은 묘연 티스토리 스킨을 기준으로 작성하며, 응용하면 다른 스킨에서도 적용이 가능합니다.

 

---

아래 항목에 해당되는지 체크하자.

1. 목록의 갯 수가 많음
2. 썸네일 사이즈가 불필요하게 큼
3. 움짤(gif) 썸네일
4. 유튜브 동영상 썸네일
5. 파일 크기가 큰 고화질 배경 이미지 또는 GIF 움짤
6. 본문 내용에 첨부된 고화질 이미지 또는 GIF 또는 동영상이 많음
7. 내용만 또는 목록+내용으로 사용 중이고 한 페이지에 보이는 목록이나 글의 갯 수가 많음

해당 사항이 많을수록 로딩 시간이 길고, 반대로 하면 로딩 시간이 줄어듭니다.

조금 더 자세한 설명은 아래 링크를 참고하세요.

로딩이 느려요

유튜브 이미지 썸네일, 유튜브 동영상 썸네일 적용 시 로딩이 느린 이유가 뭔가요?

 

---

썸네일을 조절하자

우선 티스토리의 스킨 내 이미지 설정에 관해 알아보자.

스킨의 html 중 아래와 같은 url로 시작하는 부분이 스킨에서 이미지 사이즈(용량)를 설정하는 부분입니다.

• https://i1.daumcdn.net/thumb/C320x240/?fname=
• https://img1.daumcdn.net/thumb/C320x240/?fname=

여기서 중요한 부분이 위 예시의 C320x240 부분인데, 스킨마다 설정 값이 다를 수 있습니다.
이 부분이 해당 이미지의 사이즈, 형태 등을 설정할 수 있는 부분이며,
반드시 첫 알파벳은 대문자, 중간에 x는 소문자로 작성해야 정상적으로 작동합니다.
방식과 설명, 예시는 아래 표와 링크를 참고하세요

썸네일 방식	설명	예시 값	예시 이미지
C111x111	설정한 사이즈로 고정되며, 사이즈에 맞춰 이미지 가운데를 중심으로 두고 자동으로 자름	C320x240
P111x111	설정한 사이즈로 고정되며, 원본 이미지를 자르지 않고 부족한 부분은 빈 공간으로 채움	P320x320
R111x0	설정한 가로 넓이만 고정되고 원본 이미지의 비율을 따름	R320x0
R0x111	설정한 세로 높이만 고정이 되고 원본 이미지의 비율을 따름	R0x240
S111x111	gif 같이 움직이는 이미지를 정지된 이미지로 설정하며, 설정한 사이즈로 고정 및 사이즈에 맞춰 이미지를 자동으로 자름	S320x320
S111x0	gif 같이 움직이는 이미지를 정지된 이미지로 설정하며, 설정한 가로 넓이만 고정되고 원본 이미지의 비율을 따름	S500x0
S0x111	gif 같이 움직이는 이미지를 정지된 이미지로 설정하며, 설정한 세로 높이만 고정이 되고 원본 이미지의 비율을 따름	S0x400

• 주의 1: 원본 비율을 따르는 경우 숫자 0은 변경하지 않음
• 주의 2: 설정한 방식에 따라 지원되지 않는 값이 있을 수 있음. 원하는 비율이나 사이즈에 근접한 값을 직접 찾아야 함

 

티스토리 썸네일의 예시 값은 아래 링크를 참고하면 도움이 될 거예요.

티스토리 스킨 썸네일 비율 값 예시

 

---

스킨 넓이에 맞는 썸네일 넓이를 설정하자.

**스킨의 넓이 ÷ 목록 열의 개수 = 최소 썸네일 넓이**

예를 들어 PC 기준으로 블로그의 넓이를 1000px로 설정했고, 갤러리형을 기준으로 3 열이라면 1000÷3=333…입니다. 
(조금 더 정확하게 하려면 목록 사이 간격을 제외하고 나누면 됩니다. 위 예시에서 간격이 30px이라면 (1000-30x2)÷3=넓이)
이 보다 많이 큰 사이즈는 그만큼 용량이 클 것이고, 데이터를 더 사용하게 되니 그만큼 로딩이 느려지게 되는 결과가 됩니다.

여기에서 가장 근접한 넓이의 썸네일을 찾아서 썸네일 이미지 사이즈로 설정합니다.
위 예시를 기준으로 하면 대충 333px 정도 나오니까 이 보다 작으면 이미지가 깨져 화질이 저하되어 보이게 되니 약간 크게 적용하는 게 좋으며 이 경우 340 정도가 가장 적합한 사이즈가 되겠지요.

비교적 최신 묘연 스킨은 스킨 옵션에서 넓이와 썸네일 이미지 사이즈를 설정할 수 있습니다.
없는 경우 html에서 썸네일 부분을 찾아서 원하는 사이즈로 변경하세요.

 

---

gif 움짤이 많은 블로그라면 정지된 썸네일로 설정하자.

움짤 자체의 용량이 크면 아무리 썸네일 사이즈를 줄이고, 스킨 넓이를 줄여도 최대 용량을 사용하게 될 테니 그냥 썸네일에서는 플레이되지 않도록 하는 것도 방법이겠지요.

1. [화면 넓이에 맞는 썸네일 넓이를 설정하자.]를 따라 알맞은 넓이를 계산
2. 모두 동일한 사이즈로 설정할 것인지, 원본 이미지의 비율을 따라가도록 설정할 것인지 결정
   (스킨에 따라 원본 비율은 추천하지 않는 스킨이 있을 수 있음)
3. gif움짤을 자동으로 정지된 이미지로 설정하는 방법은 위 표에 안내되어 있듯이 S111x111 / S111x0 / S0x111 중에 하나임
       a. S111x111 : 위 [티스토리 스킨 썸네일 비율 예시] 링크를 통해 1번에서 계산한 넓이와 원하는 높이를 찾아 설정
       b. S111x0 : 위 [티스토리 스킨 썸네일 비율 예시] 링크를 통해 1번에서 계산한 넓이보다 약간 큰 사이즈를 찾은 뒤 이와 같은 방식으로 설정하면 됨
       c. S0x111 : … 딱히 예쁘게 활용할 방법은 보이지 않지만 어쨌든 움짤은 멈춤
4. 그러나 이 방법은 원하는 부분을 정지된 썸네일로 설정할 수 없다는 단점이 존재하므로, 
   이를 원치 않을 경우 썸네일용 jpg나 png 이미지 파일을 하나 더 만들어 글 작성 시 썸네일로 지정하면 됨
       a. 글 작성 후 완료 버튼을 누르면 썸네일을 업로드할 수 있어서 글(본문)에 썸네일 이미지를 첨부하지 않아도 됨

 

움짤 썸네일의 플레이 길이를 조절하는 방법에 대한 안내는 아래 링크를 참고하세요.

썸네일 움짤(gif)이 너무 짧아요

 

---

화면 밖에 존재하는 이미지와 동영상 등 iframe은 지금 당장 필요하지 않으니 화면에 가까워지면 그때 로딩하도록 한다. = 지연 로딩

스킨 편집의 html에서 <img 또는 <iframe으로 시작하는 부분을 찾아 loading=”lazy”를 추가합니다.

예시:

<img src="image.jpg" alt="..." loading="lazy" />
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

 

---

글(본문)

화면 밖에 존재하는 동영상 등 iframe은 지금 당장 필요하지 않으니 화면에 가까워지면 그때 로딩하도록 한다. = 지연 로딩

위에서 언급한 loading=”lazy”는 글을 작성할 때 일부 적용이 가능한데, 안타깝게도 에디터에서 이미지 첨부는 <img로 시작하지 않아 적용이 불가합니다.

대신 동영상이나 지도 첨부 시에는 적용이 가능하며, 기본 모드에서 html모드로 변경 후 <iframe으로 시작하는 부분에 마찬가지로 loading=”lazy” 만 추가하면 됩니다.

조금 더 자세한 설명은 아래 링크를 참고하세요.

로딩이 느림(첨부된 동영상이 많음), 개선 방법

 

---

사이즈가 큰 이미지 또는 용량이 큰 GIF 움짤 이미지가 많다면

글을 나눠서 올리는 것도 하나의 방법이 될 것입니다.

안타깝게도 현 티스토리에서 글(본문)에 첨부된 이미지에 지연 로딩을 적용할 방법은 없어 보입니다.
(스크립트를 통해 적용하는 방법이 있으나 시도해 본 결과 첨부된 이미지가 불러와서 캐시가 생긴 뒤 다시 이미지를 불러오는 것으로 보여 불필요하다고 보입니다.)

따라서 가능하다면 글을 나눠 올리는 게 페이지당 로딩 속도에 도움이 될 것입니다.

 

---

기타

스킨 파일 용량 줄이기

묘연 스킨의 경우 사용자가 수정하기 쉽도록 제가 작성한 코드는 압축을 하지 않았습니다.
개별적으로 수정이 필요 없을 경우, 불필요한 공백, 줄 바꿈, 주석 등을 삭제하면 어느 정도 로딩이 개선될 것입니다.

myo_cover.js / myo_script.js 파일 같은 경우 아래 사이트를 통해 쉽게 압축이 가능하오니 필요한 분은 이용해 보세요.

JavaScript Minifier & Compressor | Toptal®

 

---

스크립트 파일(. js) 로딩 설정하기 = 비동기 로딩

이 부분은 약간 이해가 필요합니다.

html은 아래줄에 작성될수록 나중에 읽어 들입니다.
js 파일 같은 경우 대부분이 html의 구조가 로딩이 된 후에 그에 맞게 실행되어야 하기 때문에 보통은 </body> 위에 첨부되어 있어요.

예시:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="./style.css">
	</head>
	<body>
		.
		.
		.
		<script src="./images/myo_script.js"></script>
	</body>
</html>

예시를 따르면 CSS 파일을 먼저 읽고, body에 있는 스킨의 구조를 읽은 뒤, 스크립트 파일을 읽고 그 후에 적용을 하겠죠.

만약 js파일이 </head> 위에 있다면 js파일을 읽어 들이고 적용하는 동안 html을 읽는 것이 중지되기 때문에 정상적으로 js파일 안의 내용이 적용되지 않을 수 있어요. 그래서 지금까지는 </body>의 위에 넣어 html까지 모두 읽은 후 js파일을 불러오고 적용하도록 했는데 여기서의 단점은 이미 html은 다 불러와져 있기 때문에 js 파일을 읽어서 실행하기 전까지는 js 파일이 적용되지 않은 상태를 보게 되고 이후에 적용이 되기 때문에 적용되는 과정이 길게 느껴질 수 있습니다.

여기서 적용할 수 있는 속성이 바로 defer인데 아래 예제와 같이 사용하면 됩니다.

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="./style.css">
		<script src="./images/myo_script.js" defer></script>
	</head>
	<body>
		.
		.
		.
	</body>
</html>

위 예제를 보면 js 파일이 </head>의 위로 올라갔고 뒤에 defer 속성이 하나 추가 되었는데요. 이 속성은 html을 읽으면서 동시에 js파일도 읽고, html 파일을 다 읽은 후 js 파일을 적용시키기 때문에 </body>의 위에 js 파일을 불러오도록 하는 것보다 로딩 및 적용 속도 면에서 약간의 이득이 있습니다.

다만, js 파일 안에 빠르게 읽고 빠르게 적용해야 하는 내용이 있다면 문제가 있을 수 있고, 또 js파일 간 순서가 바뀌면 그로 인해 문제가 발생할 수도 있으니 이 부분을 유의해야 합니다.

참고로 방금 언급한 빠르게 읽고 html보다 먼저 적용되어야 할 내용이 있다면 이 부분은 defer가 아닌 async로 적용하면 됩니다.

보다 상세하게 정리된 영상이 있으니 필요하신 분은 아래 영상을 참고하세요.

 

---

外 스킨 제작자로서 더 개선할 수 있는 부분

저도 기억하고 차차 응용하기 위해 적어둡니다.

1. 스크립트는 순수 자바 스크립트로 작성할 것…
   요즘 자바 스크립트는 많이 개선이 되어서 jquery 같은 건 잘 쓰지 않는다고 하네요.
2. 가능하다면 js파일은 압축해서 min.js로 제공
3. 가능한 짧고 간결한 코드를 작성할 것… 글자 수, 공백, 줄 바꿈, 주석 등 글자 수가 많을수록 용량이 늘어납니다. 최근 추가 된 CSS 속성으로 :where(), :is()가 있는데 중복되는 글자 수 줄이는데 도움이 됩니다.
4. CDN사용을 줄일 것 CDN으로 이미 캐시 된 파일이 있다면 속도면에서 이득일 수 있으나, CDN서버에 문제가 있거나, 스킨 파일과는 관련 없이 불필요하게 먼 거리에 있는 CDN서버를 이용해야 하는 부분, 그리고 같은 CDN 파일을 많은 사람이 이용해서 딜레이가 생길 수 있는 등의 단점도 존재합니다.
5. <img>에 srcset, sizes 속성을 이용해 반응형으로 이미지를 읽어 들이도록 할 것.
6. 버튼 같이 작은 이미지가 많다면 하나의 이미지로 합쳐서 사용하기 = CSS 스프라이트