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

워드프레스 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 등에서 높은 속도를 내기 위해서는 이 첫페이지 로딩속도를 개선해야 합니다.

728x90

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

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

1. 빠른 웹호스팅 변경
2. 네트워크 CDN 콘텐츠 전송사용
3. 무거운 플러그인 최소화
4. 데이터베이스 및 쿼리 최적화
5. HTTP 요청 수 줄이기
6. RFPL (Respond First, Process Later)캐시 사용
7. 페이지 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 활용하기

WP-Rocket 워드프레스 최적화 유료 플러그인

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

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

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

CloudFlare 네트워크 트래픽 절약 및 캐쉬절감 그래프

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

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

• [IT 리뷰/블로그 SEO] - 워드프레스 CloudFlare "클라우드플레어"CDN HTTS GZIP 압축 로딩 속도개선
• [IT 리뷰/블로그 SEO] - 워드프레스 SEO 최적화 속도측정 및 페이지 크기 압축

무거운 플러그인 최소화

가장 많이 듣는 부분이고 쉽게 해결하지 못하느게 플러그인을 사용하지 않아야 한다느것은 알지만 무거운 대표적인 플러그인인 "Jetpack"과 Google SiteKit 등을 꼭 사용하고 싶다는 점입니다.

다양한 분석과 멀웨어 무차별 트래픽등을 차단하고 SNS 자동공유와 SEO 특화된 기능등 한번 설치하면 다양한 기능을 사용할 수 있다는 점입니다.

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

TTFB 개선 플러그인 추천

플러그인	기능	추천 설정값
WP Rocket	캐싱, CSS/JS 최적화, 미리 로딩, 이미지 최적화 등 종합 최적화 플러그인	1. 페이지 캐시 활성화 2. 최소화된 CSS/JS 파일 활성화 3. GZIP 압축 활성화 4. 브라우저 캐싱 활성화
W3 Total Cache	캐싱 및 CDN, 데이터베이스 최적화, 객체 캐시 등 다양한 최적화 기능	1. 페이지 캐시 활성화 2. 데이터베이스 캐시 활성화 3. CDN 활성화 4. 미니화(Minify) 활성화
Autoptimize	CSS, JavaScript, HTML 미니화 및 최적화	1. CSS 및 JavaScript 미니화 활성화 2. HTML 미니화 활성화 3. HTTP 요청 수 최소화
WP Super Cache	캐싱 및 속도 최적화	1. 페이지 캐시 활성화 2. 압축 설정 활성화 3. 캐시 TTL 설정 (1시간 이하 추천)
LiteSpeed Cache	서버 측 캐싱, 이미지 최적화, 데이터베이스 최적화, CSS/JS 최적화	1. 서버 캐시 활성화 2. 이미지 최적화 활성화 3. Lazy Load 활성화 4. Minify CSS/JS
Cloudflare	CDN 및 보안, 트래픽 최적화	1. Always Use HTTPS 활성화 2. Brotli 압축 활성화 3. 서버 위치 설정 (가장 가까운 서버 선택)
Smush	이미지 최적화 및 압축	1. 이미지 자동 최적화 활성화 2. WebP 이미지 형식 사용 3. Lazy Load 활성화
Perfmatters	다양한 사이트 성능 최적화, 불필요한 스크립트 비활성화	1. 불필요한 스크립트 및 스타일 비활성화 2. DNS 프리페칭 활성화 3. 오프스크린 이미지 비활성화
Query Monitor	데이터베이스 쿼리 성능 모니터링 및 최적화	1. 디버그 모드 활성화하여 쿼리 최적화 2. 비효율적인 쿼리 제거 및 캐싱 적용
Redis Object Cache	서버 캐시 및 객체 캐시 최적화	1. 객체 캐시 활성화 2. 캐시 TTL 설정 (짧은 시간대 추천)

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

워드프레스 속도가 느려지는 원인

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

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

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

HTTP 및 CLS 최소화

SEO 검사를 통한 인터넷 최적화 요소

워드레스 속도측정 시 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 이미지등은 티스토리 등에서도 사용 시 피하느것이 좋습니다.

• [IT 리뷰/블로그 SEO] - 워드프레스 SEO 최적화 속도측정 및 페이지 크기 압축
• [IT 리뷰/블로그 SEO] - 워드프레스 WEBP 이미지 변환 및 압축 플러그인 - Imagify

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

Q&A

Q1: TTFB란 무엇인가요?

