【Search Console】Google スピードアップデート実施から4ヶ月たった今、見直したいポイント

2018.12.07　Posted by yamaguchi

今回お話しするのは、以前ご紹介した弊社のブログ「ページ表示速度がモバイル検索のランキング決定要因に！2018年7月にスピードアップデートを実施」の中でご紹介した記事の続編です。

前回内容を簡単にお話すると「著しく表示が遅いホームページは、モバイル検索のランキングでマイナスの影響がある」というペナルティに関するものでした。

2018年の1月にGoogleよりこの発表があり、2018年7月にはスピードアップデートを実施されるといった内容でしたが、皆様の対策はいかがでしょうか。

今回は7月のアップデートでどういう変化があったのか、チェックしてみます。

1 7月のアップデートで変わったこと
2 パフォーマンス改善のポイント
3 画像のパフォーマンスを上げよう
4 JavaScript
5 フォント
6 まとめ

7月のアップデートで変わったこと

7月のアップデートで変わったことは以下の4点です。

読み込まれる画像のファイルサイズが「約25％」削減
画像が読み込まれる回数が「約20％強」削減
画像遅延読み込みで節約できるファイルサイズは「少しだけ」減った
画像最適化で節約できるファイルサイズは「約40％ちかく」も減った

つまり、多くのホームページで画像に関する変化が起き、読み込まれるデータ量が少なくなった変わりに、表示速度が早くなる方向で調整されているといえます。

パフォーマンス改善のポイント

では、自分のホームページにおけるパフォーマンス改善のポイントを考えていきましょう。

パフォーマンス改善の優先対象は画像とJS、フォントの3つです。

優先度としては、

画像
JavaScript
フォント

ちなみにモバイルページで1ページ当たりのデータ量が多いリソースは画像 (約 500 KB)、JavaScript (約 380 KB)、フォント (約 80 KB)となっており、この順番に評価されていくようです。（HTTP Archive 調べ）

画像のパフォーマンスを上げよう

画像のパフォーマンスを上げて、アップデートに合わせた最適化をしていきましょう。

画像を最適化する手段は、「適切なフォーマット」「適切な圧縮」「適切なサイズ・密集度」「必要なときだけ読み込む (Lazy-load)」の4つがあります。

「適切なフォーマット」はアニメーション GIFはサイズが大きいので、MPEG-4 (MP4) に変換する、Google が開発した、品質を保ったまま高圧縮できる画像フォーマットWebPを使うといった、適したフォーマットを使いサイズが大きくならないようにするというものです。

画像は必ず圧縮するには「データを損失しないLosslessで圧縮する」か、「圧縮率の高いLossy圧縮を利用する」の2つの方法があります。

画像のサイズは、デスクトップ用、モバイル用といったデバイスのスクリーンサイズに合わせた大きさの画像を使うと、データの転送量とCPUを浪費せずに済みます。3種類から5種類程度のサイズを用意しておくとスムーズです。

最後にLazy Loading/Lazyloadですがこれは、必要になるまで読み込みを遅らせる技術で、画像やJavaScriptにも利用できます。

すぐに使わないリソースのダウンロードをやめさせることで、データ転送量を抑えられます。

JavaScript

JavaScriptは画像、フォントと並んで、ウェブ上でダウンロードされるデータ量の上位に入るリソースです。これを抑えると効果的です。

JavaScriptでは、Code Splitting、Preload、利用しない CSS/JS の調査といった施策が考えらえます。

Code Splittingは文字通り、コードの分割で必要な時にデータが読み込まれるようにするもので、初期表示にかかる時間などの削減ができます。

Preloadはコンテンツを先に読みこむように命令するHTMLタグ内の要素です。これを入れると、ページの最初のレンダリングがブロックされにくくなり、パフォーマンスが上がります。

上記に加え、利用しない CSS/JS の調査を行い、不要なコードを削減することでページのサイズを圧縮しましょう。

JavaScriptが使われる場がますます増えてきているので、JavaScriptの高速化は急務です。

フォント

もともとブラウザにインストールされているフォントの呼び出しが行われて入れば問題ありません。しかしWebサイト内で外部からの呼び出しが必要なフォントを使っている場合は、パフォーマンスが下がる要因となります。ブラウザがウェブフォントを読み込むまで、文字が現れないFOLTという現象が起きてしまうので、UX的にもよくありません。Flash of Unstyled Text (FOUT) を実装し、ウェブフォントのダウンロード完了まで、ブラウザ内にあるフォントで代替する対策を行っておきましょう。