오프스크린 이미지 연기: 이 Google Lighthouse 기회를 수정하는 방법

사이트의 성능을 측정하는 것은 종종 성공하거나 실패하는 작업이었습니다. 이는 사용 가능한 도구가 해당 사이트 성능과 관련된 사용자 경험에 대한 적절한 통찰력을 제공하지 않았기 때문입니다. 그러나 Google Lighthouse는 이러한 많은 단점을 수정하고 개발 워크플로에 맞출 수 있도록 만듭니다. Lighthouse의 '기회' 중 하나는 WordPress의 오프스크린 이미지를 연기하는 것입니다. 좋은 소식은 이것이 달성하기 간단하다는 것입니다.

이 게시물에서는 🔎 코드와 플러그인을 모두 사용하여 WordPress에서 오프스크린 이미지를 연기하는 방법을 살펴보겠습니다. 하지만 먼저 Google Lighthouse에 대한 몇 가지 용어를 정리한 다음 Defer offscreen images 지표가 우선 순위 목록에서 어디에 위치해야 하는지에 대해 이야기해야 합니다.

감사 권장 사항과 기회의 차이점

WordPress에서 오프스크린 이미지를 연기하는 방법을 알아보기 전에 이 지침이 Google Lighthouse에 어떻게 들어가는지 이해하는 것이 중요합니다. 감사 추천이 아닌 실적 '기회'입니다. 차이점은 다음과 같습니다.

• 감사 추천 . 이는 Google Lighthouse 내 점수에 결정적인 영향을 미치며 이러한 측정항목에 우선순위를 두어야 합니다.
• 기회 . 이것들은 여전히 ​​어느 정도 중요하지만 감사 점수에 영향을 미치지는 않습니다. 따라서 부차적인 문제로 간주할 수 있습니다.

Defer offscreen images 지표는 기회입니다. 즉, 여전히 영향을 미칠 수 있지만 점수가 더 이상 향상되지 않으면 볼 수 있는 것입니다.

오프스크린 이미지 연기 - 정의

귀하의 웹사이트는 페이지의 모든 섹션에서 이미지를 사용할 가능성이 높습니다. 이들 중 일부는 스크롤할 필요 없이 화면에 '접힌 부분 위에' 표시됩니다. 따라서 오프스크린 이미지는 다른 모든 것을 나타냅니다.

Defer offscreen images 메트릭은 다음 네 가지 기준 중 하나를 충족하는 시각적 요소를 나타냅니다.

• 이미지는 보이는 페이지 영역 아래에서 시작하고 이 영역 높이의 3배에서 끝나야 합니다.
• 매우 작은 이미지(크기가 0.02MB 미만)는 Defer off screen images 메트릭에 고려되지 않습니다.
• 로드하는 데 50ms 이상 걸리는 페이지는 기회를 트리거합니다.
• 페이지에서 로딩 속성을 정의하면 Defer offscreen images가 전혀 표시되지 않습니다. 스포일러 경고: 지금 loading="lazy" 에 익숙해지세요!

또한 오프스크린 이미지가 많은 사이트는 LCP(Largest Contentful Paint) 점수가 낮을 수 있습니다. 이로 인해 Google Lighthouse 10에 혼란스러운 변화가 생겼습니다. 이에 대해서는 다음에 다룰 것입니다.

TTI(Time To Interactive) 개선은 감가상각된 메트릭입니다.

이전 버전의 Google Lighthouse에서는 Defer offscreen images가 TTI에 영향을 미쳤습니다. 그러나 Google은 이제 이를 감가상각 측정항목으로 간주합니다. 10% 가중치는 CLS(Cumulative Layout Shift)로 이전된 전체 성능 감사 점수를 제공했으며 이제 25% 가중치를 제공합니다 [1][2] .

이는 이미지를 화면 밖으로 연기하는지 여부에 관계없이 레이아웃 이동을 일으키지 않는다는 점에서 문제를 일으킵니다. 따라서 이것이 전체 감사 권장 사항이 아니라 Defer offscreen images가 이제 기회일 뿐인 이유입니다.

Google Lighthouse에서 오프스크린 이미지 연기를 요청하는 이유

