WordPress 사이트에서 핵심 웹 가상을 개선하는 방법은 무엇입니까?

디지털 마케팅에서 속도가 중요한 이유는 무엇입니까? 렌더링 시간이 더 빠른 사용자는 페이지에 머물면서 탐색할 가능성이 더 큽니다. 결과적으로 전체 SERP 순위에 긍정적인 영향을 미칠 수 있습니다. 또한 웹 페이지가 첫 번째 표시 영역을 렌더링하는 데 걸리는 시간은 검색 엔진에 점점 더 흥미로워지고 있습니다. 실제로 모든 Google 순위 요소의 거의 절반이 사용자 경험 개선과 직접적인 관련이 있습니다. 검색 엔진은 핵심 웹 바이탈(CWV)로 알려진 로딩의 여러 측면을 포함하여 특정 순위 요소를 강조하는 것으로 알려져 있습니다. 순위에 직접적인 영향을 미치는 것 외에도 페이지 경험은 사용자가 콘텐츠를 탐색하는 동안 참여하는 방식과 콘텐츠를 다시 방문할 가능성에 영향을 미칠 수 있습니다.

핵심 성능 보고서의 세 가지 구성 요소

Google의 알고리즘은 고품질의 사용자 친화적인 사이트를 홍보하고 품질 기준을 충족하지 않는 사이트를 강등시키기 위해 지속적으로 변화하고 있습니다. 이러한 알고리즘의 한 부분은 광범위한 업데이트의 최근 롤아웃에서 중요한 역할을 하는 핵심 웹 바이탈입니다. CWV에 대한 Google의 목표는 개발자가 사이트 성능을 최적화할 때 사용자 경험에 더 집중하도록 장려하는 것입니다.

가장 큰 콘텐츠가 포함된 페인트, 첫 번째 입력 지연, 누적 레이아웃 이동 — 핵심 웹 바이탈의 세 가지 구성 요소입니다.

• 가장 큰 콘텐츠 페인트( Largest Contentful Paint ) — 가장 큰 콘텐츠 페인트(LCP)는 웹 사이트의 시각적 인식이 화면의 가장 큰 요소의 로딩 속도에 크게 영향을 받기 때문에 중요한 기준입니다. 로드된 DOM 콘텐츠와 사용자가 화면에서 무언가(큰 이미지 또는 텍스트 블록)를 보는 순간 사이의 시간이 CPL 또는 콘텐츠가 포함된 페인트 대기 시간입니다. 본질적으로 사용자의 클릭(예: 페이지 로드)과 어떤 종류의 콘텐츠를 보는 순간 사이의 경과 시간입니다. 내용이 풍부한 페인트가 4초 이상 걸리면 SEO 점수에 부정적인 영향을 미칠 수 있습니다.
• 첫 번째 입력 지연 — 첫 번째 입력 지연은 무언가를 클릭한 후 페이지가 입력에 응답하는 시간입니다. FID는 일반적으로 밀리초(ms) 단위로 측정됩니다. 예를 들어 사용자가 사이트 요소를 클릭하고 화면이 새 정보로 업데이트될 때까지 기다리면 브라우저가 이 작업을 처리하고 결과를 제공합니다. FID가 짧을수록 사용자가 페이지 탐색을 더 빨리 시작할 수 있으므로 더 오랜 시간 동안 유지하고 전환을 늘릴 수 있습니다. Google은 우수한 점수의 경우 100ms, 낮은 점수의 경우 300ms의 첫 번째 입력 지연을 허용한다고 밝혔습니다.
• 누적 레이아웃 이동 — 페이지를 아래로 스크롤하다가 스크롤할 때 갑자기 페이지의 많은 부분이 위로 이동하는 것을 본 적이 있습니까? CLS(누적 레이아웃 이동)는 콘텐츠가 그려진 후 페이지 주위를 이동하는 경우입니다. 결과적으로 사용자는 특히 많은 텍스트가 있는 경우 페이지의 콘텐츠를 이해하고 다시 분석해야 합니다. 충분한 누적 레이아웃 이동 점수는 0.1 미만이고 불량은 0.25 미만입니다.

