SMARTCAMP Engineer Blog

スマートキャンプ株式会社(SMARTCAMP Co., Ltd.)のエンジニアブログです。業務で取り入れた新しい技術や試行錯誤を知見として共有していきます。

LighthouseのPerformance項目で40点上げた方法

スマートキャンプのエンジニア井上です!

多くの開発要望がある中で、エンジニアのみでインパクトのある改善をするときにによくあげられるのがサイトの パフォーマンス改善 かと思います。

今回はサイトのスピート計測ツールである、 Google PageSpeed Insightsで使用されているLighthouseのスコア を参考にして、実際に効果があった施策をご紹介します!

Google PageSpeed Insightsとは

Googleのスピード計測ツールです。

後述するLighthouseのPerformanceをもとにページごとの評価を採点しており評価項目としては下記の項目があります。

  • コンテンツの初回ペイント
  • 速度インデックス
  • インタラクティブになるまでの時間
  • 意味のあるコンテンツの初回ペイント
  • CPU の初回アイドル
  • 最大推定 FID

developers.google.com

Lighthouseとは

Google PageSpeed Insight で分析エンジンとして採用されている計測ツールです。

LighthouseのPerformance項目が今回見ていくポイントとなります。

chrome.google.com

Performance項目改善の進め方

ローカルでは本番環境と違い、テキストやHTTP2対応などがされていないなどの差分から下記のような問題が起こります。

  • Pefomanceの点数が違う
  • Pefomanceの指摘点が違う

なので、基本的には *本番環境で指摘されているもの** を対応し、ローカルではLighthouseでその指摘事項が解消されているかなどを確認しながら進めていきます。

ただ、単純に項目通りやれば改善するわけではなく、改善するものもあればしないものもあります。

あくまで指摘事項は改善する可能性があることを指摘しているので、あくまで参考として認識しておきましょう。

実際の対策

レンダリングブロック対応

指摘内容

レンダリングブロックはサイトが表示される際に、JSやCSSの読み込みによってレンダリングを待つ状態になり、コンテンツの表示が遅くなる現象です。

主に JSなどがhead部分で読み込まれたり、不要なCSSが多い とこの現象が起こります

対策

JSの対策としては簡単でbodyのあとなどでJSを読み込むようにするのみです。

CSSの対応としては少し難しく対策として不要なCSSをなくす、または初期表示はFirstViewで使用するCSSのみを読み込むようにするなどが考えられます。

他にもloadCSSを使用してレンダリングブロックを回避する例もあるようです。(自分はやったことないですが。。。)

全ブラウザ対応!preload で CSS を非同期で読み込み高速化

画像圧縮対応

指摘内容

単純で画像サイズが大きすぎると読み込みが遅くなり、この指摘がでます。

対策

すべての画像圧縮する処理・バッチを作るなどの対応もありますが、検証としてやるのであればTinyPingなどでWEB上で画像圧縮してアップロードするなどがおすすめです。

tinypng.com

オフスクリーン画像の遅延読み込み

指摘内容

FirstViewなどで表示されていない画像の読み込みによって、コンテンツ表示が遅くなることがあります。

対策

対策としてはGoogleが推奨しているIntersectionObserver APIを使ったlazyload対応があります。

IntersectionObserver APIとは

特定のDOM要素が画面内に入っているかどうか、さらにその位置も取得することができるAPIです。

実際の実装イメージ

HTML側

<img src='' data-src=''画像のURL'  is-lazyload/>

JS側

var observer, targetImgs;

// 画像が画面ないに入ったらdata-src属性をsrc属性にセットする
observer = new IntersectionObserver(function(images) {
   return images.forEach(function(image) {
    if (image.isIntersecting) {
      image.target.src = image.target.dataset.src;
       return observer.unobserve(image.target);
    }
  });
});

// lazyload対象の画像を取ってくる
targetImgs = document.querySelectorAll("img[is-lazyload]");

// lazyload対象の画像に処理を設定
targetImgs.forEach(function(targetImg) {
  return observer.observe(targetImg);
});

不要なJS・CSS削除

指摘内容

JS・CSSなどで使用されていないものが存在する場合に指摘されます。

例としては必要なmodule以外もすべて読み混んでる場合などになります。

対策

こちらはChromeDeveloperConsoleのcovelegeなどで、 使用されているJS・CSSを確認しながらボトルネックを探し ていき削除していく地道な作業が必要になります。

必須のドメインへの事前接続

指摘内容

外部のJSやCSSなどが常に読み込んでるものが多く、その名前解決がキャッシュされていない状態で指摘されます。

対策

Resource Hintsにより事前の名前解決やリソース自体のキャッシュ対応を行います。

Resource Hintsとは

Resource Hintsはlink要素を利用したリソース先読みのための仕組みです。

事前に取得すべきリソースを明示することで、先読みやキャッシュが可能になります。

dns-prefetch

DNSのキャッシュ行い名前解決の時間を削減します。

<link rel="dns-prefetch" href="//example.com">

preconnect

DNS の解決に加えて TCP の接続までを確立しておき、すぐにリクエストを行える状態にします。

<link rel="preconnect" href="//example.com">

prefetch

主に静的リソースのキャッシュに使用されます。

<link rel="prefetch" href="//example.js">

まとめ

今回はLighthouseで指摘されていた項目の対応内容に関して紹介しました。

この内容でよりよいPerformance改善に早くたどり着ければと思います。