티스토리 블로그 :: 웹 페이지 로딩속도 최적화하기

최적화 Optimization

본 블로그가 느려진 것 같아서 최적화를 진행하려던 차에 함께 공유해보고자 포스팅 해본다.

 

 

저 마다의 블로그 방문 목적은 다르겠지만, 가장 큰 목적 중 하나는 정보를 얻기위함일 것이다.

즐겨찾기나 주소를 직접 입력해 방문하는 경우보다 키워드 검색에 따른 유입 비중이 높다는 것이 그 근거라고 할 수 있다.

 

즉, 사용자 입장에서는 필요한 정보만 수집하고 이탈하는 것이 데이터와 시간을 위해 중요하다.

 

물론 제공자 입장에서는 최대한 오래 붙잡아두는 것이 중요한 이슈가 될 수 있으나,

웹 페이지 로딩 속도를 굳이 지연시켜 오래 머물게하는 건 의미가 없다.

 

그러니 몇 가지 최적화 방법에 대해 살펴보자.

 

 

---

~ 광고 타임 ~

---

 

 

첫째, 외부 참조링크의 최소화

 

웹 페이지나 블로그를 운영하다보면 좋아보이는 건 가져와서 붙이다보니 둔해질 수 있다.

대표적인 예가 CDN 서비스와 같은 코드 활용이다.

 

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

이는 jQuery의 CDN 주소인데, 서버에 요청해서 해당 스크립트파일을 가져오겠다는 의미다.

 

비유를 통해 과정을 보면, 우리 집에서 옆 집까지 건너가 자료를 빌려 우리 집으로 다시 돌아오는 행위다.

이렇게 작업이 많아지니 당연히 페이지 로딩속도는 지연될 수 밖에 없다.

 

간단한 해결방법은 해당 자료를 미리 집에 비치해두면 된다.

즉, 해당 파일을 미리 다운받아 업로드해두어 연결해주면 해결된다.

<script src="./images/jquery.min.js"></script>

티스토리는 파일을 업로드하면 images 폴더 안에 모이게 되므로, 위와 같이 절대경로로 지정해주면 해결된다.

 

이러한 방식의 또 다른 장점은 링크가 깨지더라도 기존 운영에 영향받지 않는다는 점이다.

 

참고로 대부분의 스크립트 파일들은 min 버전의 파일이 존재하는데,

보다 경량화하기 위해 개행이나 공백문자 같은 불필요한 문자를 제거한 파일이다.

때문에 기존 스크립트 파일보다 한결 가벼운 크기를 갖지만 가독성은 떨어진다.

 

 

 

 

둘째, 크롬 개발자도구를 활용한 진단 및 처방

 

사실 익스플로러에도 개발자도구가 존재하지만, 익스플로러 자체가 무겁기때문에 사용을 권하고 싶지 않다.

그나마 국내에도 크롬 브라우저 사용 비중이 높아지는 추세이므로 크롬에 대한 설명을 하지 않고 바로 진행하겠다.

 

 

 

크롬 브라우저에서 최적화를 원하는 페이지로 이동 후, F12를 눌러 개발자도구를 실행하자.

 

 

 

그리고 이미지와 같이 Audits 탭으로 이동한다.

Audits 탭은 웹 페이지를 분석하고 문제점을 진단하여 처방해주는 기능을 제공해준다.

 

이동했다면 위와같이 검사할 항목과 방식을 체크하고 Run 버튼을 누르자.

 

 

 

 

 

위와같이 조금 기다리면 위와같이 적나라하게 결과를 볼 수 있다.

 

- Combine external CSS : CSS 문서 내 중복되어 나타나는 외부 도메인의 결합을 권하는 항목들을 표시해준다.

 중복된 도메인을 결합해준다면 좋지만 현실적으로 불가피한 경우가 있다. 때문에 살펴보고 참고정도만 해도 좋을 것 같다.

 

- Combine external JavaScript : 자바 스크립트 코드 내 중복되는 외부 도메인의 결합을 권하는 항목들을 표시해준다.

 마찬가지로 불가피한 경우가 다수로 생각되므로 참고정도만 하자.

 