Defer offscreen images 의 강등에도 불구하고 로딩 속도와 성능에는 여전히 어느 정도 중요합니다. 어떤 도구를 선택하든 몇 초 만에 완전히 로드된 오프스크린 이미지의 영향을 확인할 수 있습니다.

이 지표는 CLS 또는 TTI에 영향을 미치지 않지만 LCP에는 영향을 미칠 수 있습니다. 또한 필요할 때만 이미지를 로드해야 한다는 점을 상기시켜주는 좋은 방법입니다. 다음으로 그 이유에 대해 논의하겠습니다.

모든 이미지를 한 번에 로드하면 안 되는 이유

대화에서 우리 모두는 '협력 원칙'에 따라 작업합니다. 이것은 사회 과학 수업이 아니므로 여기서는 자세히 설명하지 않겠습니다. 그러나 이 개념에는 Defer offscreen images 메트릭과 관련된 중요한 측면이 있습니다. 'Grice의 수량의 격률'은 컨텍스트를 설정하는 데 필요한 만큼의 정보만 공개해야 한다고 말합니다.

이것이 왜 중요한가요? 너무 많은 정보를 제공하면 청취자에게 과부하가 발생할 수 있기 때문입니다.

따라서 사이트의 모든 이미지를 한 번에 로드해서는 안 됩니다! 여기에는 몇 가지 확실한 이유가 있습니다.

• 사용자는 오프스크린 이미지를 볼 수 없으며 그렇지 않으면 화면의 요소에 필요한 리소스를 차지합니다.
• 오프스크린 이미지를 로드하면 뷰포트 내에서 아무 일도 일어나지 않고 페이지가 로드되기 때문에 사용자 경험(UX)이 나빠질 수 있습니다.
• 사용자 입장에서는 금전적인 비용이 들 수도 있습니다. 예를 들어 Wi-Fi가 아닌 모바일 데이터를 사용하는 동안 오프스크린 이미지를 연기하지 않는 사이트를 탐색하는 사람을 생각해 보십시오.

Google Lighthouse의 초점이 UX에 있고 인지된 성능이 UX에 미치는 영향을 감안할 때 위의 모든 내용을 이해하는 것이 중요합니다. 좋은 소식은 오프스크린 이미지를 연기하는 간단한 방법이 있다는 것입니다.

사이트에서 오프스크린 이미지를 연기하는 방법

정답은 지연 로딩입니다. 이것은 오프스크린 이미지가 사이트의 체감 성능에 미치는 영향을 줄이는 가장 간단하고 효과적인 방법입니다. 게다가 대부분의 브라우저는 지연 로딩을 지원합니다.

그러나 Firefox는 이미지에 대한 지연 로딩만 지원하므로 인라인 프레임에 대해 이를 구현하도록 선택하는 경우 문제가 됩니다. 여전히 이를 구현하는 방법은 여러 가지가 있습니다. 주요 접근 방식은 <img> 또는 <iframe> 요소 내에서 HTML loading 속성을 사용합니다. 세 가지 다른 값을 사용할 수 있는 옵션이 제공됩니다.

• eager . 이렇게 하면 브라우저에 이 이미지를 먼저 로드하도록 지시합니다. 기본 옵션이며 이미지가 페이지의 위치에 관계없이 항상 렌더링된다는 점에서 전혀 포함하지 않는 것만큼 좋습니다.
• lazy . 이렇게 하면 뷰포트에서 하드 코딩된 거리에 도달할 때까지 이미지 또는 iframe 로드가 지연됩니다. 정확한 거리는 브라우저마다 다를 수 있으며 항상 이미지 크기도 지정하는 것이 좋습니다.
• auto . 브라우저는 작업에 가장 적합한 옵션을 선택합니다.

이는 예상대로 간단하게 구현할 수 있습니다.

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

물론 여기 프런트엔드에는 아무 것도 표시되지 않습니다. 어쨌든 이미지가 화면 밖에 있고 보이지 않기 때문입니다.

AMP(Accelerated Mobile Pages)를 사용하도록 선택한 경우 amp-img 요소를 사용하여 자동으로 지연 로드를 구현할 수 있습니다. 다른 플랫폼의 경우 모듈이나 플러그인이 지연 로딩을 구현하는 가장 좋은 방법입니다.

