이 fontawesome의 설명을 삭제하여 점수 상승

자바 스크립트에서 fontawesome 아이콘을로드합니다.

이것이 꽤 스코어에 악영향을 주었던 것 같다.

<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0+hogehogeWMzSS+hogehoge/5++hogehoge" crossorigin="anonymous"></script>

SVG 이미지를 인라인으로 로드하도록 변경

실제로 삭제가 아닌 SVG 이미지를 인라인으로 가져 오도록 변경했습니다.

코드는 이쪽을 참고로 했다.
htps : // 여기에서 rwal. 이 m / p / d1 vplg / em m ぢ ん g an d sty

SVG 인라인 읽기를 application_helper에 구현

def embedded_svg(filename, options = {})
  file = File.read(Rails.root.join('app', 'assets', 'images', filename))
  doc = Nokogiri::HTML::DocumentFragment.parse file
  svg = doc.at_css 'svg'
  svg['class'] = options[:class] if options[:class].present?
  doc.to_html.html_safe
end

아이콘 불러오기

 <%= embedded_svg("common/font-awesome-icons/check-square.svg", class: 'check-square') %>

fontawesome 로딩 속도

네트워크 탭에서 보는 한 전혀 부하는 높게 보이지 않는다.
230ms로 읽기가 완료되고 있기 때문에 스코어에 큰 영향을 주고 있지 않다.

LCP와 TTI

TTI와 LCP는 네트워크 탭을 봐도 모르는 실제 렌더링이 완료된 타이밍
유저가 조작 가능하게 된 상태와 Google이 판단한 타이밍이 스코어가 되기 때문이다.

특히 후자의 TTI는 상세가 불분명하다.

그러나 이번 점수가 오른 곳을 보면 글꼴과 아이콘의 로드 완료 타이밍까지 보고 있는 것으로 나타났다.
또는 font awesome js 실행 완료와 함께 아이콘이 표시되기 때문에
이 js가 실행되지 않으면 사용자는 아무것도 조작 가능하게 되지 않는다고 Google이 판단했을 가능성이 높다.

fontawesome을 지우면 스코어 폭등했다.

TTI와 LCP 점수가 크게 개선.

변경 전

변경 후