사이트 최적화) 속도 향상 꿀팁 정리 (html, css, js 편집)

사이트 로딩에 시간이 오래걸리면 로딩되기전에 나가기도 하고 그렇다면 검색엔진에 부정적인 영향을 줄 수 있습니다.

불필요하게 낭비되는 시간을 줄이려면 불필요한 작업을 없애고

용량이 큰 파일을 캐싱 처리하고 잘 처리하는게 좋습니다.

 

용량이 큰 파일을 빠르게 로딩시키기

용량이 큰 파일의 대표적인 예

1. 폰트
2. 이미지
3. 자바스크립트

그 중 가장 로딩에 영향을 끼칠수있는게 폰트입니다.

 

목차

1. 폰트 로딩 팁
2. 이미지 로딩 팁
3. 자바스크립트 로딩 팁
4. CDN 선택

 

1. 폰트는 로딩방법이 여러가지가 있습니다.

폰트 로딩 방법 1) CSS @import

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

IE6+ 모든 브라우저 지원합니다.

다만, 이 방법은 비추천하는 방법입니다.

 

@import 의 동작은

순서 (0)	1	2	3	4
html로딩	로딩중에 css를 발견			다른 태그 순차적으로탐색
	style 태그 또는 <link> 로딩	css 전체 해석	@import 실행

 

css가 완전히 로딩이 된 이후 로딩이 완료됩니다.

그래서 느릴수밖에 없습니다.

 

폰트 로딩 방법 2) link 태그

<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

 

link 태그의 로딩은 다음과 같습니다.

순서 (0)	1	2	3
html로딩	로딩중에 link를 발견		다른 태그 순차적으로탐색
		link 로딩

html 문서를 한줄씩 읽으면서 link태그 발견시 link를 로딩하며, 중간에 멈추는 과정이 없습니다.

 

TIP) link태그가 제일 빠른 방법입니다.

더 빠르게 하려면 hi098123.tistory.com/18

<link rel="preload" href="fonturl.css" as="style">

preload 기능을 이용하여 html head 부분의 상단에 preload를 선언합니다.

 

아래와 같이 preload로 로딩된 파일과 동일한 파일을 만나면 이미 로딩했기 때문에 건너 뛰게 됩니다.

<link rel="stylesheet" type="text/css" href="fonturl.css">

 

link preload 동작과정

순서 (0)	1	2
html로딩	로딩중에 link preload를 발견	다른 태그 순차적으로탐색
	곧바로 link 로딩

preload는 웹브라우저가 미리 로딩을 시작합니다.

IE에서는 지원하지 않으며 필수로 사용할 폰트등 일부 파일만 preload를 시켜놓으면 속도향상이 있습니다.

 

왜 먼저 로딩하는데 head 태그에서 속도차이가 어떻게 나나 궁금할수도 있습니다.

html태그중에는 로딩을 일시중지 시키는 태그들이 있습니다.

예를들어 script 파일은 모든 코드가 해석되기 전까지 html의 로딩을 일시중지시킵니다.

별도로 병렬작업이 가능한데 직렬로만 작업하면..

쉽게 마트에 계산대가 여러개인데 한곳에만 사람이 줄서있고 나머지 계산대에는 사람이 안가는 비효율적인 경우라고 생각하면 이해가 쉬울것입니다.

 

폰트 로딩 방법 3) Web Font Loader

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

Web Font Loader의 동작 과정

순서 (0)	1	2	3
html로딩	로딩중에 script를 발견	다른 태그 순차적으로탐색
	script 로딩	script 전체 해석	폰트 로딩(비동기)

@import와 비슷하지만 비동기로 실행됩니다.

속도측면에서는 2번 link 태그보다는 느리지만 폰트가 바뀔때 깜빡이는 현상등을 잡으려고 씁니다.

 

해당 프로젝트는 깃허브에서 더 자세히 알아볼수있습니다.

https://github.com/typekit/webfontloader

 

2. 이미지 로딩방법

이미지 로딩은 img 태그를 이용합니다.

img 태그를 사용시 html내의 모든 이미지를 불러옵니다.

이는 불필요하게 리소스를 잡아먹을 뿐더러, 로딩속도에도 영향을 끼칩니다.

 

