WordPress 웹사이트의 핵심 Web Vital을 개선하기 위한 팁

게시 됨: 2021-09-13

Google은 웹 디자이너와 웹사이트 소유자 모두에게 공포의 물결을 일으키는 방법을 가지고 있습니다. 검색 알고리즘을 변경하면 사람들은 따라잡기 위해 뒤섞이기 시작합니다. 이유를 이해하는 것은 쉽습니다. 아무도 자신의 SEO 순위가 고통받는 것을 원하지 않습니다.

따라서 Core Web Vitals 메트릭이 발표되었을 때 응답은 꽤 예측 가능했습니다. 이러한 변경 사항은 사이트 성능을 기반으로 하므로 로드 시간을 번개처럼 빠르게 하는 데 주의를 기울였습니다.

그러나 항상 간단한 것은 아닙니다. WordPress와 같은 콘텐츠 관리 시스템(CMS)을 실행하는 웹사이트는 특히 어려울 수 있습니다. 많은 요인이 작용합니다. 따라서 성능 향상을 위해서는 다각적인 접근이 필요합니다.

어디서 시작하나요? WordPress 웹 사이트의 Core Web Vitals 점수를 높이는 방법에 대한 가이드를 확인하십시오.

캐싱 구현

WordPress 웹 사이트의 속도를 높이는 가장 간단한 방법 중 하나는 캐싱을 구현하는 것입니다. 많은 경우에 이전에 느리던 사이트는 이 단일 단계로 훨씬 더 빨라질 것입니다. 이것은 비교적 저렴한 호스팅에서도 마찬가지입니다.

기본적으로 WordPress 페이지 및 게시물은 사이트 데이터베이스에서 콘텐츠와 설정을 검색해야 합니다. 시간이 걸립니다. 반면에 캐시는 콘텐츠를 정적 HTML 파일로 제공하므로 데이터베이스 호출이 필요하지 않습니다. 중개자(즉, 데이터베이스)를 제거하면 더 빠른 로드 시간이 따를 것입니다.

일부 호스팅 패키지, 특히 관리되는 WordPress 호스팅에는 서버 기반 캐시가 포함됩니다. 이것은 웹 디자이너가 거의 필요로 하지 않고 매우 잘 수행되기 때문에 종종 최상의 옵션입니다. 자주 삭제해야 할 수도 있습니다. 그렇지 않으면 손을 떼는 경험입니다. 그리고 플러그인과 효과적으로 결합하여 속도를 더욱 향상시킬 수 있습니다.

호스트가 서버 수준에서 캐싱을 제공하지 않더라도 플러그인을 통해 성능을 최적화할 수 있습니다. 캐싱 플러그인은 범위, 복잡성 및 가격이 다릅니다. 그러나 로드 시간을 개선할 때 가시적인 결과를 제공합니다. 이는 차례로 Core Web Vitals에도 긍정적인 영향을 미칩니다.

스포츠카입니다.

렌더링 차단 스크립트 및 스타일의 로드 지연

Google PageSpeed Insights에서 웹사이트의 성능을 테스트할 때 렌더링 차단 리소스의 주제가 많이 나오는 것 같습니다. 이는 "필수"로 간주되지 않는 스크립트 및 스타일입니다. 즉, "볼 수 있는 부분" 페이지 콘텐츠를 렌더링하는 데 필요하지 않습니다.

이러한 리소스는 더 빠른 로드 시간을 방해할 수 있습니다. 특히 Core Web Vitals의 "Largest Contentful Paint(LCP)" 점수에 영향을 줍니다. 페이지의 주요 콘텐츠 영역이 로드되는 데 걸리는 시간입니다. LCP를 줄이는 것은 매우 중요합니다.

상황을 개선하는 한 가지 방법은 다양한 콘텐츠 요소(이미지, 비디오, 블록 수준 텍스트)가 로드될 때 지연(또는 연기)하는 것입니다. 이렇게 하면 필요한 스크립트와 스타일만 먼저 로드되고 나머지는 모두 나중에 로드됩니다.

축소와 함께 많은 WordPress 캐싱/최적화 플러그인에도 이러한 유형의 기능이 포함됩니다. 그러나 잘못된 리소스를 연기하면 문제가 될 수 있으므로 약간의 실험이 필요할 수 있습니다.

변경 사항을 테스트하고 브라우저 콘솔에 오류가 있는지 확인하십시오. 올바른 구성을 찾으면 페이지의 렌더링 차단 리소스 수가 크게 줄어듭니다.

거리에 양보 표시입니다.

이미지 최적화

큰 영웅 이미지와 복잡한 슬라이더의 광범위한 사용은 성능 최적화의 문제를 가중시킬 뿐입니다. 이러한 자산은 보기에는 좋아 보이지만 최대 메가바이트급 데이터를 쉽게 추가할 수 있습니다. 그렇다고 해서 Core Web Vitals(특히 모바일에서)에 대한 합격 점수를 얻지는 못할 것입니다.

