워드프레스 TTFB 속도개선 성공 후기 - 첫페이지 로딩 느려짐 최적화

워드프레스를 사용하면서 TTFB 속도로 인해 SEO 및 속도에 대한 많은 지적이 있었고 Gzip이나 CSS, 자바스크립트에 대한 문제는 대부분 해결했는데 불구하고 TTFB는 매번 속도가 1초이상이 나오고 해결이 되지 않았습니다.


90	Avoid URL redirects
A100	Avoid empty src or href
A100	Put JavaScript at bottom
A100	Reduce the number of DOM elements
A100	Make favicon small and cacheable
A100	Avoid HTTP 404 (Not Found) error
A100	Remove duplicate JavaScript and CSS

TTFB는 (Time To First Byte 줄인말)로 즉 웹 서버의 반응성 을 측정하는 데 사용되는 매개 변수를 말하며 간단히 말해서 TTFB는 HTTP 클라이언트 요청과 첫 번째 웹 페이지 바이트 수신 사이의 시간이며 이 페이지 구글 페이지 속도측정 및Gtmetrix 등에서 높은 속도를 내기 위해서는 이 첫페이지 로딩속도를 개선해야 합니다.

워드프레스 로딩속도 빠르게 설정방법 7가지

그리고 이를 개선하기 위해 가장 많은 사람들이 언급하는 내용은 아래 7가지가 있습니다.

빠른 웹호스팅 변경
네트워크 CDN 콘텐츠 전송사용
무거운 플러그인 최소화
데이터베이스 및 쿼리 최적화
HTTP 요청 수 줄이기
RFPL (Respond First, Process Later)캐시 사용
페이지 CLS (Cumulative Layout Shift) 최소화

우선 당연하게도 워드프레스를 사용하는 경우 공유호스팅 및 개인 VPS 서버에 따른 호스팅 속도에 따라 워드프레스 속도가 크게 달라집니다.

워드프레스 공유호스팅 vs VPS 속도비교

하지만 4년간 사용해보면서 느낀점은 빠른 웹호스팅보다 잘못된 워드프레스 설정으로 인한 속도가 느려진다는 점으로 카페24등에서 가장저렴한 요금제를 사용해 트래픽이 쉽게 소진되는게 아니라면 해외 웹호스팅인 블루호스트 공유호스팅 버전에서도 속도측정 시 A점 90점 이상을 받을 수 있다는걸 터득했기 때문에 이부분은 우선 나중으로 넘어가며 대략적인 항목은 아래 참고하세요

우선순위	내용
높은	초기 서버 응답 시간 단축 FCP LCP
높은	렌더링 차단 리소스 제거 FCP LCP
중간 낮음	콘텐츠 전송 네트워크(CDN) 사용
중간 낮음	모든 리소스에 HTTP/2 사용
낮은	긴 메인 스레드 작업 피하기 미정
낮은	중요한 요청 연결 방지 FCP LCP
낮은	수동 리스너를 사용하여 스크롤 성능 향상
낮은	대규모 레이아웃 변경 방지 CLS
낮은	JavaScript 실행 시간 단축 미정
낮은	사용하지 않는 CSS 줄이기 FCP LCP
낮은	최신 브라우저에 레거시 JavaScript 제공 방지 미정
낮은	과도한 DOM 크기 방지 미정
낮은	막대한 네트워크 페이로드 방지 LCP
낮은	적절한 크기의 이미지
낮은	효율적인 캐시 정책으로 정적 자산 제공
낮은	여러 페이지 리디렉션 방지 FCP LCP
낮은	차세대 형식으로 이미지 제공
낮은	오프스크린 이미지 연기
낮은	CSS 축소 FCP LCP
낮은	사용하지 않는 JavaScript 줄이기 LCP
해당 없음	가장 큰 콘텐츠가 있는 페인트 요소 LCP
해당 없음	메인 스레드 작업 최소화 미정
해당 없음	타사 코드의 영향 감소 미정
해당 없음	사용자 타이밍 표시 및 측정

우선 트래픽이 많고 트래픽으로 인한 속도가 시간대별로 저하가 있다면 VPS로 넘어가느게 맞지만 트래픽이 몰리는 시간대가 아니거나 트래픽이 몰리지 않았음에도 느리다면 마냥 VPS로 호스팅을 업그레이드 하느것은 고민해 볼 필요가 있습니다.

네트워크 CDN 활용하기

네트워크 CDN은 클라우드 플라워나 WP-Rocket 등을 통해 전달할 데이터를 네트워크 서버를 통해 보내기 때문에 트래픽을 절약하고 로딩속도를 개선할 수 있습니다.