티스토리에서는 적용하기가 어려운게 편집기에서 일괄적으로 형식을 만들어두기 때문에

lazy로딩 이라는게 있는데 티스토리에서 공식지원해주지 않는이상 쓰기는 매우 까다로울것입니다.

 

3. 자바스크립트 로딩방법

스크립트는 위에서 말했듯이 로딩시 html로딩을 일시중지 시킵니다.

 

아래 스크립트는 코드블럭용 스크립트입니다.

<script src="https://cdn.jsdelivr.net/gh/hi098123/prism-for-tistory/prism.js">

코드 블럭은 html이 로딩된 후 실행되는 코드입니다.

 

그렇다면?

head 부분에 넣어야될까? body부분에 넣어야 될까?

정답은 body의 최 하단부분입니다.

 

html이 로딩된 후 실행되는 코드가 html이 로딩을 일시중지하면서까지 로딩시킬필요는 전혀없습니다.

그렇기 때문에 html을 멈춰가면서 실행해야될 코드가 아닌이상은 body의 하단부분에 입력하는게 가장 좋습니다.

 

4. CDN 선택

똑같은 파일(리소스)를 로딩해도

어느 서버는 500ms(0.5초)

어느 서버는 60ms(0.06초) 가 소요된다.

어느 서버를 사용해야 할까?

 

당연히 속도가 빠르게 로딩되는 서버를 써야됩니다.

 

정말 의외지만 한국에서 기피해야하는 1순위는 Google CDN입니다.

구글은 보통 근처 싱가폴 홍콩 일본등으로 연결되는데 한국에 위치한 서버보다 통신에 소요되는 시간이 길수밖에 없습니다.(최대 10배정도)

font 같은경우 많이들 google font를 이용하는데 해당 파일을 jsdelivr, cloudflare 등 다른 CDN을 이용해야 빠르게 로딩이 가능합니다.

 

한국에서 빠른 서버로는 Jsdelivr가 있습니다. (게다가 무료이다.)

hi098123.tistory.com/16

무료이면서도 빠른 JS/CSS CDN 서버 - jsdelivr

https://hi098123.tistory.com/17

jsdelivr 이용하기 < Github 활용 >

 

 

웹에서 리소스 병렬 처리가 중요한 이유

리소스를 로딩하는데 병렬처리가 좋다고 위에서 언급은 했으나, 제대로 설명이 부족한것 같아 더 적습니다.

 

병렬처리가 중요하고 좋은 이유!

• 웹에서 사용하는 리소스는 매우 가볍습니다.

웹의 리소스는 용량이 적기때문에 우리가 일반적으로 사용하는 100Mbps(LTE 급)이상의 네트워크 환경에서는 주로 웹페이지 로딩에 1%미만의 속도만 사용하게 됩니다.

 

또한 폰트를 구글폰트에서 처리하는것처럼 함께 자주쓰이는 문자 그룹으로 묶으면 개별 폰트의 용량을 줄일 수 있어 더 빠른 로딩을 기대할 수 있습니다.

https://t.hi098123.com/font-subset

폰트 서브셋 변경(제거)툴

 

<1%씩 10초 로딩> VS <10%로 1초 로딩>

어떤게 좋아보이나요?

10Mbit의 리소스는 1Mbps로 10초간 로딩과 10Mbps로 1초간 로딩으로 불러올 수 있습니다.

 

네트워크 속도는 100Mbps인데 굳이 1Mbps로 로딩할 이유는 없습니다.

 

그런데, 한개를 로딩하고 다음것을 로딩하고 하는 과정은 이와는 약간은 다르지만,

네트워크 사용량이 널널한데 못쓰고 있는 상태기 때문에 무조건 리소스가 병렬로 빠르게 전달되는것이 사이트 속도에 도움이 된다고 하는것 입니다.

 

이미지등을 병렬로딩하려면 h2 프로토콜(http/2)을 사용하면 되는데, http2는 먼저 https를 설정한 상태에서 서버의 http2 플러그인등을 설정해줘야 이용 가능합니다.

자세한 설정방법은 구글에 apache http2 또는 nginx http2 등 사용하시는 서버 소프트웨어로 설정방법을 검색해보세요

 

 

* 혹시나 오타가 있거나 내용에 문제가 있는경우는 댓글로 제보 부탁드리겠습니다.