WordPress 사이트에서 핵심 성능 보고서를 측정하는 방법은 무엇입니까?

WordPress 웹사이트의 핵심 웹 바이탈을 최적화하고 웹사이트가 최대 효율성 수준에서 실행되도록 하려면 중요한 데이터 포인트를 모니터링, 추적 및 분석하는 데 필요한 모든 도구를 갖추는 것이 중요합니다.

구글 서치 콘솔

실제 사용자 데이터를 측정한 후 Search Console은 웹사이트의 데스크톱 버전과 모바일 버전에 대해 별도로 문제가 발견된 페이지 수와 함께 CWV 보고서를 생성합니다. 상태(나쁨, 개선 필요, 좋음), 핵심 웹 바이탈(CLS, FID, LCP) 및 유사한 페이지 그룹을 기반으로 URL 성능을 다룹니다. URL에 특정 측정항목에 대한 보고 데이터가 충분하지 않은 경우 보고서에 포함되지 않는다는 점에 유의해야 합니다.

PageSpeed ​​통계

동시에 PageSpeed ​​Insights를 사용하면 Google 크롤러 및 사용자의 관점에서 사이트를 볼 수 있으므로 페이지 문제에 대한 분석을 제공하고 성능 개선을 위한 제안을 제공합니다. 보고서를 사용하면 로드 시간 증가에 기여하는 리소스를 더 잘 이해할 수 있습니다. 또한 페이지에 대한 주요 통찰력을 제공하고 필요한 변경 방법을 알려주는 보고서를 받게 됩니다.

SE 랭킹

위에서 언급한 도구와 함께 SE Ranking의 웹사이트 감사는 데스크톱 및 모바일 버전에 대해 별도로 핵심 웹 바이탈 섹션을 제공합니다. 이 도구는 웹사이트에 있을 수 있는 기술적 문제를 감지하므로 SEO 전문가에게 훨씬 더 많은 정보를 제공할 수 있습니다. 감사 결과를 기반으로 도구는 웹 사이트의 전반적인 상태 점수와 성능에 영향을 미치는 문제 목록을 자세한 설명 및 해결 방법에 대한 팁과 함께 제공합니다.

가장 일반적인 핵심 성능 보고서 문제 및 해결 방법

1- 서버가 너무 느립니다

모든 WordPress 웹사이트가 동일하게 만들어지는 것은 아니라는 점을 기억하는 것이 중요합니다. 이로 인해 일부 웹사이트는 동일한 설정을 가진 다른 웹사이트보다 느리게 작동할 수 있습니다. 그 이유는 설치한 플러그인 수, 스크립팅 및 CSS 양, 서버 위치 등 많은 요소가 서버 속도에 영향을 미칠 수 있기 때문입니다.

그러나 WordPress 웹사이트에 특별히 최적화된 호스팅이 있습니다. 일반적으로 캐싱 소프트웨어로 인해 로딩 속도가 더 빠르고 많은 방문자를 처리할 수 있습니다. 이러한 호스팅은 많은 기술적 문제를 관리할 수 있으며 많은 사전 설치된 플러그인이 있습니다. 따라서 하나 또는 여러 웹사이트를 만들고 WP 호스팅이 모든 기술적 작업을 수행하도록 할 수 있습니다.

2- 큰 이미지 및 비디오

웹 사이트에서 작업할 때 핵심 웹 바이탈 테스트를 실행할 때가 되면 이미지 및 비디오와 관련된 몇 가지 문제를 보게 될 것입니다. 느린 페이지 속도의 근본적인 원인은 너무 많은 이미지와 비디오입니다. "몇 메가바이트가 너무 많은가"라는 오래된 진부한 질문은 핵심 웹 바이탈의 세계에서 최근에 등장했습니다. 보다 구체적으로 사이트의 이미지, 비디오 및 기타 대용량 파일 사용을 최적화하는 방법에 대한 질문이 제기되었습니다.

