GTmetrix F등급 사이트를 A등급으로 올린 실제 최적화 방법입니다

워드프레스 속도 최적화 GTmetrix 활용을 본격적으로 시작한 건 구글 애널리틱스에서 모바일 이탈률이 70%를 넘는 것을 확인했을 때였습니다. GTmetrix에서 측정하니 점수 F, 로드 시간 8.2초였습니다. 두 달에 걸쳐 단계적으로 최적화한 결과 A등급, 1.8초로 개선됐습니다. 어디서부터 시작해야 할지 GTmetrix가 명확하게 알려줬습니다.

GTmetrix 분석 결과 보는 법

GTmetrix.com에서 URL 입력 → 분석 시작

결과 탭:

• Summary: 전체 등급, LCP, TBT, CLS 점수
• Performance: Web Vitals 세부 지표
• Structure: 개선 필요 항목 (Largest Contentful Paint, 이미지 최적화 등)
• Waterfall: 각 리소스 로드 시간 시각화

Structure 탭을 가장 먼저 봅니다. 점수 영향도가 높은 항목 순서로 정렬돼 있어서 우선순위가 명확합니다.

흔한 F등급 원인과 해결

1. 이미지 크기 (가장 큰 원인)

GTmetrix “Serve images in next-gen formats” → WebP로 변환 GTmetrix “Properly size images” → 실제 표시 크기보다 큰 이미지 교체

예: 2000px 이미지를 800px 영역에 표시 중 → 800px로 리사이즈

2. JavaScript 연기 로드

WP Super Cache 또는 W3TC에서 “지연 로드 JS” 활성화

또는 직접 설정:

// functions.php
add_filter('script_loader_tag', function($tag, $handle, $src) {
    if (!is_admin()) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 3);

3. 렌더링 차단 CSS/JS 제거

GTmetrix “Eliminate render-blocking resources” → 이 항목이 크다면 캐시 플러그인의 “CSS/JS 미니파이 및 결합” 기능 활성화

4. 서버 응답 시간 (TTFB)

TTFB가 1초 이상이면 서버 자체가 느린 것입니다. PHP-FPM 설정, OPcache 활성화, DB 최적화가 필요합니다.

# PHP OPcache 활성화 확인
php -i | grep opcache.enable

최적화 우선순위

1순위: 이미지 크기 및 WebP 변환 (효과 최대)
2순위: 캐시 플러그인 활성화
3순위: JS 지연 로드
4순위: DB 최적화
5순위: CDN(Cloudflare) 연결

순서대로 적용하고 GTmetrix로 변화를 확인하면서 진행하는 것이 효율적입니다. 한 번에 모든 것을 바꾸면 어떤 변경이 효과가 있었는지 파악하기 어렵습니다.