WordPress용 Google PageSpeed ​​Insights 점수를 높이는 방법

웹사이트의 로딩 속도는 성공 여부를 결정합니다. 두 개의 동일한 페이지를 비교하면 Google과 같은 검색 엔진에서 더 빠른 페이지가 우선적으로 처리됩니다. 다행히 웹사이트 속도를 테스트하고 개선에 대한 조언을 얻을 수 있는 방법이 있습니다. Google PageSpeed ​​Insights라고 합니다. 그 내용과 사용 방법은 다음과 같습니다.

Google PageSpeed ​​Insights란 무엇인가요?

Google PageSpeed ​​Insights(PSI)는 Google이 개발한 무료 온라인 도구로 모바일 및 데스크톱 장치에서 웹페이지 사용자 경험의 속도와 다양한 요소를 분석합니다. 이는 페이지를 분석하고 웹사이트 소유자가 사이트 성능을 향상시키는 데 도움이 되는 점수와 권장 사항을 제공합니다. 누구나 웹페이지에서 보고서를 실행할 수 있습니다. 이는 귀하의 사이트와 경쟁업체 사이트가 얼마나 잘 운영되고 있는지 확인할 수 있는 좋은 방법입니다.

다음은 Divi WordPress 테마로 구축된 웹사이트의 라이브 데모입니다. 아직 실행하지 않은 경우 버튼을 클릭하여 빠른 PageSpeed ​​보고서를 실행할 수 있습니다.

Google의 Chrome 팀은 우수한 사이트 속도와 사용자 경험을 결정하기 위한 측정항목을 표준화하기 위해 2020년에 CWV( Core Web Vitals )를 도입했습니다. PageSpeed ​​Insights는 단순히 이러한 측정항목을 분석하고 보고하는 도구입니다. 그렇기 때문에 사이트 소유자는 CWV 지표와 이것이 페이지 속도 SEO에 어떤 영향을 미치는지 이해하는 것이 중요합니다.

핵심 웹 바이탈: 이 약어는 무엇을 의미하고 측정합니까?

PageSpeed ​​점수는 5가지 핵심 측정항목을 통해 측정됩니다. 하지만 실제로는 3개만 '핵심'으로 간주되고 나머지 2개는 '주목할만한' 항목으로 간주됩니다.

다음은 LCP, INP, CLS, FCP 및 TTFB 약어에 대한 간단한 설명입니다.

• LCP(콘텐츠가 포함된 최대 페인트)는 뷰포트 내에 표시되는 가장 큰 콘텐츠 요소(이미지, 비디오, 텍스트 블록)가 화면에 렌더링되는 데 걸리는 시간을 측정합니다. 페이지의 주요 콘텐츠가 사용자에게 얼마나 빨리 표시되는지를 나타냅니다. 좋은 사용자 경험을 위해서는 2.5초 이하를 목표로 하세요.
• INP(Interaction to Next Paint)는 사용자 상호 작용에 대한 페이지의 응답성을 측정합니다. 사용자가 페이지를 방문하는 동안 모든 클릭, 탭 및 키보드 상호 작용의 대기 시간을 살펴보고 페이지의 일반적인 대기 시간을 나타내는 단일 값을 보고합니다. 좋은 INP는 200밀리초 이하입니다. 이것은 입력 지연(Input Delay)이라고 불렸습니다 .
• CLS(Cumulative Layout Shift)는 페이지의 시각적 안정성을 측정합니다. 뷰포트에서 표시되는 콘텐츠의 움직임이 얼마나 발생하는지 수량화합니다. 예상치 못한 레이아웃 변경은 사용자를 좌절시킬 수 있습니다(예: 버튼을 클릭하려고 할 때 버튼이 움직이는 경우). CLS 점수 0.1 이하를 목표로 하세요.
• FCP(First Contentful Paint)는 페이지 로딩이 시작되는 시점부터 콘텐츠(텍스트, 이미지 등)가 화면에 처음 그려지는 시점까지의 시간을 측정합니다. 이는 사용자가 페이지가 로드되고 있다는 시각적 피드백을 얼마나 빨리 받는지를 나타냅니다. 1.8초 이하를 목표로 하세요.
• TTFB(Time to First Byte)는 페이지를 요청한 후 브라우저가 서버로부터 데이터의 첫 번째 바이트를 수신하는 데 걸리는 시간을 측정합니다. 이는 서버 응답성에 대한 주요 지표입니다. 800밀리초 이하를 목표로 하세요.