경험 법칙은 하나의 기본 이미지와 동영상 크기를 지정한 다음 이미지와 동영상 요소에 너비와 높이 속성을 포함하는 것입니다. 이미지를 업로드하기 전에 특정 너비로 ​​사용자 지정하고 배경, 불필요한 텍스트 등과 같은 특정 영역을 잘라내는 새 이미지 요소를 만드는 것이 더 좋습니다. 온라인에는 사진을 자르고 크기를 조정할 수 있는 무료 이미지 편집 응용 프로그램이 많이 있습니다. . 더 큰 이미지를 표시할 때의 문제는 더 큰 다운로드 크기와 이미지를 표시하는 데 걸릴 수 있는 대역폭입니다.

비디오에도 동일하게 적용됩니다. 비디오를 미리 사용자 정의하면 브라우저에서 축소가 필요하지 않으므로 페이지 속도가 크게 향상될 수 있습니다. 비디오는 일반 크기로 재생할 수 있습니다. 게다가 네이티브 동영상은 무겁기 때문에 YouTube 임베드로 대체할 수 있어 사이트 속도가 상당히 빨라집니다.

지연 로딩을 사용하는 것은 사용자 경험을 손상시키지 않고 페이지 속도를 향상시키는 또 다른 좋은 방법입니다. Lazy loading은 이미지가 뷰포트(또는 화면 구간)에 들어올 때만 이미지를 로드하는 기술입니다. 이 접근 방식을 사용하면 스크롤할 때 이미지가 점진적으로 로드되어 페이지 속도가 빨라집니다. 가장 좋은 부분? Lazy Load와 같은 WordPress 지연 로딩 플러그인을 사용하여 구현하는 것은 기본입니다. 이렇게 하면 사용자 경험이 크게 향상됩니다. 사용자는 페이지가 로드될 때까지 기다릴 필요가 없습니다. 몇 번 스크롤하면 이미지가 저절로 로드됩니다.

3- 최적화되지 않은 코드

최적화되지 않은 코드는 First Contentful Paint와 같은 핵심 웹 바이탈 점수 및 사용자 경험을 손상시킬 수 있습니다. 여기서 가장 큰 범인은 주로 JavaScript입니다. 페이지가 로드된 후에 다운로드하여 실행해야 하기 때문입니다. (JavaScript는 페이지 로딩을 차단하는 HTML보다 우선합니다.) 이로 인해 특히 사용자의 연결이 빠르지 않은 경우 몇 초 동안 쉽게 화면이 정지될 수 있습니다. 따라서 JavaScript가 최적화되지 않은 경우 사이트 성능 포인트를 잃을 위험이 있습니다. JavaScript가 로드될 때까지 페이지 로드가 차단되지 않도록 하려면 async 및 defer 태그를 사용할 수 있습니다. 게다가 코드 파일에서 불필요한 요소를 제거하는 것이 좋습니다.

코드 축소는 코드에서 불필요한 주석, 공백 및 줄바꿈을 제거합니다. 이렇게 하면 파일 크기를 줄이는 데 도움이 될 수 있으므로 방문자의 브라우저에서 다운로드 시간이 빨라집니다. 여기에는 두 가지 이유가 있습니다. 첫째, 방문자가 더 빠르게 다운로드할 수 있습니다. 둘째, 더 작아지므로 더 적은 서버 리소스를 사용합니다. 쉽게 축소할 수 있는 일부 파일에는 <style> 및 <script> 파일이 포함됩니다. 최적화 전후의 파일을 비교하여 직접 테스트할 수 있습니다. 스타일시트나 JavaScript 파일의 경우 결과가 그다지 눈에 띄지 않을 수 있습니다. YUI Compressor, Minify 등과 같은 CSS 및 JS 압축 도구가 축소 플러그인보다 이러한 유형의 파일을 최적화하는 작업을 훨씬 더 잘 수행하기 때문입니다.

DOM(Document Object Model)은 문서에 있는 모든 요소의 계층 구조입니다. DOM은 CSS 스타일과 JavaScript가 연결된 HTML 태그로 구성됩니다. 요소 수가 꽤 많을 수 있으므로 페이지 크기가 커집니다. 모바일 장치에 페이지를 제공하는 경우 이로 인해 성능 문제가 발생할 수 있습니다. 따라서 요소 수를 최소화하고 문서에서 배치를 최적화하는 것이 중요합니다.