고맙게도 부하를 줄이는 몇 가지 방법이 있습니다. 무엇보다도 불필요한 것으로 간주되는 이미지를 제거하십시오. 하나의 큰 이미지를 제거해도 차이가 날 수 있습니다.

나머지 이미지는 최적화할 수 있습니다. 이렇게 하면 파일 크기가 줄어들고 로드 시간에 미치는 영향이 줄어듭니다.

이미지 최적화 방법은 귀하에게 달려 있습니다. 최악의 범죄자의 사본을 다운로드하고 좋아하는 이미지 편집기를 사용하여 압축한 다음 웹사이트에 다시 업로드할 수 있습니다. 또는 유용한 WordPress 미디어 플러그인을 사용하여 프로세스를 자동화할 수 있습니다.

반응형 이미지

모바일 사용자를 위해 WordPress에는 srcset 을 통해 반응형 이미지를 제공하는 기능이 포함되어 있습니다. 사실, 콘텐츠 내에 배치된 이미지에 대해 자동으로 더러운 작업을 수행합니다. 이것은 엄청난 데스크탑 크기의 미디어가 모바일 사용자 경험을 저하시키는 것을 방지하기 때문에 매우 중요합니다. 기본 콘텐츠 영역 외부에 있는 이미지의 경우 이 기능을 구현하기 위해 몇 가지 사용자 지정 작업을 수행해야 할 수 있습니다.

모든 것을 게으른 로드

지연 로드 기능은 항목이 브라우저의 뷰포트에 있을 때만 로드합니다. 이미지, iframe 및 기타 타사 콘텐츠(예: 소셜 미디어 위젯)의 로드를 지연하여 사용자가 가장 먼저 보게 될 요소에 리소스를 집중할 수 있습니다.

WordPress는 이미 기본 브라우저 기반 이미지 지연 로딩을 구현합니다. 페이지 또는 게시물에 이미지를 추가할 때 loading="lazy" 속성은 <img> 태그 내에 배치됩니다. 즉, 이미지에 높이 및 너비 속성이 포함되어 있는 경우입니다.

이것은 훌륭하지만 비디오나 iframe과 같은 다른 요소는 어떻습니까? 이러한 항목은 처음부터 로드할 때 페이지의 무게를 줄일 수도 있습니다.

이제 Iframe은 기본적으로 지연 로드되므로 걱정할 필요가 없습니다. 일부 더 복잡한 요소는 이 기능을 구현하기 위해 사용자 정의 코드 또는 플러그인이 필요할 수 있습니다.

개가 벤치에 쉬고 있습니다.

잡동사니 없애기

시간이 지남에 따라 잘 관리된 WordPress 사이트도 어수선해질 수 있습니다. 막힌 데이터베이스, 아직 활성 상태인 사용하지 않는 플러그인, 사용하지 않는 기능이 포함된 부풀려진 테마 – 그런 일이 발생합니다. 또한 Core Web Vitals를 아래로 드래그할 수도 있습니다.

그렇기 때문에 수시로 정리하는 것이 중요합니다. 사이트의 데이터베이스는 수동으로 최적화하거나 정기적으로 최적화하도록 설정할 수 있습니다. 사용하지 않는 플러그인은 비활성화하고 폐기할 수 있습니다. 테마를 더 가볍게 만들거나 더 나은 것으로 바꿀 수 있습니다.

웹사이트 속도를 늦추는 요인에 대해 연구하고 범인을 찾아 처리하십시오. 이것이 얼마나 많은 차이를 만들 수 있는지에 놀랄 것입니다.

"KEEP THINGS SIMPLE"이라고 적힌 글자 타일.

웹사이트의 핵심 Web Vitals 개선

Core Web Vitals는 WordPress 웹 사이트 성능을 최적화하는 이미 까다로운 프로세스를 복잡하게 만듭니다. 다른 성능 지표에서 좋은 점수를 받은 웹사이트라도 이 영역에서는 여전히 부족할 수 있습니다. 이것은 무엇보다도 모바일 테스트에서 빛을 발합니다.

좋은 소식은 디자이너가 따라잡기 위해 할 수 있는 작은 일들이 많다는 것입니다. 캐시를 구현하면 훌륭한 기반을 마련하고 즉각적인 향상을 제공합니다. 거기에서 중요한 순서대로 파일 크기를 줄이고 스타일과 스크립트를 로드하는 문제입니다.

더 나아가 Core Web Vitals를 염두에 두고 사이트의 CSS를 조정하는 것도 의미가 있습니다. 이것은 두려운 CLS(Cumulative Layout Shift) 점수에 도움이 되고 팽창을 줄일 수 있습니다.

일반적으로 성능에 좋은 것은 Core Web Vitals에도 좋습니다. 점수는 오히려 빠르게 향상될 수 있습니다. 이러한 개별적인 단점을 해결하려면 시행착오를 거쳐야 합니다.

가장 중요한 목표는 사용자가 웹사이트를 방문할 때 필수 항목만 로드되도록 하는 것입니다. 그렇게 하면 방문자와 Google 모두 매우 만족할 것입니다.