모바일 페이지 속도를 우선시하는 이유는 무엇입니까?

스마트폰의 출현과 이제 대부분의 검색이 모바일 장치에서 발생한다는 사실로 인해 Google 및 기타 검색 엔진은 웹사이트와 웹페이지의 모바일 경험을 우선시하기 시작했습니다. 따라서 PageSpeed ​​Insight 평가를 실행하면 데스크톱과 모바일 모두에 대한 점수가 제공되는 것을 확인할 수 있습니다.

내 경험에 따르면 요즘 데스크톱에서 95점 이상을 받는 것은 매우 쉽지만 모바일 버전에서는 훨씬 더 어렵습니다. 그 이유는 다음과 같습니다.

1. 많은 웹 디자이너는 여전히 주로 데스크톱 경험을 바탕으로 웹사이트를 디자인합니다. 모바일 디자인은 나중에 생각하는 것입니다.
2. 모바일 속도 테스트에서는 셀룰러 데이터를 사용하여 인터넷 속도를 가정하는 반면, 데스크톱은 안정적인 고속 가정 또는 기업 인터넷 연결을 사용하는 경향이 있습니다. 이러한 격차로 인해 모바일 경험은 더 느려지는 경향이 있습니다.
3. 위의 #1을 기반으로 웹 디자이너는 데스크탑을 염두에 두고 웹사이트를 최적화합니다. 이는 최고의 최적화 중 상당수가 모바일 경험에 맞춰져 있지 않다는 것을 의미합니다.

이를 고려하여 모바일 환경이 최소한 데스크톱만큼 좋은지 확인하세요. 그러나 어느 쪽이든 데스크톱과 모바일 경험은 모두 동일한 기준으로 평가되므로 이러한 측정항목을 잘 알고 있어야 합니다.

더 나은 PageSpeed ​​점수를 위해 핵심 웹 바이탈을 개선하는 방법

좋습니다. 할 수 있는 일은 많지만 범위를 좁히는 데 도움이 됩니다. 저는 사이트 소유자가 각 핵심 웹 바이탈을 개선할 수 있도록 우선순위가 있고 실행 가능한 제안을 수집했습니다. 직면한 문제에 따라 내 권장 사항을 찾을 수 있습니다.

LCP(콘텐츠가 포함된 최대 페인트)

LCP의 경우 보고서에 설명된 대로 "가장 큰 요소"에 초점을 맞추고 싶을 것입니다. 점수가 나쁘면 사용자는 기본 콘텐츠를 보기 전에 덜 중요한 페이지 콘텐츠를 보게 됩니다.

다음 세 가지에 집중하세요.

1. LCP 요소 최적화: 초기 뷰포트 내에서 가장 큰 요소(종종 이미지 또는 히어로 텍스트)를 식별합니다. 먼저 이 요소를 최적화하세요.
   • 이미지: WebP와 같은 최신 형식을 사용하여 이미지를 압축합니다. 적절한 크기를 사용하십시오(필요한 것보다 큰 이미지를 제공하지 마십시오). 반응형 이미지에는 srcset 및 size 속성을 사용하세요. 이미지 전달을 위해 CDN 사용을 고려해보세요.
   • 텍스트 블록: 웹 글꼴이 효율적으로 로드되었는지 확인합니다(글꼴 표시 사용: 교체가 좋음). 텍스트 렌더링을 지연시키는 렌더링 차단 JavaScript 또는 CSS의 대규모 블록을 피하세요.
