Google PageSpeed ​​Insights에서 100에 도달하는 방법(WordPress)

웹 사이트를 더 빠르게 만드는 데 도움이 되는 도구가 있다면 좋지 않을까요? 글쎄요! Google PageSpeed ​​Insights는 이름이며 느린 웹사이트 문제를 해결하기 위해 제공되는 무료 서비스입니다. 이 기사에서는 그것이 무엇인지, 어떻게 작동하는지, WordPress에서 찾기 어려운 Google PageSpeed ​​Insights 100/100 점수에 도달하는 방법을 살펴보겠습니다.

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

Google PageSpeed ​​Insights는 웹사이트의 속도와 사용자 경험을 측정하기 위한 온라인 도구입니다. 데스크톱 및 모바일에서 사이트 로드 시간을 측정하고 사이트 성능에 대한 다양한 메트릭을 표시합니다. 메트릭이 최적이 아닌 것으로 판단되면 도구는 메트릭을 개선하는 방법에 대한 제안을 제공합니다.

Google PageSpeed ​​Insights로 이동하여 URL을 입력하고 분석을 누르기만 하면 됩니다. Google은 모바일과 데스크톱 모두에서 귀하의 사이트를 판단합니다. 당신은 당신이 다른 것보다 하나에서 더 나은 점수를 찾을 수 있습니다.

Google은 웹 페이지에 대해 전체 점수를 100점 만점에 부여했지만 더 이상은 그렇지 않습니다.

대신 Google은 Core Web Vitals 라고 하는 세 가지 통계를 측정합니다. 이것들은:

• LCP(Largest Contentful Paint) : 사이트의 주요 콘텐츠가 로드되는 속도입니다. 좋은 사용자 경험을 위해서는 2.5초 이하여야 합니다.
• FID(First Input Delay) : 사이트가 사용자 입력에 얼마나 반응하는지. FID는 100밀리초 이하여야 합니다.
• CLS(Cumulative Layout Shift) : 웹 페이지의 시각적 안정성을 측정합니다. 0.1 이하의 CLS 점수가 바람직합니다.

또한 Google은 다음을 측정합니다.

• FCP(First Contentful Paint) : 웹 페이지가 화면에 렌더링되기 시작하는 데 걸리는 시간입니다. 좋은 FCP 점수는 1.8초 이하입니다.
• INP(Interaction to Next Paint) : 페이지가 사용자 상호 작용에 얼마나 반응하는지 측정합니다. 정말 반응이 좋은 웹사이트는 INP가 200밀리초 이하입니다.
• TTFB(Time to First Byte) : 서버 요청 후 데이터의 첫 번째 바이트가 전송되는 데 걸리는 시간입니다. 0.8초 이하의 TTFB가 이상적입니다.

그 아래의 성능 문제 진단 섹션에서 Google PageSpeed ​​Insights는 성능, 접근성, 모범 사례 및 SEO의 4가지 점수를 제공합니다. 90 이상은 좋은 점수이고, 50~89는 개선할 수 있음을 나타내며, 50 미만은 나쁜 점수입니다.

그 아래에는 Google의 기회 및 진단이 있습니다. 다음은 성과 점수를 간접적으로 향상시킬 수 있는 방법입니다. 성능 지표는 사이트 속도에 가장 큰 영향을 미칩니다.

웹사이트 성능을 개선하는 방법을 알아보기 전에 웹사이트 속도가 중요한 이유를 살펴보겠습니다.

웹사이트 속도가 중요한 이유는 무엇입니까?

웹사이트 속도는 사용자와 소비자 행동에 큰 영향을 미칩니다.

모바일 랜딩 페이지를 완전히 로드하는 데 걸리는 평균 시간은 22초입니다 [1] .

바운스 확률은 페이지 로드 시간이 1초에서 3초로 증가함에 따라 32% 증가합니다 [2] .

모바일 사이트를 로드하는 데 3초 이상이 걸리면 방문 중 53%가 이탈 합니다 [3] .

분명히 전자 상거래 사이트를 운영하는 경우 사이트 속도가 느려지면 전환율이 감소하므로 이를 해결해야 합니다. 사이트를 로드하는 데 걸리는 시간과 함께 전환율이 떨어집니다 [4] .

• 2.4초 만에 로드된 페이지의 전환율은 1.9%였습니다.
• 3.3초에서 전환율은 1.5%였습니다.
• 4.2초에서 전환율은 1% 미만이었습니다.
• 5.7초 이상에서 전환율은 0.6%였습니다.

