웹사이트 로딩 시간과 Google Core Vitals를 개선하는 10가지 방법

핵심 Web Vital이란 무엇입니까?

올해 초 Google은 특정 웹사이트의 안정성, 속도 및 응답성을 정의하는 새로운 기준 세트를 도입했습니다. 세 가지 주요 기준은 다음과 같습니다.

• 누적 레이아웃 이동 은 웹 페이지의 구조가 이동하고 위치를 변경해야 하는 정도를 정의합니다. 이에 대한 벤치마크는 0.1입니다.
• 가장 큰 콘텐츠가 포함된 페인트 는 페이지의 주요 콘텐츠를 로드하는 데 걸리는 시간을 측정합니다. 최상의 결과는 2.5초 이하여야 합니다.
• 첫 번째 입력 지연 은 웹 페이지가 열리는 시점부터 처음 대화형이 되는 순간까지의 시간입니다. 가장 일반적으로 찾는 시간 프레임은 약 100밀리초입니다.

이러한 기본 용어를 염두에 두고 Core Vitals를 사용하여 웹사이트를 최대한 빠르고 효율적으로 만드는 방법을 살펴보겠습니다.

1. CDN 및 브라우저 캐시 최적화

이 방법을 사용하면 FID 및 LCP 점수가 매우 빠르게 향상됩니다. CDN에서 정적 자산을 제공하거나 AWS의 Cloudfront와 같은 서비스에 캐시하십시오. 그 후에 브라우저는 필요한 결과를 훨씬 더 빨리 얻을 수 있습니다.

또한 동적 페이지는 애플리케이션 동작 방식에 따라 이미 적용된 올바른 TTL 값으로 CDN에 캐시될 수 있습니다.

2. 모든 광고 및 미디어에 정확한 크기 사용

CLS 점수에 관한 한 이것은 가장 중요한 요소 중 하나입니다. 이미지 또는 태그가 지정된 자산에 특정 높이를 설정했는지 항상 확인하세요. 특히 접기 수준 구성 요소의 경우 매우 중요합니다. 시간이 촉박하면 항상 높이를 자동으로 설정하고 핀치에서 충분히 잘 작동해야 하는 대략적인 크기를 얻을 수 있습니다.

광고도 CLS를 고려하므로 광고가 잘못 표시되어 콘텐츠를 옮기지 않도록 광고의 높이와 크기를 철저히 확인해야 합니다. CLS가 지속적으로 영향을 받는 경우 광고 서비스 제공업체에 문의하거나 몇 가지 다른 옵션을 쇼핑해야 할 수 있습니다.

WordPress 플랫폼을 사용하는 경우 Webp에서 이미지를 자동으로 전달할 수 있고 페이지 로드 시 모든 이미지의 로드를 지연시키는 지연 로드와 같은 기능을 활성화할 수 있는 Ewww 와 같은 플러그인을 고려하는 것이 좋습니다.

3. 사용 중인 장치의 유형에 따라 지연 방식으로 올바른 해상도 이미지 로드

이 기술은 매우 빠르게 결과를 생성하므로 가장 먼저 고려해야 할 사항 중 하나입니다. 놀랍게도 사이트의 모든 이미지를 지연 로드하기 위해 지연 로드 패키지를 사용하면 주로 페이지의 무게를 줄이고 가능한 한 빨리 로드되도록 하여 LCP에 긍정적인 영향을 미칩니다.

또한 사이트를 보는 데 사용되는 장치 유형에 따라 각 자산의 해상도를 설정하는 것이 중요합니다. 해상도를 만능으로 로드하면 더 작거나 덜 강력한 장치에서 사이트 속도가 훨씬 느려지고 가능한 최악의 방식으로 LCP에 영향을 미칩니다.

4. SSR과 CSR을 스마트하게 활용하라

Google은 항상 점수가 높은 SSR(Server Side Rendered) 페이지를 장려하고 홍보하여 ​​가치 있는 SEO 성능을 고취하기 위해 열심입니다. 그러나 SEO와 페이지 로드 성능 간의 균형을 고려해야 합니다. 콘텐츠가 너무 많은 페이지는 서버 측에서 로드하는 데 시간이 오래 걸리고 사이트의 일반적인 성능이 저하될 수 있습니다.