CDN 장점	설명
더 빠른 로딩 시간	CDN은 사용자와 가장 가까운 서버에서 콘텐츠를 제공하기 때문에 로딩 속도가 향상됩니다. 사용자가 요청한 콘텐츠가 CDN 서버에 이미 캐시되어 있다면 웹사이트 로딩 시간이 크게 단축될 수 있습니다.
트래픽 감소	CDN은 콘텐츠를 여러 서버에 분산 저장하므로 웹사이트의 트래픽이 분산됩니다. 이로 인해 웹 서버의 부하가 감소하고 대역폭 사용량이 줄어듭니다.
지역별 성능 향상	CDN은 전 세계에 서버를 배치하여 사용자의 지리적 위치에 가장 가까운 서버에서 콘텐츠를 제공합니다. 따라서 사용자의 지역에 따른 성능 향상이 있습니다.
고가용성 및 내결함성	CDN은 여러 서버에 콘텐츠를 복제하여 내결함성을 제공합니다. 특정 서버에 장애가 발생하더라도 다른 서버에서 콘텐츠를 제공하여 웹사이트의 가용성을 높여줍니다.
대역폭 최적화	CDN은 콘텐츠를 압축하고 최적화하여 대역폭 사용을 최소화합니다. 이를 통해 트래픽 비용을 절감할 수 있습니다.

CDN을 사용하면 위와 같은 이점이 있습니다.

실제로 cloudflare와 wp-rocket 2개를 모두 사용해본 결과 WP-Rocket을 통한 홈페이지 속도개선은 크게 개선되었고 여기에 추가로 CloudFlare를 사용시 실제로 1~2%의 속도개선만 있었기 때문에 실제로 속도개선까진 기대할 수 없었습니다.

하지만 여기서 큰 장점은 트래픽을 절반 가까이 절약했기 때문에 이점에서는 CDN를 사용하느것을 권장하며 유료의 경우 1달에 1만 2천원정도에 로켓 CDN을 사용하는것도 고민해 볼 수 있는데 아쉬운 점은 1번 결제당 1개사이트만 가능하기 때문에 여러사이트를 사용한다면 가격대비 추천하기 어렵습니다.

무거운 플러그인 최소화

가장 많이 듣는 부분이고 쉽게 해결하지 못하느게 플러그인을 사용하지 않아야 한다느것은 알지만 무거운 대표적인 플러그인인 "Jetpack"과 Google SiteKit 등을 꼭 사용하고 싶다는 점입니다. 다양한 분석과 멀웨어 무차별 트래픽등을 차단하고 SNS 자동공유와 SEO 특화된 기능등 한번 설치하면 다양한 기능을 사용할 수 있다는 점입니다.

그래서 저도 지금까지 무거운 플러그인을 해제하느것을 쉽게 하지 못했는데 이번에 워드프레스 마이그레이션을 하면서 무거운 플러그인을 잠시 비활성화를 했는데 당시에 불편해도 어쩔수 없었지만 해당기간동안 애드센스 광고수익도 증가하고 홈페이지 속도도 매우 개선되면서 TTFB 속도가 개선된 계기가 되어 현재는 이러한 무거운 플러그인을 사용하지 않게 되었습니다.

데이터베이스 및 CSS, 자바스크립트 최소화

워드프레스 최적화할 수 있는 다양한 유료 무료 플러그인이 있고 워드프레스는 어떠한 설정이냐에 따라 속도가 크게 차이가 납니다.

URL 리디렉션 피하기
DNS 조회수 줄이기
HTTP 요청 줄이기
Gzip 구성요소 압축
Expries 헤더 추가
쿠기 없는 도메인 사용

아무리 좋은 속도개선 기능이라고 하더라도 설정값이 잘못되거나 중복된 플러그인으로 충돌 시 엄청나게 속도가 느려지기 때문에 플러그인을 최소화하고 중복된 기능을 사용하지 않느것이 좋습니다.

HTTP 및 CLS 최소화

워드레스 속도측정 시 TTFB는 여러 페이지 중 전면페이지만을 의미하기 때문에 어려가지 고민을 할 필요가 없다느걸 알았습니다.

그것은 바로 전면페이지에 애드센스 광고를 제거하는것입니다.

어차피 웹페이지 접속 시 네이버 검색페이지나 구글 같은 홈페이지가 아니기 때문에 전면페이지 접속 후 하위 카테고리로 들어갈 일이 많지 않기 때문에 메인페이지에는 웹사이트 속도를 저하하는 애드센스 광고를 설정할 필요가 없다고 생각합니다.

Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
First Contentful Paint (FCP)
Interaction to Next Paint (INP)
Time to First Byte (TTFB)

추가로 이미지 최적화를 통해 압축작업을 할 때 전면에 사용되는 이미지는 별도로 JPG에서 Webp 이미지로 변경하느것을 추천하며 대표이미지 또한 필요없다면 비활성화하거나 대표이미지 이미지 크기 또한 신경써주느것이 좋으며 무손실 PNG 이미지등은 티스토리 등에서도 사용 시 피하느것이 좋습니다.

이것으로 웹페이지 속도측정 시 TTFB 속도에서 이미지 로딩속도를 크게 개선되며 RFPL 캐시응 사용해 이전에 사용된 응답캐시를 즉시 사용할 수 있도록 하며 동시에 백그라운드에서 요청을 처리하는것도 좋습니다.

저작자표시 비영리 변경금지

워드프레스 TTFB 속도개선 성공 후기 - 첫페이지 로딩 느려짐 최적화