워드프레스 속도 빠르게 만드는 방법

워드프레스 블로그를 운영하며 포스트의 숫자가 많아지고, 여러 플러그인을 설치하다 보면 사이트의 속도가 느려지곤 합니다. 조사에 따르면 로딩 속도는 SEO나 방문자의 전환율에 영향을 미친다고 합니다. 본 포스트에서는 직접 적용해 보고 워드프레스 속도가 빨라졌던 솔루션을 작성했습니다.



속도 측정 사이트

Google Lighthouse

  • 사이트의 속도뿐 아니라 접근성, 모범사례, SEO에 대한 점수를 보여줍니다.
  • 더 좋은 사이트를 만들기 위한 수정사항, 주의사항을 상세히 보여줍니다.

Pingdom

  • 테스트한 페이지의 로딩 시간, 페이지 크기, 요청 수를 보여줍니다.
  • 특히 페이지 크기는 이미지가 비교적 많은 페이지가 느릴 때 이미지 개수를 줄일지, 사이즈를 바꿀지 결정하는 데 도움이 됩니다.
  • 런던, 도쿄, 샌프란시스코 등 테스트할 서버의 위치를 정해 해외에서 사이트에 접속 시 걸리는 시간을 확인할 수 있습니다.



이미지 관리

이미지 플러그인

이미지 플러그인은 아래 ‘리사이즈’와 ‘용량 줄이기’, ‘지연로딩’을 자동으로 해줍니다. 전 무료 플러그인인 Smush를 사용하고 있습니다. Smush의 옵션 설정 방법은 ‘ ‘을 참고해 주세요.

리사이즈

이 블로그는 반응형으로 데스크탑, 태블릿, 모바일 등 화면 크기에 따라 보이는 넓이가 달라집니다. 그런데 가장 큰 디바이스의 넓이가 900px인데 이미지 사이즈가 1500*1500이라면 의미가 있을까요? 사이즈가 커지면 파일의 용량이 커지고 로딩 속도에도 영향을 미치게 됩니다.

그렇기 때문에 자신의 사이트에 적합한 사이즈로 줄이는 것이 중요합니다. 하지만 워드프레스는 직접 하지 않아도 썸네일(150*), 중간(300*), 큰(1024*) 크기로 자동 리사이즈해 줍니다. 해당 설정은 대시보드 > 설정 > 미디어에서 조절할 수 있습니다. Smush 플러그인은 추가로 768*, 1536*, 2048*로 리사이즈해 주는데 이 사이즈가 필요 없다면 비활성화하는 것이 좋습니다.

용량 줄이기

같은 사이즈라도 메타데이터와 압축률에 따라 2배 이상 차이가 날 수 있습니다. 메타데이터는 이미지를 찍은 위치, 날짜 등이 들어간 데이터입니다. 전 따로 없애지 않고 Smush에서 자동으로 제거하는 옵션을 활성화해 두고 있습니다.

이미지 압축의 경우 최대한 화질 저하 없이 용량을 줄이는 방법을 사용하고 있습니다. Smush에서 자동으로 압축해 주지만 tinyPNG라는 사이트로 업로드 전 미리 압축 후 올리고 있습니다. (워드프레스에는 tinyPNG 플러그인이 있지만, 업데이트가 안 되고 있어 사용하지 않습니다.)

지연로딩

지연로딩이란 한 번에 페이지의 모든 이미지를 로딩하는 것이 아닌 이미지가 있는 위치에 도달했을 때 로딩하는 기술입니다. 처음에 이미지를 모두 띄우려 하면 느려지기도 하고, 중간에 페이지에서 나가기도 하므로 자원과 데이터를 아낄 수 있는 기술입니다.

확장자

사실 위 3가지만 적용해도 충분해서 전 확장자를 따로 변경하지 않습니다. 그래도 확장자 별로 특징이 다르기 때문에 알아두는 것도 좋습니다.

  • PNG – 무손실 이미지로 비교적 용량이 크지만, 화질이 좋고 이미지에 투명 처리가 가능합니다
  • JPG – 손실 이미지로 비교적 용량이 적지만 화질이 나빠집니다.
  • GIF – 움짤 같은 움직이는 이미지가 가능하지만, 용량이 매우 큼. (차라리 영상을 올리는 게 화질과 용량 감소에 좋습니다.)



캐시(Cache) 플러그인

캐싱을 교실에 비교해 보겠습니다. [선생님은 새로운 문제를 내고] > [학생들은 계산하며] > [답을 발표]합니다. 그 후 선생님이 같은 문제를 내게 되면 이미 답을 알기 때문에 계산 과정이 필요 없게 되죠. 즉 사이트를 재방문하는 등 행위 시 이미 저장된 데이터로 빠르게 로드해주는 것입니다.

워드프레스의 속도를 높이는 방법은 브라우저 캐싱, 페이지 캐싱, 데이터베이스 캐싱, CND, 리소스 축소 등이 있는데 대부분 플러그인으로 쉽게 적용할 수 있습니다. ‘유료’ 또는 ‘무료’, ‘원 클릭 설정’ 또는 ‘커스텀 설정’, 테마와 적합성, 지원하는 캐싱 방법 등을 고려해 사이트에 맞는 캐시 플러그인을 선택하면 됩니다.

제가 사용하는 플러그인 W3 Total Cache의 설치 후 권한 설정과 옵션 설정은 ‘ ‘을 참고해 주세요. 캐싱에 대한 자세한 설명은 ‘The Ultimate Guide to WordPress Caching‘을 참고해 주세요.



필요 없는 플러그인 삭제

워드프레스를 처음 설치한 후 Lighthouse를 테스트하면 거의 100점에 가까운 점수가 나옵니다. 하지만 필요한 기능의 플러그인을 설치하다 보면 점수가 점점 떨어지는 것을 볼 수 있습니다. 사이트에 맞는지 테스트하기 위해 설치했던 불필요한 플러그인을 삭제해 워드프레스 속도를 높일 수 있습니다.



외부요소

사이트의 방문자 데이터를 수집하는 구글 애널리틱스, 광고 이익을 얻을 수 있는 애드센스, 유튜브의 영상이나 네이버 지도를 가져오는 embed 같은 외부요소는 속도에 매우 큰 영향을 줍니다. 하지만 데이터 분석이나 포스팅의 완성도를 높이는데 필수 불가결한 부분이어서 속도 저하를 감수하고 있습니다.



서버 성능 업그레이드

전 AWS Lightsail의 가장 기본 요금제를 사용하고 있습니다. 요금제에 따라 서버의 메모리와 프로세서가 차이 나기 때문에 서버를 업그레이드해 워드프레스 속도를 높일 수 있습니다.



참조 사이트

관련글

guest
0 Comments
Inline Feedbacks
모든 댓글 보기