실제 콘텐츠는 스크롤 없이 볼 수 있는 부분 위에 유지되어야 하며 다른 사이트 기능은 SSR을 개선하기 위해 뒤로 유지되어야 합니다. 이 비동기식 로딩 ​​스타일은 로딩 및 렌더링 점수에서 많은 시간을 소모합니다.

5. 코드를 분할하여 모든 것을 분해

자산(특히 JS 파일)에 가장 중요한 파일 크기를 사용하는 것은 일반적으로 좋지 않습니다. 대신 h2 프로토콜을 허용하고 이를 활용하여 자산을 별도의 조각으로 비동기식으로 다시 로드해야 합니다.

또한 하나의 거대한 HTML 파일을 사용하는 대신 사이트를 여러 개의 작은 파일로 나눌 수 있으므로 로딩 부담을 줄일 수 있습니다.

6. Brotli 압축 기술을 사용하여 정적 자산 축소

압축이 진행되는 한 Brotli는 로딩 속도 측면에서 최고의 옵션인 것 같습니다. 그러나 압축률이 높을수록 DevOps 측면에서 패키지 및 빌드 시간이 추가됩니다.

그러나 하루가 끝나면 사이트 로딩 시간이 가장 중요한 요소이며 다른 무엇보다 우선시되어야 합니다.

7. 응답 내용과 API 요청을 최대한 효율적으로 만드십시오.

의심할 여지 없이 로딩 속도 측면에서 가장 중요한 요소는 가장 사소한 변경일지라도 API를 사용하면 엄청난 결과를 얻을 수 있습니다. 최적화를 위해 API 응답 및 요청을 자주 확인해야 합니다.

또한 데이터 매개변수를 정의하고 많은 시간과 노력을 절약하는 데 필요한 것만 사용하십시오. API용 네트워크를 선택하는 것도 신중하게 고려해야 합니다. 잘못된 서브넷에서 호스팅하면 시간 요구 사항이 크게 늘어날 수 있기 때문입니다.

8. 페이지와 문서의 전체 크기 줄이기

헤비 코드 랜딩 페이지(75kb 이상은 심각할 수 있음)는 로드 시간과 가져오기 시간을 크게 증가시키기 때문에 매우 바람직하지 않습니다.

중복 데이터 비트를 놓치기 쉽기 때문에 항상 코드 측면에서 모든 것을 깨끗하게 유지하십시오.

9. 비디오 썸네일을 자리 표시자 이미지로 교체

많은 사이트 뷰어는 비디오 콘텐츠에 참여하지 않는 것을 선호하므로 재생되지 않는 비디오에 축소판을 로드하는 것은 이 경우 리소스 낭비입니다.

리소스를 절약하고 사이트 속도를 높이려면 자리 표시자 이미지나 빈 비디오 공간을 선택하는 것이 좋습니다.

10. 가장 빠른 서버 선택

이것은 명백한 요인처럼 보일 수 있지만 여전히 말할 가치가 있습니다. 최상의 서버 인프라에 투자하는 것은 예외 없이 전체 사이트의 속도에 직접적인 영향을 미치기 때문에 일반적으로 좋은 생각입니다.

돈을 조금 더 쓰면 전체적으로 상당한 시간을 절약할 수 있습니다. Cloudflare 는 값비싼 서버 리소스 없이 사이트를 비용 효율적으로 최적화할 수 있는 우수한 DNS 수준 도구입니다.

결론

위의 팁은 더 나은 Page Speed ​​점수와 핵심 핵심을 달성하기 위한 올바른 길을 안내합니다. 그러나 새롭고 더 깨끗하며 더 가벼운 사이트를 만들기 위한 최선의 조치를 의미하는 부풀려진 플랫폼이나 테마에 자신을 발견할 수도 있습니다.

이 모든 용어에 대해 머리를 긁적이거나 더 빠른 속도를 위해 전체 사이트를 재작업해야 한다는 생각에 겁이 난다고 가정해 보겠습니다. 이 경우 기존 사이트를 최적화하기 위한 최상의 조치를 제안하거나 핵심 vitals에 더 최적화된 코드베이스로 새 사이트로의 발전을 제안할 가능성이 있는 웹 디자인 전문가의 사이트 검토를 고려할 수 있습니다.