Lazyload 이미지가 아프지 않고 SEO

Question

우리 웹 사이트에 제품 세부 정보 페이지가 있으며 제품의 큰 이미지 미리보기가 있습니다. 문제는 크기가 너무 크고 고해상도이기 때문에 페이지에로드하고 렌더링하는 데 시간이 걸립니다. 이제 이미지 업 스케일링 (image upscaling)에 대해 읽었거나 이미지가 이미지로드 (lazyloading)와 비슷하게 작동한다는 것을 이해했습니다. 그래서 개념은 파일 크기와 이미지 크기 측면에서 매우 큰 이미지를 생성하고이를 이미지의 초기 미리보기로 설정한다는 것입니다. 그런 다음 큰 이미지의 원래 크기와 동일하게 크기를 지정합니다. 이렇게 그것은 기지개되고 그들은 그것을 밖으로 흐리게한다. 그들은 더 큰 이미지가로드 될 때까지 기다렸다가 더 큰 이미지가로드가 완료되면 더 큰 이미지를 그 이미지로 바꿉니다. 나는 이것을 여러 블로그와 뉴스 웹 사이트에서 보았으며 아주 좋은 해결책 인 것 같다. 그러나 내 관심사는 이것이 우리 페이지의 SEO에 영향을 미칩니 까? 그렇다면 페이지의 SEO를 해치지 않으면 서 이런 종류의 행동을 구현할 수있는 방법이 있습니까?

Answer 1

SEO 용으로는 내 대답에 대한 googles 표준으로 가고 싶다고 가정 할 것입니다.

게으른로드는 대역폭을 높이는 데 도움이되며, SEO Google이 전체 페이지로드 시간으로 웹 사이트를 판단하지는 않습니다.

나는 당신이 당신의 심상을 압축하는 것을 추천하고 모두 다름 일 것이다.

사진이 있으면 20 장의 사진을로드 할 수 있고 더 많이로드하는 버튼이 있고 거기에서 게으른로드가 발생합니다. 이것은 귀하의 웹 사이트 절반을로드하는 큰 SEO 향상 일 것입니다.

Answer 2

이미지 최적화에 문제가 있음을 알고 있습니다. 이 문제를 해결하기 위해, 나는 다음과 같은 기술을 적용하는 것이 좋습니다

• 이 img 요소에 srcset 속성을 추가합니다. srcset 속성은 img 요소의 기능을 확장합니다. 브라우저가 srcset 속성을 지원하지 않으면 기본적으로 src 속성을 사용하여 이미지 파일을 가져옵니다. 브라우저가 srcset 속성을 지원하면 요청을 받기 전에 이미지 소스 및 조건 목록 (쉼표로 구분)을 지정할 수 있습니다. 결과적으로 장치의 매개 변수와 일치하는 이미지 만 다운로드되고 표시됩니다. 요소와 이미지에 응답하여
• 아트 방향포토. 장치의 특성에 따라 이미지를 변경하려면 (아트 방향 효과) 요소 picture을 사용하십시오. picture 요소는 장치의 다양한 특성 (크기, 해상도, 대상 등)에 따라 동일한 이미지의 여러 버전을 제공하는 선언적 솔루션을 지정합니다. 위의 예에서

<picture> 
 
    <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x"> 
 
    <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x"> 
 
    <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood"> 
 
</picture>

브라우저의 폭보다 작지 800 픽셀의 head.jpg 포맷 것이다 또는 헤드 2x.jpg이면 (장치의 화면 해상도에 따라 다름). 브라우저의 너비가 450에서 800 픽셀이면 형식이 입니다. head-small.jpg 또는 head-small-2x.jpg 장치의 해상도)가 적용됩니다.화면 너비가 450 픽셀보다 작고 하위 호환성이있는 장치에 대해서는 그림 요소가 지원되지 않습니다. 이 경우 브라우저는 img 요소를 사용하여 이미지를 화면에 표시합니다 (활성화되어 있어야 함).

• 상대 치수가 인 이미지. 최종 이미지 크기를 알 수 없으면 이미지 소스에 대한 픽셀 밀도 설명자를 선택하기가 어렵습니다. 이것은 특히 브라우저의 너비에 비례하여 늘어나고 크기에 따라 이미지를 변경하는 이미지를 나타냅니다. 이 경우 고정 된 이미지 크기 및 픽셀 밀도를 나타내지는 않습니다. 대신 너비에 핸들을 추가하여 처리중인 이미지의 크기를 결정할 수 있습니다. 이렇게하면 브라우저가 자동으로 최적의 픽셀 밀도를 계산하고로드 할 올바른 이미지를 선택할 수 있습니다.

  이 예

<img src="lighthouse-200.jpg" sizes="50vw" 
 
    srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w, 
 
      lighthouse-400.jpg 400w, lighthouse-800.jpg 800w, 
 
      lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w, 
 
      lighthouse-1800.jpg 1800w" alt="a lighthouse">

합니다 (viewport 적용시 크기 = "50vw") 뷰포트의 절반 너비를 취하는 이미지를 나타낸다 브라우저의 폭에 의존 논리적 픽셀과 물리적 픽셀의 비율. 결과적으로 브라우저는 모든 크기의 창에 올바르게 표시 될 이미지를 선택할 수 있습니다.

는 JPG-JPEG 형식의 이미지가 PNG보다 약 50 % 더 적은 부피가 있습니다. 따라서로드가 더 쉽고 빠릅니다. 이미지 형식을 변경하고 이미지의 크기를 변경하려면이 도구 Photo Editor Online을 사용할 수 있습니다. 이미지를 압축하려면이 도구를 사용하십시오. JPEG and PNG compressors.

가장 좋은 해결책은 Accelerated Mobile Pages AMP입니다. image 요소의 구현에서 srcset 속성도 사용된다는 점에 유의하십시오.

Original source ++ Use Cases and Requirements for Standardizing Responsive Images ++ Responsive images of MDN.

당신은 메타 프리로드 예와 현재 웹 페이지의 이미지를 사전로드하는 데 사용할 수 있습니다 <link rel="preload" href="//examples.com/images/img1.jpg" as="image"> 이 더 Preload of W3C ++ Preloading content with rel="preload" of Moz을 읽어보십시오.