바로 문의 : 010-2907-7622

웹사이트 속도 개선을 위한 PageSpeed Insights

웹사이트 속도 개선을 위한 PageSpeed Insights

구글에서 개발자를 위해 제공하는 "PageSpeed Insights"를 이용해서 웹사이트의 로딩 속도를 개선하는 방법을 알아보도록 하겠습니다.

구글 PageSpeed Insights로 접속하면 운영중인 웹페이지 속도를 체크할 수 있으며, 개선해야할 항목들을 확인 할 수 있습니다. 아래 이미지는 컴러버 사이트를 분석한 결과 입니다. 레이아웃 및 외부 라이브러리 사용으로 인하여 일부 최적화가 되지 않았지만, 모바일 82/100, 데스크톱 92/100이라는 점수를 받았습니다.

결과 화면에 나온 항목들을 보면서 PageSpeed Insights에서 체크하고 있는 것들을 하나씩 보도록하겠습니다.




★ 스크롤 없이 볼 수 있는 콘턴츠에서 렌더링 차단 자바스크립트 및 CSS 삭제

페이지에 차단 CSS 리소스가 x개 있습니다. 따라서 페이지 렌더링이 지연됩니다.

HTML 상단 헤더에 선언된 CSS, Javascript 링크를 하단으로 옮겨줍니다. 단, CSS를 하단으로 옮기는 경우 페이지가 처음 로딩될 때 레이아웃이 제대로 보이지 않다가 후반에 정상적으로 보이는 문제가 발생할 수 있습니다.


★ 이미지 최적화

이미지의 형식을 적절하게 지정하고 압축하면 데이터 용량을 크게 줄일 수 있습니다.

화면에 보여지는 이미지 사이즈와(가로x세로) 실제 사이즈가 거의 동일하도록 만들어야 합니다.

많은 블로그, 커뮤니티 솔루션에서 사용하는 썸네일 이미지가 실제 화면에 보여지는 사이즈와 달라서 최적화 시키기 어려운 항목중 하나입니다.

※ 적절한 이미지 형식을 지정하는 것만으로도 이미지 용량을 크게 줄일 수 있는데 웹사이트 이미지 용량 최적화 간단 팁 포스팅을 참고하시기 바랍니다.


★ 브라우저 캐싱 활용

정적 리소스에 대한 HTTP 헤더에 만료일 또는 최대 수명을 설정하면 브라우저가 이전에 다운로드된 리소스를 네트워크를 통해서가 아닌 로컬 디스크로부터 로드합니다.

.htaccess 파일을 수정하는 것으로 간단하게 설정이 가능합니다. 단, 사용중인 웹서버에서 mod_expires 모듈이 로딩되어 있어야 합니다. phpInfo() 함수를 통해 현재 로딩되어 있는 아파치 모듈 확인이 가능합니다.

아래는 샘플로 가장 기본적인 마임타입만을 넣은 것입니다.

ExpiresActive on

ExpiresDefault"access plus 1 hour"

ExpiresByType text/css"access plus 1 month"

ExpiresByType text/javascript"access plus 1 month"

ExpiresByType application/javascript"access plus 1 month"

ExpiresByType image/gif"access plus 1 month"

ExpiresByType image/png"access plus 1 month"

ExpiresByType image/jpg"access plus 1 month"

ExpiresByType image/jpeg"access plus 1 month"


★ CSS 축소

CSS 코드를 압축하면 데이터 용량을 크게 줄여 다운로드 및 파싱 속도를 높일 수 있습니다.

CSS 파일의 불필요한 공백을 정리함으로써 용량을 줄일 수 있습니다. 서버에 Minify 라이브러리 설치 또는 온라인 Minify 툴을 이용할 수 있습니다.

※ 설치형 PHP 라이브러리 (https://github.com/mrclay/minify)

※ 온라인 툴 (https://cssminifier.com)


★ HTML 축소

HTML 코드(본문 자바스크립트 및 그 안에 포함된 CSS 포함)를 압축하면 데이터 용량을 크게 줄여 다운로드 및 파싱 속도를 높일 수 있습니다.

HTML 코드내의 주석을 지워주는 정도로 충분합니다.


★ 방문 페이지 리디렉션 사용 안함

페이지에 리디렉션이 x개 있습니다. 리디렉션은 페이지가 로드되기 전 지연 시간을 추가로 유발할 수 있습니다.

모바일 페이지가 따로 있거나 다국어를 지원하는 사이트의 경우 리디렉션을 주로 사용합니다. 꼭 필요한 경우라면 사용해도 무방합니다.


★ 서버 응답 시간 단축

Google 테스트에서 서버가 x초 후에 응답했습니다. 서버 응답 시간이 느려지는 요인은 여러 가지가 있습니다. 서버가 가장 많은 시간을 소요하는 위치를 모니터링하고 측정하는 방법에 대한 자세한 내용은 Google의 권장사항을 참조하세요.

웹서버에서 너무 많은 데이터 처리를 하고 있거나, 웹서버 환경이 느릴 가능성이 있습니다. 서버 관리자와 상의가 필요한 부분입니다.


★ 압축 사용

gzip 또는 deflate로 리소스를 압축하면 네트워크를 통해 전송되는 용량을 줄일 수 있습니다.

.htaccess 파일을 수정하는 것으로 간단하게 설정이 가능합니다. 단, 사용중인 웹서버에서 mod_deflate 모듈이 로딩되어 있어야 합니다. phpInfo() 함수를 통해 현재 로딩되어 있는 아파치 모듈 확인이 가능합니다.

아래는 샘플로 가장 기본적인 마임타입만을 넣은 것입니다.

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/javascript


★ 자바스크립트 축소

자바스크립트 코드를 압축하면 데이터 용량을 크게 줄여 다운로드 및 파싱 속도를 높일 수 있습니다.

Javascript 파일의 불필요한 공백 및 변수명을 정리함으로써 용량을 줄일 수 있습니다. 서버에 Minify 라이브러리 설치 또는 온라인 Minify 툴을 이용할 수 있습니다.

※ 설치형 PHP 라이브러리 (https://github.com/mrclay/minify)

※ 온라인 툴 (https://javascript-minifier.com)


이상 웹사이트 속도 개선을 위한 몇가지 방법들을 알아보았습니다.

제 경험으로 말씀드리면 개선 전과 후의 속도 차이를 확인해보면 수치상으로 거의 2배 정도 차이가 나며, 실제로 인터넷이 느린 환경에서는 속도가 개선된 것을 체감할 수 있었습니다.

홈페이지 로딩 속도가 느리다면 위의 항목들을 보며 사이트를 점검해 보시기 바랍니다.

댓글 달기

   

컴러버 로고

 

  • 전화

    010-2907-7622

  • 카카오톡

    hshmac / webejoa

  • 주소

    서울 마포구 새창로 11, 1314호 / 더디렉터

  • 본 사이트는 웹이조아에서 정보 공유를 위해 제작 및 운영하고 있습니다