4- 레이아웃 변경

레이아웃 이동은 방문자의 브라우저 창 크기가 조정될 때 발생하는 현상입니다. 그리고 이미지, 글꼴 및 색상과 같은 웹사이트의 요소가 느슨해지거나 위치가 변경됩니다. 이것은 독자가 당신이 제시하려는 것에 집중하기 어렵게 만듭니다. Layout Shift Score는 장치 간 레이아웃 변경이 사이트에 미치는 영향을 추적하는 점수입니다. 뷰포트에 대해 이야기할 때 꽤 큰 문제입니다. 디자인이 너무 많이 바뀌면 방문자와 전환을 잃을 수 있기 때문입니다. 레이아웃 변경을 최소화하고 최대한 최적화하면 이탈이 줄어들고 궁극적으로 더 많은 페이지 조회수를 얻을 수 있습니다.

또한 상당한 레이아웃 변경은 SEO 노력에 부정적인 영향을 미칠 수 있습니다. 그러나 큰 레이아웃을 디자인하는 것은 유지하기 어려울 수 있습니다. 이는 반응형 디자인으로 사이트를 특별히 디자인하지 않은 경우입니다. 따라서 모든 장치에 맞게 레이아웃을 조정해야 합니다. 정기적으로 이 작업을 수행해야 하는 경우 시간이 오래 걸릴 수 있습니다. 품질이나 기능을 손상시키지 않고 성공하려면 지속성과 일관성이 필요합니다. 그렇기 때문에 최상의 솔루션은 웹 사이트의 디자인을 반응형으로 만드는 것입니다. 반응형 화면은 표시되는 화면 크기에 따라 크기가 조정됩니다. 반응형 화면을 구현한다는 것은 웹사이트가 느려지거나 충돌하지 않고 조정된다는 것을 의미합니다.

5- 캐싱 문제

웹 리소스를 구축할 때 다른 리소스에 대해 다른 캐싱 정책이 사용됩니다. 캐싱 정책은 각 리소스를 캐시하는 방법을 정의하고 리소스를 캐시해야 하는 기간에 대한 정보를 제공합니다. 이러한 정책을 설정해야 합니다. 사용자가 액세스할 때마다 처음부터 새로 만들지 않고도 웹 리소스를 재사용할 수 있습니다. 성능을 향상시키려면 서버가 이미 생성된 리소스를 생성하는 데 시간을 낭비하지 않도록 하는 것이 중요합니다. 서버 측 스크립트 기술의 도움으로 이 정책을 활용할 수 있습니다. 중요한 자원이 변경되지 않는 한 절대 다시 작성되지 않도록 하십시오.

서명된 교환(SXG)은 개인 정보를 보호하는 방식으로 웹에서 콘텐츠를 미리 가져올 수 있는 새로운 이니셔티브입니다. 서명된 교환에는 웹 사이트가 미리 가져오려는 리소스에 대한 사양이 포함되어 있습니다. 또한 해당 리소스를 안전하게 가져오는지 확인합니다(개인 정보를 공개하지 않고). 서명된 교환 바이너리 형식은 자산 전송 형식입니다. 추가 헤더가 첨부된 콘텐츠가 HTTPS를 통해 전송됨을 의미합니다. 이것은 Google 검색을 활성화하여 페이지 로드 성능을 향상시키는 흥미롭고 새로운 방법입니다. 특히 AMP 페이지 또는 외부 리소스에 의존하는 다른 유형의 페이지에서.

결론

Core Web Vitals는 웹페이지를 로드하는 사용자의 경험을 평가하는 Google에서 개발한 세 가지 측정항목입니다. 세 가지 핵심 웹 바이탈은 페이지 로드 속도를 이해하는 데 중요합니다. 브라우저가 사용자 입력에 얼마나 반응하는지, 콘텐츠가 브라우저에 로드될 때 얼마나 불안정한지. 느린 로딩 시간은 방문자가 사이트에 머무를지 여부에 영향을 미칩니다. 그들은 모두 떠나거나 사이트에서 귀하의 콘텐츠에 참여하는 데 더 적은 시간을 할애할 수 있습니다.