표준화된 로드 속성 채택에 대한 교훈
이 게시물의 목표는 CMS 플랫폼 개발자 및 기여자(CMS 코어 개발 담당자)에게 지금이 브라우저 수준 이미지 지연 로드 기능을 지원할 시기라고 설득하는 것입니다. 지연 로드를 구현하면서 고품질의 사용자 환경을 보장하고 다른 개발자가 맞춤설정할 수 있도록 하는 방법에 관한 권장사항도 알려드리겠습니다. 이 가이드라인은 WordPress에 지원을 추가하고 Joomla, Drupal, TYPO3에서 이 기능을 구현하도록 지원한 경험을 바탕으로 합니다.
CMS 플랫폼 개발자든 CMS 사용자 (CMS로 웹사이트를 빌드하는 사용자)든 상관없이 이 게시물을 통해 CMS의 브라우저 수준 지연 로드의 이점에 대해 자세히 알아볼 수 있습니다. CMS 플랫폼에서 지연 로드를 구현하도록 독려하는 방법은 다음 단계 섹션을 참고하세요.
배경
지난 한 해 동안 loading 속성을 사용하는 지연 로드 이미지 및 iframe이 WhatWG HTML 표준의 일부가 되었으며 다양한 브라우저에서 채택이 증가하고 있습니다.
하지만 이러한 주요 시점은 더 빠르고 리소스를 절약하는 웹을 위한 토대일 뿐입니다.
이제 분산형 웹 생태계에서 loading 속성을 사용합니다.
콘텐츠 관리 시스템은 웹사이트의 약 60% 를 지원하므로 이러한 플랫폼은 최신 브라우저 기능을 웹에 도입하는 데 중요한 역할을 합니다. WordPress, Joomla, TYPO3 등 몇몇 인기 있는 오픈소스 CMS는 이미 이미지에 loading 속성에 대한 지원을 구현했습니다. 이제 이들 CMS의 접근 방식과 다른 CMS 플랫폼에서 이 기능을 채택하는 데 필요한 요점을 살펴보겠습니다. 미디어 지연 로드는 사이트에서 대규모로 이점을 활용해야 하는 주요 웹 성능 기능이므로 CMS 핵심 수준에서 채택하는 것이 좋습니다.
현재 지연 로드 구현 사례
표준화
CMS에 표준화되지 않은 브라우저 기능을 도입하면 광범위한 테스트가 용이해지고, 잠재적인 개선 영역이 나타날 수 있습니다. 그러나 브라우저 기능이 표준화되지 않는 한 각 플랫폼의 확장 프로그램 또는 플러그인 형식으로 구현하는 것이 바람직하다는 것이 CMS 전체의 공통점입니다. 기능이 표준화된 후에만 플랫폼 코어에서의 채택을 고려할 수 있습니다.
브라우저 지원
이 기능에 대한 브라우저 지원도 비슷한 관심사입니다. 대다수의 CMS 사용자가 이 기능의 이점을 누릴 수 있습니다. 이 기능이 아직 지원되지 않는 브라우저가 상당수 있는 경우 이 기능은 최소한 이러한 기능에 부정적인 영향을 미치지 않도록 해야 합니다.
표시 영역으로부터의 거리 임계값
지연 로드 구현과 관련된 일반적인 우려사항은 로드 주기가 나중 단계에서 시작되므로 원칙적으로 사용자의 표시 영역에 이미지가 표시되면 이미지가 로드되지 않을 가능성이 높아진다는 점입니다. 이전의 JavaScript 기반 솔루션과 달리 브라우저는 보수적으로 접근하고 실제 사용자 환경 데이터를 기반으로 접근 방식을 미세 조정하여 영향을 최소화할 수 있으므로 CMS 플랫폼에서 브라우저 수준 지연 로드를 안전하게 도입할 수 있습니다.
사용자 환경 권장사항
요소에 측정기준 속성 필요
레이아웃 변경을 피하기 위해 이미지 또는 iframe과 같은 삽입된 콘텐츠는 항상 width 및 height 크기 속성을 포함해야 하며 브라우저가 실제로 로드하기 전에 이러한 요소의 가로세로 비율을 추론할 수 있도록 해 왔습니다. 이 권장사항은 요소가 지연 로드 중인지 여부와 관계없이 관련이 있습니다. 하지만 이미지가 표시 영역에 한 번 완전히 로드되지 않을 가능성이 0.1% 높기 때문에 지연 로드를 사용하는 경우 적용 가능성이 약간 높아집니다.
CMS는 모든 이미지와 iframe에 크기 속성을 제공하는 것이 좋습니다. 이러한 모든 요소에 이렇게 할 수 없는 경우 두 속성을 모두 제공하지 않는 지연 로드 이미지를 건너뛰는 것이 좋습니다.
스크롤 없이 볼 수 있는 부분의 요소 지연 로드 피하기
현재 CMS는 스크롤해야 볼 수 있는 부분에 위치한 이미지와 iframe에만 loading="lazy" 속성을 추가하는 것이 좋습니다. 이렇게 하면 2021년 7월에 발견된 최대 콘텐츠 페인트 측정항목의 지연을 방지할 수 있습니다. 그러나 렌더링 프로세스 전에 표시 영역을 기준으로 요소의 위치를 평가하는 것은 복잡하다는 점을 인지해야 합니다. 이는 특히 CMS가 자동화된 접근 방식을 사용하여 loading 속성을 추가하지만 수동 개입을 기반으로 하더라도 다양한 표시 영역 크기 및 가로세로 비율과 같은 여러 요소를 고려해야 하는 경우에 적용됩니다. 하지만 스크롤 없이 볼 수 있는 부분에 표시될 가능성이 있는 히어로 이미지와 기타 이미지 또는 iframe은 지연 로드가 발생하지 않도록 생략하는 것이 좋습니다.
JavaScript 대체 피하기
JavaScript를 사용하여 아직 loading 속성을 지원하지 않는 브라우저에 지연 로드를 제공할 수 있지만 이러한 메커니즘은 항상 이미지 또는 iframe의 src 속성을 초기에 제거해야 하므로 이 속성을 지원하는 브라우저에 지연이 발생합니다. 또한 이러한 JavaScript 기반 솔루션을 대규모 CMS의 프런트엔드에 출시하면 잠재적인 문제가 발생할 가능성이 커집니다. 이는 표준화된 브라우저 기능 전에 주요 CMS가 핵심 기능에 지연 로드를 채택하지 않은 이유 중 하나입니다.
기술 권장사항
기본적으로 지연 로드 사용 설정
브라우저 수준 지연 로드를 구현하는 CMS에 관한 전반적인 권장사항은
이를 기본으로 사용 설정하는 것입니다. 즉, loading="lazy"를
이미지 및 iframe에 추가해야 하며, 가급적 크기 속성이 포함된 요소에만 추가하는 것이 좋습니다.
이 기능을 기본적으로 사용 설정하면 수동으로 사용 설정해야 하는 경우(예: 이미지별로 사용 설정)보다 네트워크 리소스를 크게 절약할 수 있습니다.
loading="lazy"는 가능한 한 스크롤해야 볼 수 있는 부분에 표시될 가능성이 있는 요소에만 추가해야 합니다.
이러한 요구사항은 클라이언트 측 인식 부족과 다양한 표시 영역 크기로 인해 CMS에 구현하기 복잡할 수 있지만, 적어도 대략적인 휴리스틱을 사용하여 스크롤 없이 볼 수 있는 부분에 표시될 가능성이 있는 히어로 이미지와 같은 요소는 지연 로드가 발생하지 않도록 제외하는 것이 좋습니다.
요소별 수정 허용
loading="lazy"는 기본적으로 이미지와 iframe에 추가되어야 하지만, 예를 들어 LCP에 맞게 최적화하는 경우와 같이 특정 이미지에서 속성을 생략하도록 허용하는 것이 중요합니다. CMS의 잠재고객이 일반적으로 기술에 능통한 것으로 간주되는 경우 모든 이미지와 iframe에 노출된 UI 컨트롤을 사용하여 해당 요소의 지연 로드를 선택 해제할 수 있습니다.
또는 API를 서드 파티 개발자에게 노출하여 코드를 통해 유사한 변경사항을 적용할 수도 있습니다.
예를 들어 WordPress에서는 전체 HTML 태그 또는 컨텍스트 또는 콘텐츠의 특정 HTML 요소에서 loading 속성을 건너뛸 수 있습니다.
기존 콘텐츠 재구성
개략적으로 CMS의 HTML 요소에 loading 속성을 추가하는 방법에는 두 가지가 있습니다.
- 백엔드의 콘텐츠 편집기 내에서 속성을 추가하고 데이터베이스에 영구적으로 저장합니다.
- 프런트엔드에서 데이터베이스의 콘텐츠를 렌더링할 때 즉석에서 속성을 추가합니다.
기존 콘텐츠에도 지연 로드의 이점을 활용할 수 있도록 CMS는 렌더링할 때 즉시 속성을 추가하는 것이 좋습니다. 편집기를 통해서만 속성을 추가할 수 있는 경우 신규 또는 최근에 수정된 콘텐츠만 이점을 얻게 되므로 네트워크 리소스 절약에 미치는 CMS의 영향이 크게 줄어듭니다. 또한 브라우저 수준 지연 로드 기능이 확장되면 즉시 속성을 추가하면 향후에 쉽게 수정할 수 있습니다.
하지만 속성을 즉시 추가하면 요소의 잠재적으로 기존 loading 속성을 수용하고 이러한 속성이 우선 적용됩니다. 이렇게 하면 CMS 또는 CMS의 확장 프로그램이 중복 속성과의 충돌을 일으키지 않고 편집기 기반 접근 방식을 구현할 수 있습니다.
서버 측 성능 최적화
예를 들어 서버 측 미들웨어를 사용하여 즉석에서 콘텐츠에 loading 속성을 추가할 때 속도를 고려해야 합니다. CMS에 따라 DOM 순회 또는 정규 표현식을 통해 속성을 추가할 수 있으며 성능을 위해 후자가 권장됩니다.
정규 표현식 사용은 최소한으로 유지해야 합니다. 예를 들어 속성을 포함하여 콘텐츠의 모든 img 및 iframe 태그를 수집한 다음 loading 속성을 해당하는 경우 각 태그 문자열에 추가하는 단일 정규 표현식입니다. WordPress는 특정 요소에 대해 다양한 작업 중 즉석에서 작업을 실행하기 위한 단일 일반 정규 표현식까지 사용할 수 있습니다. 이 중 loading="lazy"를 추가하는 것은 단일 정규 표현식을 사용하여 여러 기능을 용이하게 하는 단일 정규 표현식입니다. 또한 이러한 최적화 형식은 확장 프로그램보다 CMS 코어에 지연 로드를 채택하는 것이 권장되는 또 다른 이유입니다. 이를 통해 서버 측 성능 최적화를 개선할 수 있습니다.
다음 단계
CMS에 기능 지원을 추가하기 위한 기존 기능 요청 티켓이 있는지 확인하거나 아직 티켓이 없으면 새 티켓을 엽니다. 제안서를 뒷받침하는 데 필요한 경우 이 게시물에 대한 참조를 사용하세요.
질문이나 의견이 있으면 트윗 (felixarntz@)을 보내주세요. 브라우저 수준 지연 로드 지원이 추가된 경우 이 페이지에 CMS를 등록할 수 있습니다. 다른 문제가 발생하는 경우 해결책을 찾을 수 있도록 더 자세히 알아보고 싶습니다.
CMS 플랫폼 개발자라면 다른 CMS에서 지연 로드를 어떻게 구현했는지 살펴보세요.
연구 결과와 이 게시물에서 얻은 기술 권장사항을 사용하여 패치 또는 pull 요청의 형태로 CMS에 코드를 기여할 수 있습니다.