2. 스크롤 없이 볼 수 있는 콘텐츠 최적화: 스크롤 없이 볼 수 있는 부분(페이지에서 스크롤 없이 표시되는 부분) 위의 콘텐츠를 빠르게 로드하는 데 우선순위를 둡니다. 스크롤 없이 볼 수 있는 부분 아래에 중요하지 않은 리소스의 로드를 연기합니다.
3. 서버 응답 시간(TTFB) 향상: TTFB가 빨라지면 LCP에 직접적인 영향을 미칩니다. 아래의 TTFB 제안을 참조하세요.

INP(다음 페인트와의 상호작용)

INP는 페이지가 사용자 상호 작용(예: 버튼 클릭)에 어떻게 반응하는지에 중점을 둡니다. 이는 개발자 중심의 측정항목 중 하나이며 개발자가 아닌 사람이 분류하기가 훨씬 더 어려울 수 있습니다.

하지만 자신이 할 수 있다고 생각한다면 다음 작업에 집중해야 합니다.

1. 장기 작업 최소화 : 장기 실행 JavaScript 작업(메인 스레드를 50ms 이상 차단하는 작업)을 식별하고 분류합니다. 코드 분할을 사용하고 중요하지 않은 JavaScript를 연기하세요.
2. 이벤트 핸들러 최적화 : 이벤트 핸들러(예: 클릭 또는 탭 이벤트)가 효율적이고 긴 지연을 유발하지 않는지 확인하세요. 이벤트 핸들러 내에서 복잡한 계산이나 DOM 조작을 피하세요.
3. 레이아웃 스래싱 방지 : 동기식 레이아웃을 강제로 사용하지 마세요(JavaScript가 브라우저에서 짧은 기간에 여러 번 레이아웃을 다시 계산하도록 강제하는 경우). 이는 스타일을 읽은 후 즉시 작성할 때 자주 발생합니다.

CLS(누적 레이아웃 이동)

CLS를 개선하려면 예상치 못한 레이아웃 변경을 방지하기 위해 열심히 노력하세요. 이런 일이 발생하면 중요한 요소와 스타일이 예상치 못한 시간에 로드되어 화면에서 내용이 뛰어다니게 됩니다.

다음 사항에 집중해 보세요.

1. 이미지 및 비디오에 명시적 너비 및 높이 설정 : 이미지 및 비디오에 항상 너비 및 높이 속성을 포함하거나 CSS 종횡비를 사용하여 로드하는 동안 공간을 확보하세요. 이렇게 하면 콘텐츠가 여기저기 튀는 것을 방지할 수 있습니다.
2. 광고 및 삽입된 콘텐츠를 위한 공간 예약 : 크기가 변경될 수 있는 광고 또는 삽입물을 사용하는 경우 자리 표시자나 스켈레톤 로더를 사용하여 이를 위한 충분한 공간을 예약하세요.
3. 기존 콘텐츠 위에 콘텐츠 삽입 방지 : 사용자 상호 작용에 대한 응답이 아닌 이상 기존 콘텐츠 위에 콘텐츠를 동적으로 삽입하지 마세요.

FCP(콘텐츠가 포함된 첫 번째 페인트)

잘못된 FCP 점수는 콘텐츠가 매우 빠르게 표시되지 않을 때 발생합니다. 이는 페이지가 로드되지 않는 것 같은 인상을 줍니다.

FCP 문제를 해결하려면 다음 항목에 집중하세요.

1. 렌더링 차단 리소스 제거 : 렌더링을 차단하는 CSS 및 JavaScript를 최소화하거나 제거합니다. CSS 및 JavaScript 파일을 축소하고 압축합니다. 중요한 CSS(스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 필요한 CSS)를 인라인하고 중요하지 않은 CSS를 연기합니다. defer 또는 async 속성을 사용하여 중요하지 않은 JavaScript를 연기합니다.
2. 서버 응답 시간 최적화 : TTFB가 빨라지면 FCP가 직접적으로 향상됩니다. 아래의 TTFB 제안을 참조하세요.
3. 리소스 로드 순서 최적화 : 중요한 리소스(스크롤 없이 볼 수 있는 콘텐츠에 필요한 CSS 및 글꼴 등)를 조기에 로드하는 우선 순위를 지정합니다.

