株式会社シーエムエー

053-459-1510

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

ホームページ制作 SEO対策 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • このエントリーをはてなブックマークに追加

こんにちは。クリエイティブプランナーの深谷です。

SEO対策に力を入れているお客様より、
最近Core Web Vitals(コアウェブバイタル)や、
サイトスピードについてご相談をいただくケースが増えてまいりました。

そこで今回、デザイングループの山本と一緒に、
Google PageSpeed Insights(ページスピードインサイト)を使って、
ウェブページの読み込み速度を改善したら、何点になるのかチャレンジしてみました。

グーグルページスピードインサイト

Google PageSpeed Insights(ページスピードインサイト)とは?

ページスピードインサイト

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

Google PageSpeed Insights(ページスピードインサイト)とは、
ウェブページの読み込み速度をスコア測定(0~100)してくれるツールです。

モバイル、パソコンに対応しており、
URLを入力するだけでウェブサイトのページ読み込み速度や改善ポイントが分析されます。

スコア評価

  • Good 90~100 緑(速い)
  • Medium 50~89 オレンジ(平均)
  • Low 0~49 赤(遅い)

改善前のスコア測定

モバイル:38点 Low

モバイルの改善前

パソコン:78点 Medium

パソコンの改善前

Google PageSpeed Insights(ページスピードインサイト)の実施内容

(1)画像ファイルの遅延読み込み

画像の遅延読み込みをする場合、
Google Chrome、Microsoft Edgeであれば、画像要素にloading属性をつけることにより対応が可能です。

その他のブラウザで画像の遅延読み込みを実施したい場合、
JavaScriptのプラグインを設置する必要があります。

代表的なプラグインに「Lazysize.js」があり、JavaScriptファイルを読み込み、
画像要素にクラス名「lazyload」を追加すれば設置完了です。

<script src="lazysizes.js"></script>
<img src="画像のファイルパス" loading="lazy" class="lazyload">

(2)画像ファイルのWebP対応

画像の次世代フォーマットであるWebPに対応することにより読み込み速度を高速にすることが期待できます。
PNGファイルをWebPに変換するには大きく2種類の方法があります。

  • コンパイルサイトで画像を変換する 

    技術的なハードルは低く誰でも変換作業ができるが、効率が悪い

  •  タスクランナー(gulp)を使用して変換する 

    PNG画像を新しく作ったり、修正をしたら即時WebPに変換できるため効率は非常に良いが、
    技術的に学習することが多くチーム内で使うかどうか取り決める必要がある

    • ■WebP未対応ブラウザへの記述方法
      <picture><source type="image/webp" srcset="〇〇.webp"><img src="〇〇.png"></picture>

      (3)YouTubeのiframe

      YouTube動画を埋め込むためのiframeが表示領域にない場合でも動画の読み込みが行われ、
      読み込み速度に影響する場合があります。

      JavaScriptでスクロール位置がiframeの位置に達した時に読み込みを開始するような記述が必要となります。

      クラス名「youtube_frame」が着いたiframe要素のsrc属性をdata-srcに変更しておくことでページロード時の読み込みをさせないでおいて、スクロールしたら、元のiframe要素を削除して新たなiframeを生成するスクリプトです。

      $youtube_target = $('.youtube_frame');
      $(window).on('scroll load',function(){
          const scPos = $(window).height() * 0.9 + $(this).scrollTop();
          $youtube_target.each(function () {
              const conPos = $(this).offset();
              const $iframe = $(this).children('iframe');
              const url = $iframe.attr('data-src');
              if(url !== undefined){
              const id = url.match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
              if (scPos > conPos.top) {
                  $iframe.remove();
                  $(this).append('ここにYouTubeのiframeの記述が入ります');
              }
              }
          });
      });
      

      改善後のスコア測定

      モバイル:84点 Medium(改善前より46点アップ)

      モバイル改善後

      パソコン:100点 Good(改善前より22点アップ)

      パソコン改善後

      まとめ

      今回、画像ファイルの読み込みや、画像フォーマットの変更、YouTubeの読み込み方法を改善したら、
      モバイル84点、パソコンは100点を測定することができました。

      この改善がどれだけSEO対策に効果を発揮するか、今後分析していく予定です。

      今回の作業にあたっては、

      ・WebP画像の書き出し方法や振り分けの設定
      ・CSSやJavaScriptの遅延読み込みや読み込み順序の変更
      ・YouTubeなどのiframe要素を遅延読み込み

      など個別で設定をおこないました。

      複雑なデザインやレイアウトではどこまで対応するのか、
      今後、弊社でもテンプレートを改善しながら、
      ウェブページの読み込み速度について取り組んでまいりたいと思います。

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2021/07/08初心者の私にもできた。自作パソコンの組み立てに挑戦してみた!

  • posted on 2021/06/16Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

  • posted on 2019/03/05デジタル一眼レフカメラで撮影した写真をタブレット(iPad)にリモート表示してみた!

Top