WordPress에서 오프스크린 이미지를 연기하려면 전용 플러그인을 사용하는 것이 좋습니다. 기본적으로 WordPress는 모든 이미지에 대해 지연 로딩을 구현하지만 이 광범위한 브러시는 정확한 요구 사항에 맞지 않을 수 있습니다.

WordPress 플러그인을 사용하여 사이트에 지연 로딩 추가

WordPress에 추가 기능을 추가하고 싶을 때마다 플러그인이 항상 최선의 선택입니다. 게으른 로딩의 경우에도 마찬가지입니다.

WordPress에는 지연 로딩을 추가하는 데 도움이 되는 여러 플러그인이 있지만 모두 같은 것은 아닙니다. 예를 들어, 일부는 낮은 평점과 리뷰를 가지고 있고, 다른 일부는 많은 업데이트를 받지 못하며, 일부는 적절한 수준의 기능을 제공할 수 없습니다. 그러나 Optimole은 이미지 압축과 레이지 로딩 모두에 대해 상품을 제공할 수 있습니다.

이것은 Optimole이 일반적으로 수행할 수 있는 작업에 대한 개요가 아닙니다. 당사의 자매 사이트인 Themeisle이 이를 보여줄 수 있습니다. 대신 이미지를 지연 로드할 수 있는 빠르고 쉬운 옵션을 강조하겠습니다. 올바른 옵션을 찾으려면 Media > Optimole > Settings 화면으로 이동한 다음 Scale images and lazy load 토글 스위치를 찾으십시오. 이것이 켜져 있는지 확인하고 싶을 것입니다.

이렇게 하면 Advanced > Lazyload 섹션에서 다양한 옵션을 사용할 수 있습니다.

이것은 작업할 수 있는 귀중한 옵션 세트를 제공합니다. 예를 들어 이미지에 대한 자리 표시자를 활성화하고, 브라우저 기본 또는 클래식 지연 로드 간에 전환하고, 이미지 크기 조정을 활성화하는 등의 작업을 수행할 수 있습니다.

그러나 더 조사해야 할 두 가지 설정이 있습니다. 첫 번째는 로드에서 설정된 수의 이미지를 제외할 수 있습니다. 기본값은 3개이지만 접힌 부분 위에 있는 이미지 수만큼 설정할 수 있습니다. 이는 사이트의 모든 이미지에 대해 지연 로딩을 구현한다는 의미입니다.

다른 멋진 기능은 배경 이미지를 지연 로드하는 데 도움이 되는 CSS 선택기를 지정하는 기능입니다.

이를 통해 요구 사항과 Lighthouse 점수에 따라 전체 지연 로드 환경을 사용자 지정하면서 어느 정도의 유연성을 유지할 수 있습니다. 게다가 Optimole의 무료 버전으로 위의 모든 것이 가능합니다!

결론 🧐

이미지가 화면에 표시되지 않으면 로드할 필요가 없습니다. 지연 로딩과 같은 솔루션이 없으면 사이트를 로드하는 데 걸리는 시간이 길어집니다. 또한 성능과 관련된 가장 중요한 일부 지표에도 영향을 미칩니다. Google Lighthouse의 Defer offscreen images 기회를 통해 일종의 지연 로딩을 구현하도록 추진할 수 있으며 코드 없이 이를 수행할 수 있는 방법이 많이 있습니다.

예를 들어 Optimole은 WordPress에서 오프스크린 이미지를 연기하는 데 도움이 되는 최고의 플러그인 중 하나입니다. WordPress가 취하는 전역 '항상' 접근 방식보다 더 구체적으로 옵션을 설정할 수 있습니다. 그러나 캐싱 플러그인과 같이 이를 수행하는 데 도움이 되는 다른 플러그인도 있습니다. 코딩 경로도 간단하고 거의 모든 브라우저에서 지원을 받을 수 있습니다.

Optimole이 WordPress에서 오프스크린 이미지를 연기하는 방법이 됩니까? 아래 의견 섹션에서 의견을 공유하십시오!