TTFB(첫 번째 바이트까지의 시간)

위와 유사하게 사용자는 페이지가 로드되기를 기다리고 있습니다. 그러나 TTFB는 개별 페이지가 얼마나 잘 로드되는지보다는 서버 구성에 더 중요합니다. TTFB는 사이트의 모든 페이지를 표시하는 서버의 응답성을 보여줍니다.

서버 응답 시간을 해결하려면 다음 항목을 자세히 살펴보세요.

1. 서버 성능 최적화 : 이는 종종 가장 영향력 있는 요소입니다.
   1. 호스팅 계획을 더 강력한 서버로 업그레이드(또는 더 강력한 호스팅 공급자로 업데이트).
   2. CDN(Content Delivery Network)을 사용하여 정적 자산을 사용자에게 더 가까이 캐시합니다.
   3. 서버 측 코드 및 데이터베이스 쿼리를 최적화합니다.
2. 캐싱 사용 : 적절한 캐싱 메커니즘(GZIP, 브라우저 캐싱, 서버 측 캐싱, 개체 캐싱)을 구현하여 서버의 로드를 줄입니다.
3. 빠른 조회 시간을 제공하는 DNS 공급자 사용 : 빠른 DNS 공급자는 도메인 이름을 IP 주소로 확인하는 데 걸리는 시간을 줄일 수 있습니다.

WordPress 웹사이트의 페이지 속도를 수정하는 방법

WordPress는 필요하다고 생각되는 방식으로 사이트를 최적화할 수 있는 탁월한 플랫폼입니다. Wix 및 Squarespace와 같은 웹사이트 빌더가 이를 처리하지만 해당 비용은 구독에 포함됩니다. 성능을 제한하거나 가격을 인상하기로 결정하면 귀하는 갇히게 됩니다. 호스팅 제공업체나 플러그인(WordPress 사용 시)에서 이런 일이 발생하는 경우 공급업체를 쉽게 전환하여 원하는 가격으로 성능을 유지할 수 있습니다.

PageSpeed ​​Insights 보고서에 표시된 핵심 웹 바이탈을 개선하는 데 사용하도록 권장하는 기본 플랫폼, 서비스 및 플러그인은 다음과 같습니다. CWV는 상호 침투하므로 때로는 하나를 수정하면 다른 것이 개선되기도 합니다. 일부 권장 사항은 여러 지표에 도움이 될 수 있습니다.

TTFB를 개선하는 방법

TTFB는 서버의 응답성을 측정합니다. TTFB가 빠르면 웹사이트 로드가 더 빨리 시작된다는 의미입니다. 이 문제를 해결하려면 서버 측에서 몇 가지 작업을 수행해야 합니다.

사이트그라운드 호스팅

빠른 TTFB를 위해서는 최적화된 서버 구성을 갖춘 안정적인 호스팅이 중요합니다. SiteGround는 WordPress에 최적화된 뛰어난 성능과 기능을 제공합니다.

SiteGround 받기

클라우드플레어 CDN

Cloudflare와 같은 CDN(콘텐츠 전송 네트워크)은 웹 사이트의 정적 자산을 전 세계 서버에 캐시하여 데이터 이동 거리를 줄이고 전 세계 사용자를 위해 TTFB를 개선합니다. 무료 버전은 상당한 이점을 제공합니다.

Cloudflare 구입

FCP, CLS 및 LCP를 개선하는 방법

이러한 CWV는 콘텐츠가 로드되는 속도와 로드하는 동안 레이아웃이 얼마나 안정적인지에 따라 크게 영향을 받습니다. 캐싱과 이미지 최적화가 핵심입니다.

니트로팩

NitroPack은 스마트 캐싱, 최적화된 리소스 전달, 지연 로딩 및 WebP 변환과 같은 고급 이미지 최적화 기술을 통해 웹사이트 효율성을 극대화합니다. 캐싱을 처리하고 CDN 및 이미지 크기 조정(계획에 따라)을 제공하기 때문에 이것을 언급하고 싶습니다. 즉, 필요한 세 가지 주요 항목(캐싱, 이미지 최적화 및 CDN)을 모두 갖춘 원스톱 상점입니다.