높은 PageSpeed ​​Insights 점수와 실제 페이지 속도 비교

Google은 실험실 데이터(통제된 조건에서 수집)와 현장 데이터(야생의 실제 사용자로부터 수집) 모두에서 PageSpeed ​​Insights 점수를 계산합니다.

실제 페이지 속도를 테스트하려면 GTmetrix 또는 Pingdom의 속도 테스트와 같은 온라인 도구를 사용할 수 있습니다.

이러한 도구를 사용하여 여러 위치에서 사이트를 테스트할 수 있습니다.

GTmetrix에서 텍사스 샌안토니오에 있는 테스트 서버의 페이지 로드 시간이 666ms라는 것을 볼 수 있습니다. 이는 매우 좋은 점수입니다.

홍콩에서는 페이지 로드 시간이 1.4초로 조금 더 깁니다.

Pingdom은 또한 워싱턴 DC의 테스트에서 850ms의 빠른 로드 시간을 보여주지만 일본 도쿄에서는 1.06초의 더 느린 로드 시간을 보여줍니다.

Uptrends 도구를 사용하면 모바일과 데스크탑에서 테스트할 수 있습니다. 다음은 iPad Air에서 프랑스 파리의 WP Shout 사이트에 대한 결과입니다. 로드 시간은 1.9초입니다.

따라서 Google PageSpeed ​​Insights 점수와 실제 페이지 속도 사이에는 상관관계가 있는 것 같습니다.

WordPress에서 이상적인 Google PageSpeed ​​Insights 100 점수를 얻는 방법

이제 높은 Google PageSpeed ​​Insights 점수가 중요한 이유를 알았으니 이를 개선할 수 있는 방법을 살펴볼 때입니다.

Google PageSpeed ​​Insights 점수를 개선하는 방법

1. 이미지 최적화

웹에 맞게 이미지를 최적화하면 성능 점수를 쉽게 높일 수 있습니다.

Optimole과 같은 이미지 압축 플러그인이 필요합니다.

이 플러그인은 이미지를 더 작은 파일 크기로 압축하여 더 빠르게 로드할 수 있습니다. 모든 새 이미지 업로드와 기존 이미지 업로드에 사용할 수 있습니다. Optimole의 장점은 CDN을 통해 이미지를 전달하므로 훨씬 더 빠르게 전달할 수 있다는 것입니다.

또한 이미지를 JPG 또는 PNG 파일보다 크기가 작은 WebP 형식으로 변환할 수 있습니다. 이렇게 하면 차세대 형식 권장사항으로 이미지 제공을 통과하는 데 도움이 됩니다. 또한 최대 너비를 설정하여 더 큰 이미지의 크기를 조정할 수 있습니다.

이미지 요소에 명시적인 너비 및 높이 기회가 없음을 충족하도록 지정된 너비 및 높이 속성이 이미지에 있는지 확인하십시오.

Optimole 플러그인에는 사용자가 아래로 스크롤할 때만 이미지나 동영상을 로드하는 지연 로딩도 포함되어 있습니다. 이것은 아래에 표시된 Defer offscreen images 기회에 도움이 됩니다.

이미지 파일 크기를 줄이는 또 다른 방법은 SVG 이미지를 사용하는 것입니다. SVG는 벡터 파일이므로 파일 크기에 영향을 주지 않고 쉽게 크기를 조정할 수 있습니다. WordPress에서는 기본적으로 지원되지 않지만 SVG 지원 또는 Safe SVG와 같은 플러그인을 사용하여 미디어 라이브러리에 추가할 수 있습니다.

2. 과도한 DOM 크기 피하기

DOM이란 무엇입니까? DOM은 Document Object Model의 약자이며 페이지의 모든 HTML 요소, 속성 및 텍스트가 포함된 트리 구조입니다.

DOM 크기를 줄이기 위한 몇 가지 전략은 긴 웹 페이지를 더 작은 섹션으로 나누고 CSS에서 {display:none;} 선언으로 DOM 노드를 숨기지 않는 것입니다.

DOM 크기를 늘릴 수 있는 한 가지 요소는 페이지 빌더를 사용하는 것입니다. 페이지 빌더는 페이지의 <div> 요소 수를 늘리는 경향이 있습니다.

Elementor를 사용하는 경우 버전 3.0부터 일부 HTML 래퍼가 제거되어 DOM 크기가 줄었습니다.

