구글 연구 자료에 따르면 웹 로딩 시간이 3초가 넘어갈 시 32%, 5초가 넘어갈 시 90% 더 많은 이탈률이 발생한다고 합니다. 긴 로딩 시간은 들어온 사람에게 짜증을 유발하며 바로 뒤로 가기를 누를 확률이 높습니다. 그렇기 때문에 WP Rocket 플러그인으로 속도 지연 요소를 제거할 필요가 있습니다.
WP Rocket 플러그인 다운 및 설치
WP Rocket 플러그인 가격입니다. 1개의 웹사이트는 연 59 달러 3개는 119 달러 무제한은 299 달러 입니다. 한 개의 사이트만 한다면 하나만 구입 후에 추후에 더 필요하면 구매하시는 것을 추천드립니다. 어차피 차액만 내면 되기 때문에 굳이 급하게 무제한이나 3개를 구입할 필요가 없다고 생각합니다.
WP Rocket 웹사이트에 들어가셔서 구매하시면 메일이 한통 오실 것입니다. 메일에서 다운로드 링크를 찾아서 클릭한 다음 zip 파일을 다운로드하시고 워드프레스 사이트로 가셔서 플러그인
-> 새로 추가 -> 플러그인 업로드 후 다운로드한 zip 파일을 드래그하시고 설치하시면 됩니다.
WP Rocket 세팅
플러그인에 들어가셔서 설치한 플러그인 Settings에 들어갑니다.
캐시
캐싱이란 반복해서 접근해야 하는 경우에 빠르게 이용하기 위해서 가까운 곳에 저장하는 것입니다. 한번 접속한 웹 사이트에서 다시 접속할 때 브라우저 캐시에 저장해 놓으면 불러오는 시간이 줄어들기 때문에 속도가 빨라지는 원리입니다.
모바일 캐시 활성화와 모바일 장치용 캐시 파일 분리 모두 체크를 합니다.
파일 최적화
CSS 파일 축소 및 결합 또한 CSS 코드를 압축 또는 축소하여 사이트 크기가 작아지고 속도를 빨라지게 합니다.
우리가 여러 웹 페이지를 접속할 때 웹페이지는 미리 만들어진 것을 가져오는 것이 아니라 실시간으로 그려냅니다. CSS 파일의 코드가 최적화된 방법으로 전달되지 않으면 웹사이트 속도가 느려질 수 있기 때문에 CSS 전달 최적화를 해서 웹페이지를 빠르게 해야 합니다.
자바 스크립트에 있는 불필요한 공백과 주석을 제거하여 JS 파일을 줄이고 또한 Javascripts 정보를 더 작은 수의 파일로 결합하여 http 요청을 줄입니다.
하지만 자바스크립트 실행 지연에 구글 애드센스를 포함시켰다면 애드센스 광고가 늦게 나오거나 안 나올수 있기 때문에 꼭 포함시켜야 합니다.
미디어
Lazy Load란 내가 홈페이지를 열 때 안 보이는 부분의 이미지는 열리지 않게 했다가 스크롤을 아래로 내릴 때 이미지가 보이는 기술입니다. 해당 기술을 사용하면 스크롤을 내리지 않으면 아래에 있는 그림이 로드되지 않기 때문에 위에 있는 것들을 빨리 불러올 수 있습니다.
만약 이미지가 누락되었다면 너비와 높이 속성을 추가하여 미리 공간을 주는 것도 좋습니다. 이미지가 상황마다 크기가 변환된다면 그에 맞춰서 레이아웃도 변화하기 때문에 속도가 느려지고 또한 갑자기 화면이 움직이게 되므로 검색자에게도 안 좋은 영향을 미칩니다.
프리로드
콘서트 예매를 해 보거나 수강신청을 한 기억이 있었나요? 갑자기 많은 트래픽이 발생하게 되면 사이트가 다운되고 어느 순간 지나고 보면 다 마감되어 있는 것을 경험해 보셨을 겁니다. 웹사이트도 다른 곳으로 이동하거나 무언가를 내릴 때 로딩되는 시간이 필요합니다.
그래서 사전 로드를 해 놓으면 내가 스크롤을 내려놓지 않더라도 미리 다운을 받아 놓고 링크에 마우스를 올려놓았을 때 누르지 않아도 페이지를 미리 다운로드해 놓아서 지연 시간을 방지하는 기능입니다.
대한민국 인터넷 환경은 최강이라 이런 것들을 하지 않더라도 로딩되는데 시간이 적게 걸리며 네이버와 다음 또한 디자인을 위해서 무거운 코딩을 해 놓았습니다. 하지만 데이터를 다 쓰고 저속으로 데이터가 켜지거나 해외에 있는 사람들에게는 도움이 많이 되고 이탈률을 줄여 줄 것이라 생각합니다. 음식점이 아무리 맛있어도 줄이 길게 서 있고 대기시간이 길다면 기다리지 않는 사람이 많습니다. 웹사이트도 그런 의미에서 한 달에 6천 원 정도의 돈으로 이런 기능을 넣는 것은 좋다고 생각합니다. 그럼 이상으로 WP Rocket 플러그인 세팅에 대한 글을 마치도록 하겠습니다.