니트로팩 받기

W3 총 캐시

W3 Total Cache는 페이지 캐싱, 축소 및 브라우저 캐싱을 포함하여 로딩 시간을 개선하기 위한 포괄적인 옵션 제품군을 제공하는 오래된 WordPress 캐싱 플러그인입니다.

W3 총 캐시 가져오기

WP 로켓

WP Rocket은 페이지 캐싱, 사전 로드 및 파일 수정과 같은 기능으로 최적화를 단순화하는 사용자 친화적인 캐싱 플러그인입니다. 그것은 격찬을 받았으며 사용하기가 매우 쉽습니다. CDN용 추가 기능이 있거나 다양한 구성에서 잘 작동합니다.

WP 로켓 받기

EWWW 이미지 최적화 프로그램

EWWW 이미지 최적화 프로그램은 이미지를 자동으로 최적화하여 눈에 띄는 품질 손실 없이 파일 크기를 줄입니다. 이렇게 하면 로딩 시간이 향상되고 CLS가 방지됩니다. 이는 이미지 크기 조정에 도움이 될 뿐만 아니라 최신 웹에 더 잘 로드되는 차세대 이미지 형식을 제공합니다.

EWWW 이미지 최적화 프로그램 받기

LCP 및 INP를 개선하는 방법

LCP와 INP 모두에 대한 코드를 크래킹한다는 것은 페이지를 처음 로드할 때나 후속 활동에서나 사이트에서 콘텐츠를 빠르게 표시해야 함을 의미합니다. 성능이 뛰어난 WordPress 테마가 이를 실현하는 데 도움이 될 수 있습니다.

디비 테마

Divi는 수정 전이라도 각 페이지에 로드되는 CSS 및 JavaScript의 양을 최소화하도록 제작되었습니다. Divi 모듈을 사용하면 해당 모듈이 잘 코딩되어 있고 서버에 부담을 주지 않을 것이라고 믿을 수 있습니다. Divi에서 더 많은 성능을 얻으려면 전역 디자인 사전 설정을 사용하여 페이지에 필요한 CSS 양을 더욱 줄이세요. 이 모든 것이 결합되어 보기에도 좋고 잘 작동한다고 믿을 수 있는 더 나은 페이지를 만들 수 있습니다. Divi를 완전히 최적화하는 방법에 대해 자세히 알아보세요.

Divi Pro 받기

모든 것을 하나로 합치기

CWV(Core Web Vitals)에 맞게 웹사이트를 최적화하는 것은 온라인 성공을 위한 투자입니다. 많은 것을 알고 있지만 LCP, INP, CLS, FCP 및 TTFB에 집중함으로써 사용자 경험을 직접적으로 개선하고 웹 사이트를 더욱 즐겁고 매력적으로 만들 수 있습니다. 이는 이탈률을 낮추고 사이트에 머무는 시간을 늘리며 궁극적으로 더 많은 전환으로 이어집니다.

또한 Google은 이러한 지표를 중요하게 여기므로 핵심 웹 바이탈을 개선하면 검색 엔진 가시성이 향상될 수 있습니다. 이러한 측정항목은 순위 요소는 아니지만 순위 요소인 항목 유형에 도움이 됩니다. 이러한 개선 사항을 통해 귀하의 사이트에 더 많은 유기적 트래픽이 발생하기를 바랍니다.

지금 바로 높은 점수를 받는 WordPress 사이트를 만들어보세요

아직 웹사이트를 구축하지 않으셨다면 다음 순서에 집중하겠습니다.

1. 안정적인 호스팅 받기(Siteground 권장)
2. 놀라운 성능을 제공하기 위해 모범 사례를 사용하여 구축된 Divi와 같은 테마를 선택하세요.
3. 좋은 캐싱 플러그인과 CDN으로 마무리하세요.

테스트 Divi 페이지(라이브 데모)

지금 Divi를 받으세요

자주 묻는 질문