- Enable gzip compression : 전송 데이터를 gzip으로 압축하여 전송할 경우 절약 가능한 데이터 크기를 표시해준다.

 티스토리는 해당 항목의 수정이 불가능하며 자체 압축이 존재하므로 간과해도 좋다.

 만약 외부 도메인을 통해 서비스를 제공중이라면 사용중인 서버에 따라 gzip 압축 코드를 추가해주면 된다.

 

- Leverage browser cashing : 사용빈도가 높은 정적인 자원들을 표시해준다.

 즉, 앞서 첫째 항목에 해당되는 요소들을 보여주면서 캐시 할당을 권해주는 것이다. 때문에 변동되지 않을 자원들은 중에서

 다운받을 수 있는 항목은 다운받은 후 파일 업로드를 통해 서버에 올려둘 수 있도록 하자.

 사실 이 또한 티스토리 서버 설정의 한계로 이 방법이 최선이다.

 

- Minimize cookie size : 쿠키의 크기를 최소화할 것을 권하는데, 여기서 말하는 쿠키는 오븐에서 갓구운 맛있는 쿠키가 아니라 인터넷 사용정보를 말한다.

 재방문시에는 사용자 정보를 저장해둔 쿠키파일을 이용함으로써 보다 빠르고 편리한 이용을 제공하는 용도다.

 

- Specify image dimensions : 이미지 크기 지정을 권하는 파일들을 보여준다.

 가로와 세로 길이 지정이 안되있을 경우 화면 표시속도에 영향을 주므로 크기 지정을 권해주는 것이니 가능한 항목은 지정해주도록 하자.

 

- Optimize the order of styles and scripts : 페이지 내 바람직하지 않은 위치에 삽인된 CSS, 스크립트를 보여준다.

 CSS를 head에 두어 먼저 그려지게하고, 스크립트 부분은 문서가 모두 출력된 뒤에 동작하게끔 문서 마지막 부분에 위치시키는게 좋다.

 

- Remove unused CSS rules : 사용되지 않는 스타일 정의들을 보여준다.

 하지만 실제로는 사용되고 있을 수 있다. 좌측 화살표(▶)버튼을 눌러서 상세보기를 통해 대략 훑어보고 제거할 항목을 찾아 제거해주자.

 여담이지만 공개 라이브러리를 몇 개 포함했더니 수가 많아 날 당황하게 만들었다. 이런 항목들은 수정작업을 통해 다이어트 시켜주도록 하자.

 

- Use normal CSS property names instead of vendor-prefixed ones : 브라우저별 호환 문제로 사용된 접두사를 일반코드로 대체가능한 항목들을 보여준다.

 예를들어 애플의 사파리는 -webkit-, 오페라는 -o- 등의 CSS 접두사에 대한 요소들을 말한다.

 

 

---

~ 광고 타임 ~

---

 

 

셋째, 불필요한 블로그 설정 해제하기

 

 

사용하지 않는 플러그인은 설정을 해제하자.

우측 톱니바퀴 아이콘을 통해 사용법과 용도를 확인할 수 있고 사용유무를 설정할 수 있다.

 

플러그인 뿐만 아니라 관리 페이지 내에서 여러 옵션들을 체크해보며 불필요한 항목은 모두 해제한다.

예) 글 설정, 화면 설정, 사이드바, 모바일 웹 스킨 유무, 등등 

 

 

---

~ 광고 타임 ~

---

 

 

마치며

 

사실 정리의 기본은 버리는 것이라고 한다.

웹 페이지를 정리함에 있어서 과감하게 버릴건 버리도록 하자.

 

물론, 백업은 항상 필수다.

페이지를 변경하기 전에 반드시 소스파일들을 미리 따로 저장해두어혹시모를 상황에 대비하도록 하자.

 

백업의 백업도 마련하자. 가끔 덮어쓰기로 날려먹는 경우가 있다.

 

 

 

끝.