Rails를 사용한 이미지 읽기 지연

이미지 지연 읽기

지연 읽기 기술은 웹 사이트에 표시된 이미지를 한 번에 읽지 않고 필요에 따라 필요한 이미지만 읽는 것을 말한다.불필요한 이미지 읽기를 지연시키고 이미지 이외의 CSS 또는 JS 파일을 먼저 읽습니다.이렇게 하면 디스플레이 속도를 가속화할 수 있다.

의 목적

lazysizes를 사용하여 그림을 읽는 지연을 통해 사이트의 디스플레이 속도를 높인다
이번에 사용한 것은 레이지 사이즈입니다.

lazysizes

lazysizes 가져오기

넣다

app/views/layouts/application.html.erb

<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js' %>

사용법

지연시키려는 탭에classlazyload를 붙이면 그림 읽기가 지연되고, 읽으려면class가 lazyload에서 lazyloaded로 변경됩니다.data-src 읽기 지연을 위한 이미지 경로 입력

<img data-src="画像パス" class="lazyload">

여기서 railsimage_tag처럼 사용하기 위해 helper 만들기

helper 만들기

app/helpers/application_helper.rb

    def lazysizes_image_tag(source, options={})
      options['data-src'] = source
      if options[:class].blank?
        options[:class] = "lazyload"
      else
        options[:class] = "lazyload #{options[:class]}"
      end
       image_tag("画像を読み込んでない時の軽い画像", options) + ("<noscript>#{image_tag(source, options)}</noscript>").html_safe
    end

SEO 대책

추가<noscript>는 클론이 스크롤되지 않기 때문에 = 이미지를 읽을 수 없기 때문에 대상 이미지가 인덱스되지 않습니다.
따라서 <noscript>에 <img>를 색인 대상으로 추가한다.

호출

<%= lazysizes_image_tag '画像パス' %>

이렇게 하면 그림 읽는 것을 지연시킬 수 있다.

참고 문장

jQueryLazylad 플러그인으로 읽기 지연
lazysizes의 사용 방법을 통해 이미지의 지연 읽기와 스펀지형 이미지의 기본을 학습한다
Google은 noscript의 내용을 무시하지만 이미지 색인 예외