코린이의 기록

웹 페이지 성능 속도를 높이기 위한 몇가지 본문

javascript,HTML,CSS

웹 페이지 성능 속도를 높이기 위한 몇가지

코린이예요 2020. 2. 7. 16:07
반응형

1. html <script> 태그 위치 변경하기

보통 아래와 같이 <head></head>에 <script> 태그를 적는 경우가 많은데 HTML을 읽는 과정에 무거운script가 포함되어 있다면 해당 script 로드와 실행을 위해 중단되는 시점이 생겨 그만큼 disply에 지연이 발생한다. 웹 페이지는 가장 처음에 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정한다. 파싱이 끝나고 DOM트리가 생기기전 자바스크립트가 실행되어 DOM조작을 할 경우 에러가 발생할 수 있다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title >                
<script src="./js/lib/jquery-3.1.1.js"></script>
<script src="./js/lib/bootstrap.min.js"></script>
</head>
<body>
          
</body>
</html>

이러한 이유로 script는 html의 body가 끝나기 바로 직전에 적는 것이 좋다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title >                
</head>
<body>
     ......
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./js/lib/jquery-3.1.1.js"></script>
    <script src="./js/lib/bootstrap.min.js"></script>
</body>
</html>

(참고로 CSS는 가능한 빨리 적용되어야 하기 때문에 <head> 태그 사이에 위치시키는 것이 좋다.)

 

2. js, css, img 캐싱하기

일반적으로 웹 사이트는 성능상 이점을 얻기 위해 gif/image/css/js 등과 같은 정적 자원(static resource)은 Nginx와 같은 웹 서버에서 캐시한다. 이런 정적 컨텐츠들을 NginX에서 대신 처리하는 것으로 응답 속도를 높일 수 있으며, WAS에 대한 부담을 줄일 수 있다. 컨텐츠들을 메모리에 캐시할 경우 서비스 할 경우 고성능의 웹 서비스를 만들 수도 있다.

nginx에서 statif file의 cache 설정하는 방법은 다음과 같다. 

    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
        expires 1M;
        access_log off;
        add_header Cache-Control "public";
    }

    location ~* \.(?:css|js)$ {
        expires 1y;
        access_log off;
        add_header Cache-Control "public";
    }

Before Cache Time

After Cache Time

Resource Name Before Cache Time


 After Cache Time
1 2 3 1 2 3
bootstrap.min.css 961ms 1.71s 1.80s 856ms 875ms 493ms
ie10-viewport-bug-workaround.css 226ms 221ms 378ms 442ms 437ms 221ms
pagination.css 221ms 231ms 472ms 432ms 424ms 225ms
jquery-3.1.1.js 901ms 1.35s 2.15s 1.01s 1.00s 916ms
dash.all.min.js 1.31s 2.53s 6.79s 1.78s 1.76s 2.03s
moment.js 1.04s 1.07s 1.58s 1.74s 967ms 795ms
Ubuntu-L.ttf 1.02 1.37s 3.91 1.53s 1.10s 826ms

3. javascript 압축하기

js library 소스의 주석 및 공백들을 줄여 성능 개선에 도움을 준다. 

왼쪽은 압축 전, 오른쪽은 압축 후의 모습이다. 주석과 공백을 줄여 소스를 일렬로 나열한 형태가 된다. js를 압축하는 tool은 아래 링크를 클릭한다. 

JavaScript Minifier : 

http://dean.edwards.name/packer/

 

Reference 

 

검색엔진최적화 – 웹페이지 로딩속도를 개선하는 5가지 방법 ::

https://seosem.kr/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%94%A9%EC%86%8D%EB%8F%84%EB%A5%BC-%EA%B0%9C%EC%84%A0-5%EA%B0%80%EC%A7%80/

외부 Javascript 파일 압축하기 :: https://blog.outsider.ne.kr/269

Nginx를 이용한 static 컨텐츠 서비스 :: https://www.joinc.co.kr/w/man/12/nginx/static

 

 

 

반응형
저작자표시 비영리 동일조건

'javascript,HTML,CSS' 카테고리의 다른 글

[javascript] HTML를 pdf로 변환하기 / how to render html to pdf  (0) 2020.02.20
[javascript] HTMS2Canvas를 이용하여 multiple-page PDF 만드는 방법  (1) 2020.02.20
[chart.js] Config example  (0) 2019.11.13
[js] ajax 호출 후 순서 섞이는것 해결하기 (동기식 처리)  (0) 2019.09.09
[jquery] "click" event 중복 호출  (0) 2019.08.02
'javascript,HTML,CSS' Related Articles more
Comments