자바스크립트 압축해서 웹페이지 로딩속도 향상시키기

자바스크립트 압축해서 웹페이지 로딩속도 향상시키기

만약 현재 블로그나 홈페이지를 운영중이라면? 웹페이지 로딩속도의 중요성을 알아야 한다.

예를 하나 들어보자)

강남역 근처의 맛집 또는 카페를 찾는다고 하자.

'강남역 카페' 키워드로 검색 시 연관검색어로 

1차 적으로는 처음 가보는 장소이거나 정보가 없으면 아래와 같이 연관되는 검색어로 들어올 확률이 높다. 

'강남 분위기 좋은 카페', '바움커피 강남역', '수면카페', '가비터', '낮잠카페', '강남역 조용한 카페', 'our커피' 등이 나온다.

2차 적으로는 이제 그 장소의 평가를 봐야한다. (공간이며, 메뉴, 분위기, 가격, 위치)등이다.

가장 많이 보는 것이 블로그, 카페 일 것이다. 사람들의 의견, 반응 을 보기 위해서

3차 적으로는 접속하는 단계이다.

이때 화면이 안뜨고, 광고가 많이 나오거나, 페이지가 다운이 되버린다면 어떻게 되겠는가?

방문사용자는 짜증이 나, 사이트를 바로 빠져나올 것이다. 이때 이탈율 이라는 것이 증가하게 될 것이다.

웹페이지 로딩속도 는 이처럼 중요하다.

속도가 느리면 사람들이 사이트 나 블로그에 머무르지 않고 바로 떠난다.

아마 영업수단으로 한다면? 공식사이트가 이런일이 일어난다면 어떻겠는가?

장사 접어야 한다. 항상 최적화 시키고, 빠른 속도를 유지할 수 있도록 관리를 해야한다.

오늘은 웹페이지 로딩속도 향상에 약간의 도움을 줄 수 있는 자바스크립트 압축 하는 사이트 한 곳을 소개하겠다.

자바스크립트 압축해서 웹페이지 로딩속도 향상시키기

이름은 'javascriptcompressor 닷컴'이다

이름이 자 바 스 크 립 트 압 축 기 라 까먹지 않을 것 같다.

자바스크립트 압축해서 웹페이지 로딩속도 향상시키기

사이트에 접속하면 위 사진과 같은 화면이 나온다.

인터넷에서 자바스크립트를 압축할 수 있는 사이트가 몇 곳이 있지만, 이곳이 가장 일반적으로 사용하기에 무난하다.

주요 항목들을 보면

Base62 encode 와 그 옆에 Shrink variables 가 있는데 

이들 차이는? 압축방법에 있다.

Base62 encode는 Base62로 자바스크립트를 인코딩 한 것을 말한다.

Shrink variables는 function 으로 받게되는 인자값과 변수들을 [CODE.02]와 같은 짧은 변수로 변경을 해준다.

이 둘중 아무 체크를 하지 않고 Compress 를 클릭하면

Shrink variables 로 작동을 한다.

일반적인 블로그에서 자 바 압 축을 하려면 Shrink variables 를 선택 하고 돌리면 된다.

위 사진에 검정 박스를 친 부분을 테스트를 해볼 것인데

구글 애널리틱스의 자바코드이다.

<script> 와 끝나는 지점 </script> 사이를 복사하여 

아래에 사진처럼 입력란에 붙여넣기를 한다.

붙여넣기 후 Base62 encode 또는 Shrink variables 을 선택하거나 선택하지 않으면 후자의 것이 자동으로 적용되서 압 축 해준다.

자바스크립트 압축해서 웹페이지 로딩속도 향상시키기

동작을 시키면 위 사진과 같이 Decode 위에 Compression ratio : 367/394=0.931 로 압축비율(률)이 나온다.

이정도 줄어들었다는 것을 보여준다.

그럼 네이버의 글자수세기 를 이용해 어떻게 변했는지 한번 테스트 해보겠다.

위에는 애프터 이고, 아래는 비포 이다.

공백을 제외하고는 동일한 366byte 이다.

이둘의 차이를 알겠는가?

공백에 차이가 있다. 오리지널 파일은 388바이트 였는데 압축된 파일은 367바이트로 용량이 줄어든 것을 알 수있다.

아래는 Base62 encode 를 작동시켜봤다.

자바스크립트 압축해서 웹페이지 로딩속도 향상시키기

위 사진과 같은 형태로 변하는 것을 알수 있다.

용량도 -가 아니라 오히려 +가 되었다.

compression ratio: 787/394 =1.997

더 늘어난 것을 알 수 있다.

일반적으로 블로그에는 Base62 encode 를 사용하지 않고, Shrink variables 를 사용하시길 권한다.

이렇게 해서 압축된 파일을 티스토리 블로그 HTML/CSS 편집기에 원래 원본파일을 삭제하고 복사하여 붙여넣기한 후 저장을 누르면 된다.

시간이 지나면 웹페이지 로딩속도가 약간 더 향상된 것을 확인할 수 있다.

다음은 관련 글이다.

웹사이트 광고 수익을 위해 집에서 할수있는 부업

PDF 용량 줄이기 간단합니다

애드센스 광고 달기 쉬워요

지금까지 자바스크립트 압축해서 웹페이지 로딩속도 향상시키기 글이였다.