블로그나 홈페이지를 어느 정도 운영하다 보면 반드시 개선을 생각하게 되는 것이 바로 페이지 속도입니다.
속도가 느리면 방문자의 이탈율도 문제이지만 검색 우선순위에도 악영향을 주기 때문입니다. 이 번 글에서는 어떻게 하면 페이지 로딩 속도를 개선할 수 있는지, 실용적인 방법에 대해 자세히 알아보도록 하겠습니다.
블로그 속도 측정
블로그나 홈페이지를 운영하는 분들이면 누구나 최소한 몇 번은 페이지 로딩 속도를 측정하게 됩니다.
페이지 속도를 측정할 수 있는 사이트나 도구들은 다양하게 있지만 가장 편리하면서도 신뢰성 있는 방법은 단연 구글의 페이지스피드 인사이트(PageSpeed Insights)를 활용하는 것입니다.
매우 유사한 기능인 크롬 개발자 도구의 라이트하우스(LightHouse)도 있지만 해당 페이지에서 F12를 누른 후 몇 가지 작업을 더 해야 하는 번거로움이 있으며 다른 서비스 사이트는 회원가입 등의 불편함이 있고 측정 결과도 미흡하거나 신뢰도가 낮습니다.
반면 페이지스피드 인사이트는사이트에서 해당 페이지의 주소만 입력하면 되며 속도뿐만 아니라 SEO 등 추가 개선 사항들도 자세히 알려줍니다.
구글의 페이지스피드 인사이트로 이동한 한 후 속도를 측정하고자 하는 블로그나 홈페이지 주소를 상단의 빈칸에 입력하고 오른쪽의 '분석' 버튼을 클릭하면 아래 그림과 같이 측정된 속도 '성능' 화면이 나타납니다.
첫 번째 콘텐츠가 나타나는 데에 걸리는 시간에서 속도 지수까지 몇 개의 측정값에 비중을 할당하여 100점 만점 기준으로 속도 성능을 표시합니다.
위의 측정 결과는 휴대전화 기준 25점으로 개선이 필요한 상황입니다.데스크톱에서는 로딩 속도가 매우 빨라 특별한 문제가 없다면 대부분 90점 이상의 양호한 속도 성능 점수가 나옵니다.
문제는휴대전화로 블로그나 홈페이지를 열 때를 훨씬 더 속도가 느리다는 것입니다. 더욱이 모바일 시대에 맞게 방문자의 약 70%가 휴대 기기로 각 사이트를 방문을 하기 때문에 휴대전화에서의 페이지 속도 개선이 가장 중요한 것입니다.
측정 결과 페이지 아래쪽에는 렌더링 차단 리소스 제거하기, 사용하지 않는 자바스크립트 줄이기 등 다양한 속도 개선 방법을 제시하고 있지만 전문성이 높아 이해하기 어렵고 또 서버 관리자가 아니라면 변경 권한이 없는 경우가 대부분입니다.
따라서 실질적이고 실용적인 속도 개선 방법은 아래에 기술한 내용을 참조하시기 바랍니다.
실용적인 페이지 속도 개선 방법
자바스크립트 실행 개선
자바스크립트는 여러 가지 다양한 기능을 페이지에 구현할 수 있는 편리한 도구이지만 페이지 속도에는 악영향을 줍니다.
블로그 플랫폼이나 홈페이지 자체에서 이미 구동되는 자바스크립도 상당히 많기 때문에 필수적인 자바스크립트가 아니면 되도록 사용하지 않도록 하고 기존 스크립트도 확인 후 삭제하는 것이 좋습니다.
불가피하게 사용해야 할 자바스크립트에는 'async'와 'defer'를 사용하여 페이지가 랜더링 될 때 방해가 되지 않도록 할 수 있습니다.
스크립트 태그 안에 'async'와 'defer'를 넣으면HTML 파싱과 자바스크립트 다운로드가 동시에 진행되어 HTML 랜더링 차단이 되지 않습니다.
특히 defer의 경우에는 이후 단계인 자바스크립트의 실행까지도 HTML 파싱이 모두 완료된 후맨 나중에 실행되므로 자바스크립트에 의한 랜더링 지연이 없게 됩니다.
반면 async는 자바스크립트가 실행되는 시간만큼은 HTML 파싱이 중단되어 그만큼 HTML 랜더링 지연이 발생합니다. 세부 코드는 아래 내용을 참조하시기 바랍니다.
<script src="need1.js" async ></script> ← 자바스크립트 실행되는 시간 만큼 랜더링 지연
<script src="need2.js" defer ></script> ← HTML 랜더링 차단 없음HTML 파일과 CSS 파일 개선
HTML 문서의 스타일(색상, 폰트, 레이아웃, 애니메이션 등)을 규정하는 CSS 파일은 대부분 확장자가 .css인 파일로 용량이 상당하기 때문에 이것을 로딩할 때의 속도 저하 영향도 무시할 수 없습니다.
따라서 페이지에 표시되지 않는 불필요한 Class나 id, 항목들에 해당하는 스타일을 삭제하고 빈행, 공백, 여백을 줄이는 것이 속도 개선에 도움이 됩니다.
CSS 파일의 불필요한 내용은 크롬 개발자 도구인 DevTool을 활용하여 페이지 표시되는 각 항목과 스타일 속성을 맞추어 보면 어느 정도 찾아낼 수 있으며 고급 툴인 'Coverage' 기능을 활용하여 조금 더 전문적으로 불필요한 CSS 내용을 찾아 삭제할 수도 있습니다.
마찬가지로 .html 파일도 빈행, 공백, 여백은 물론이고 사용하지 않는 태그를 찾아서 삭제하는 것이 좋습니다.
전문적으로 HTML이나 CSS 파일을 압축하고 최적화하여 로딩 속도를 개선하는 서비스를 하는 '압축 사이트'를 검색하여 활용하는 것도 방법 중에 하나입니다.
이미지 압축
고화질 이미지는 보기에는 좋지만 고용량 파일이므로 페이지 로딩 시에 엄청난 부하가 발생합니다.
따라서 정말 불가피한 경우가 아니라면 이미지보다는 텍스트 위주의 웹페이지를 구성하는 것이 속도 측면에서는 가장 유리합니다. 하지만 내용 상으로 꼭 이미지가 필요한 경우에는 이미지 수를 최소화하고 압축하여 전체 용량을 줄여야 합니다.
직접 이미지 편집기를 사용하여 원본 이미지의 크기를 줄이고 픽셀 크기나 압축비를 조정하여 되도록 용량이 적은 포맷의 이미지로 변환하여 사용하는 것이 좋습니다.
압축률이 좋은 대표적인 이미지 포맷으로 webp가 있는데 무료로 고용량 파일을 webp 등 저용량 압축 파일로 변환해 주는 서비스 사이트도 있으니 잘 활용하시기 바랍니다.이렇게 하면 메가바이트의 수준의 이미지가 킬로바이트 수준의 이미지가 되어 거의 1/1000 크기로 변환됩니다.
이미지가 페이지 속도에 미치는 영향을 줄일 수 있는 또 다른 방법은 HTML <img> 태그에 loading="lazy" 속성을 추가하여 화면에 보이는 이미지들만 우선 다운로드하고 화면 밖에 있는 이미지들은 다운로드를 지연시켜 초기 부하를 줄이는 방법입니다.
세부 코드는 아래를 참조하시기 바랍니다.
<img loading="lazy" src="abcdef.jpg">기타 방법
'preconnect', 'preload', 'as'를 사용하여필요 사이트를 미리 준비한 상태에서 연결하여 속도를 개선하는 방법도 있습니다.세부 코드는 아래 내용을 참조하시기 바랍니다.
<link rel="preconnect" as="script" href="abc.js">
<link rel="preload" as="style" href="efg.css" >재방문 시에 기존의 다운로드한 자료를 활용하도록 웹브라우저의 유효 캐시(cache)를 길게 설정하는 방법도 페이지 로딩 속도에 다소 도움이 됩니다.세부 코드는 아래 내용을 참조하시기 바랍니다.
<meta http-equiv="Cache-Control" content="public, max-age=초단위숫자, must-revalidate">