또는 Chris Lema가 수행한 것처럼 페이지 빌더 대신 Gutenberg를 사용하도록 이동할 수 있습니다.

이 게시물에서 과도한 DOM 크기를 피하는 방법에 대한 더 많은 팁을 찾을 수 있습니다.

3. JavaScript 및 CSS 최적화

CSS 및 JS 파일을 축소 및 압축 하여 성능을 향상시킬 수 있습니다. 축소는 CSS 또는 JS 파일에서 모든 공백을 제거하는 반면 GZIP 압축은 {와 같은 반복되는 문자를 제거합니다.

CSS 또는 JS를 축소할 수 있는 WordPress 플러그인에는 Autoptimize(무료) 및 WP Rocket(유료)이 포함됩니다.

축소는 사이트를 손상시킬 수 있으므로 축소하는 플러그인에는 문제가 있는 경우 축소에서 파일 제외 옵션이 있습니다.

WP Rocket에는 CSS 및 JS 파일을 단일 파일로 결합하여 요청을 줄이는 옵션도 있습니다. 그러나 웹 서버가 HTTP/2를 사용하는 경우에는 이 작업을 원하지 않을 것입니다. 먼저 확인하기 위해 서버가 HTTP/2를 실행하는지 테스트할 수 있습니다.

대부분의 캐싱 플러그인으로 GZIP 압축을 활성화할 수 있습니다. 웹 서버가 Apache 또는 LiteSpeed인 경우 플러그인은 .htaccess 파일에 직접 쓰거나 복사하여 붙여넣을 행을 제공할 수 있습니다. NGINX 또는 IIS를 사용하는 경우 Hummingbird는 이러한 서버에서 압축을 활성화하는 구성도 제공합니다.

사이트에 사용되지 않는 CSS 또는 JS가 있으면 제거해야 합니다. Chrome DevTools를 사용하여 사용하지 않는 CSS 및 JS를 찾을 수 있습니다. 대부분 플러그인에서 가져온 것입니다.

또한 Rapidload의 CSS Saver를 사용하여 웹사이트에서 손실될 수 있는 CSS를 확인할 수 있습니다.

4. 렌더링 차단 리소스 제거

렌더링 차단 CSS 및 JS는 웹 페이지의 첫 번째 페인트를 차단하는 것으로 표시되는 파일입니다.

자동 최적화 플러그인은 이 문제를 해결할 수 있으며 결과적으로 First Contentful Paint 및 Largest Contentful Paint 점수를 향상시킬 수 있습니다.

5. 초기 서버 응답 시간 단축

서버 응답 시간은 사용하는 테마와 플러그인, 보유하고 있는 웹 호스팅 유형과 같은 몇 가지 요인에 따라 달라집니다.

사용하지 않는 과도한 플러그인을 제거하거나 Astra와 같은 가벼운 테마로 전환하는 것을 고려하십시오.

호스팅의 경우 공유 웹 호스팅을 통해 관리되는 WordPress 호스팅을 권장합니다. 관리되는 WordPress 호스트에는 서비스의 일부로 서버 최적화가 포함됩니다.

6. 웹폰트 로드 중에 텍스트가 계속 표시되도록 합니다. 웹폰트 로드 중에 텍스트가 계속 표시되도록 합니다.

웹 글꼴을 사용하는 경우 Google의 권장 사항에 따라 페이지가 로드되는 동안 보이지 않는 텍스트가 표시되지 않습니다.

권장 사항은 font-display: swap; 추가를 제안합니다. 스타일시트의 @font-face 선언에.

아래 스크린샷은 Asset CleanUp 플러그인을 사용하여 이 속성을 추가하는 방법을 보여줍니다.

7. 요청 수를 적게 유지하고 전송 크기를 작게 유지

Google PageSpeed ​​Insights는 웹 서버에서 요청한 파일 수와 이러한 파일의 크기를 기록합니다.

여기에 큰 숫자가 있으면 다음과 같이 줄일 수 있습니다.

• 이미지 및 미디어 파일 최적화. 애니메이션 GIF 대신 비디오 파일을 사용하는 것이 좋습니다.
• CSS 및 JS 최적화
• 글꼴 및 타사 스크립트 최적화
• HTML 파일의 크기 줄이기

8. 중요한 요청을 연결하지 마십시오.

중요한 요청은 페이지를 로드하는 데 필수적인 요청입니다. 예를 들어 로고는 중요한 요청일 수 있습니다.

큰 다운로드를 포함하는 긴 체인과 체인은 웹 사이트 속도에 좋지 않은 것으로 간주됩니다. First Contentful Paint 및 Largest Contentful Paint에 영향을 미칩니다.

Google에 따르면 중요한 요청을 연결하지 않으려면 다음을 수행해야 합니다.

• 중요한 리소스의 수를 최소화합니다. 제거, 다운로드 지연, 비동기로 표시 등이 있습니다.
• 다운로드 시간(왕복 횟수)을 줄이기 위해 중요 바이트 수를 최적화합니다.
• 나머지 중요한 리소스가 로드되는 순서를 최적화합니다. 중요한 경로 길이를 줄이기 위해 가능한 한 빨리 모든 중요한 자산을 다운로드합니다.

다음과 같이 할 수 있습니다.

• 주요 요청, 이미지 및 글꼴을 참조하는 HTML에서 "link rel="preload"를 사용하여 미리 로드합니다.
• CSS 및 JavaScript 축소.
• 렌더링 차단 리소스를 제거합니다.

WP Rocket과 같은 플러그인을 사용하여 이러한 작업을 수행할 수 있습니다.

9. 긴 메인 스레드 작업을 피하고 메인 스레드 작업을 최소화하십시오.

긴 기본 스레드 작업은 사용자의 대화 시간을 지연시키는 JavaScript 작업(50ms 이상)입니다.

메인 스레드 작업을 최소화한다는 것은 JS 구문 분석, 컴파일 및 실행 시간을 줄이는 것을 의미합니다.

다음을 통해 JavaScript 작업의 길이와 시간을 줄일 수 있습니다.

• 부풀린 플러그인 사용 최소화
• 글꼴 및 분석 스크립트를 로컬로 호스팅
• JS 및 CSS 축소 또는 지연
• 게으른 로딩 배경 이미지

WordPress에서 기본 스레드 작업을 최소화하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오.

10. 대규모 레이아웃 변경 방지 대규모 레이아웃 변경 방지

레이아웃 이동은 누적 레이아웃 이동 메트릭에 기여하고 사용자에게 페이지 점프의 인상을 줍니다.

다음을 통해 이 문제를 해결할 수 있습니다.

• 미디어에 치수 추가
• 글꼴 미리 로드
• 동적 콘텐츠 최적화(예: 뉴스레터 가입 양식)

자세한 내용은 WordPress의 누적 레이아웃 이동 수정 가이드를 참조하세요.

11. 타사 코드의 영향 감소

타사 스크립트는 Google Analytics 추적 또는 YouTube 삽입과 같은 다른 곳에서 호스팅되는 스크립트입니다.

가능한 경우 로컬에서 스크립트를 호스팅하십시오. YouTube에서는 이 작업을 수행할 수 없지만 분석 코드 및 글꼴을 로컬에서 호스팅할 수 있습니다.

로컬 Google 글꼴 플러그인을 사용하여 자체 서버에서 Google 글꼴을 호스팅할 수 있습니다.

WordPress용 로컬 Google 애널리틱스 – 외부 요청 캐시 플러그인은 Google 애널리틱스를 로컬에서 호스팅합니다.

12. CDN 사용

Content Delivery Network는 웹 콘텐츠를 저장하고 사용자에게 제공하는 서버의 원격 네트워크입니다.

CDN은 정적 파일(예: HTML, CSS 및 JavaScript)을 캐싱하고 가까운 위치에서 사용자에게 제공함으로써 사이트 속도를 향상시킬 수 있습니다. 이렇게 하면 First Contentful Paint 및 Largest Contentful Paint 점수를 줄이는 데 도움이 됩니다.

WP Shout에서 Cloudflare CDN을 사용합니다. 무료로 시작할 수 있습니다.

CDN을 사용해야 하는 이유와 최상의 옵션에 대해 자세히 알아보십시오.

Google PageSpeed ​​Insights 100 점수를 얻는 방법에 대한 결론

우리는 플레이에서 사이트 속도를 결정하는 몇 가지 요소가 있음을 확인했습니다. 이 팁은 완벽한 점수를 얻는 데 도움이 될 것입니다.

하지만 100점에 너무 연연해서는 안 됩니다. 90점 이상이면 여전히 매우 좋은 점수입니다. 사이트 성능 최적화에 대한 David의 게시물을 읽고 우리가 점수를 개선하기 위해 무엇을 했는지 확인하십시오.