TTFB(Time To First Byte)는 웹사이트의 로딩 속도와 관련된 중요한 지표로, 사용자가 웹사이트를 요청한 후 첫 번째 바이트가 사용자에게 전달될 때까지의 시간을 말합니다.

즉, 서버의 응답 시간이라고 볼 수 있으며, 이 시간이 길어지면 웹사이트 로딩 속도가 느려지게 됩니다. 웹사이트 성능을 최적화할 때 TTFB를 낮추는 것이 매우 중요합니다.

Q2: 워드프레스의 TTFB를 낮추려면 어떻게 해야 하나요?

워드프레스의 TTFB를 낮추려면 여러 방법을 사용할 수 있습니다.

첫째, 웹호스팅을 빠르고 안정적인 서버로 업그레이드하거나, CDN(Content Delivery Network)을 사용하여 데이터를 전 세계 서버에서 캐시하고 전달할 수 있습니다.

또한, 데이터베이스 최적화 및 플러그인 최적화, HTTP 요청 수 줄이기 등도 중요한 방법입니다. 워드프레스 사이트에서 TTFB가 1초 이상 걸린다면, 서버 응답 시간 자체가 개선되지 않는 문제를 해결해야 합니다.

Q3: CDN은 TTFB 개선에 어떤 영향을 미치나요?

CDN은 웹사이트의 콘텐츠를 여러 서버에 분산하여 저장하고, 사용자가 가장 가까운 서버에서 데이터를 받아볼 수 있게 하여 TTFB를 개선하는 데 큰 도움이 됩니다.

특히 전 세계 사용자들이 방문하는 웹사이트에서는 CDN을 사용하여 웹사이트 로딩 시간을 현저히 줄일 수 있습니다. CloudFlare와 같은 서비스는 트래픽을 절약하고, 고가용성을 제공하며, 로딩 속도를 개선할 수 있습니다.

Q4: 어떤 플러그인이 TTFB에 영향을 미치나요?

워드프레스에서는 플러그인이 TTFB에 큰 영향을 미칠 수 있습니다.

특히 "Jetpack", "Google SiteKit"과 같은 기능이 많은 플러그인은 사이트의 속도를 느리게 할 수 있습니다.

따라서 불필요한 플러그인은 비활성화하거나 삭제하고, 최적화된 플러그인만 사용하는 것이 좋습니다. 또한, 플러그인 간의 중복된 기능이 있는지 확인하고, 불필요한 기능은 비활성화하는 것이 중요합니다.

Q5: 이미지 최적화가 TTFB에 영향을 미칠까요?

네, 이미지 최적화는 TTFB에 중요한 영향을 미칩니다.

이미지는 웹페이지 로딩 속도에 큰 영향을 주기 때문에 이미지 크기를 줄이고, WebP와 같은 최신 형식으로 변환하는 것이 좋습니다. 이미지 최적화를 통해 첫 페이지 로딩 시간을 개선하고, TTFB를 줄이는 데 큰 도움이 됩니다. 또한, 불필요한 이미지 로딩을 지연시키는 방법도 효과적일 수 있습니다.

Q6: TTFB를 개선하기 위한 추가적인 팁은 무엇인가요?

• 플러그인 캐싱 사용: WP-Rocket과 같은 캐싱 플러그인을 사용하여 요청을 미리 저장하고, 반복되는 요청을 빠르게 처리할 수 있습니다.
• 서버 최적화: 서버의 응답 시간을 줄이기 위해 PHP 버전과 데이터베이스 서버의 성능을 최적화하는 것도 중요합니다.
• HTTP/2 사용: 최신 HTTP/2 프로토콜을 사용하면 성능을 향상시킬 수 있습니다.
• 정적 리소스 최소화: CSS, JavaScript 파일을 최소화하고 병합하여 HTTP 요청 수를 줄일 수 있습니다.

Q7: TTFB 최적화가 SEO에 미치는 영향은 무엇인가요?

TTFB는 구글 페이지 속도 측정 도구에서 중요한 지표 중 하나로, 웹사이트의 SEO 순위에 직접적인 영향을 미칠 수 있습니다.

TTFB가 길면 구글이 페이지를 로딩하는 데 시간이 더 걸리게 되며, 이로 인해 검색 엔진 최적화(SEO) 점수가 낮아질 수 있습니다. 따라서 TTFB 최적화는 SEO 개선에도 매우 중요한 요소입니다.