2017.06.09SEO記事一覧

PageSpeed Insights・Test My Siteでサイトの表示速度をチェックして、サイトスピードを改善する方法

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

2018年1月18日、Googleのウェブマスター向け公式ブログにて、モバイル検索のランキング要素にページの読み込み速度が組み込まれるSpeed Update(スピード アップデート)を実装することが発表され、2018年7月9日に全てのユーザーに対して開始されました。

このアップデートは、極端に遅いサイトのみ対象となるアルゴリズムの変更ですが、サイトの表示速度が遅いことはユーザーの離脱が起こる可能性もあり、Web担当者にとっては頭を悩ませる問題のひとつかと思います。そこで今回は、サイトの表示速度の重要性や、表示速度を改善する具体的な方法についてご紹介します。

サイトの表示速度が重要な理由

表示速度とは、ユーザーがサイト(ページ)に訪問した際の表示時間(ページの読み込み速度や応答速度)のことを言います。

では、なぜ表示速度の改善が必要なのでしょうか。これには、大きく分けて3つの理由があります。

UX向上のため

例えば、あなたが検索行動を行っているとき、見たいページがなかなか表示されず、ロードが長いサイトをじっくり見たいと思うでしょうか?

俗に言う「重い」サイトは、内容の良し悪しに関わらず、ユーザーから嫌われます。そのサイト自体を目的としていない場合、離脱して同じ情報を扱う別のサイトに移動してしまうこともあるでしょう。

ユーザーにとってストレスなくサイトを閲覧してもらうために、サイトの表示速度は重要な要素のひとつです。

検索アルゴリズムに組み込まれているため

Googleは2010年4月9日(金)のウェブマスター向けブログにて、このように述べています。

You may have heard that here at Google we’re obsessed with speed, in our products and on the web. As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.

引用元:Using site speed in web search ranking
 
重要なところをざっくり直訳すると「検索ランキングのアルゴリズムで、サイトの表示速度を考慮しています。Googleはさまざまな方法を使って、サイトの速度を判断します。」と述べています。つまり、サイトの表示速度も検索ランキングを決める要素のひとつなのです。

また、最初に記載しましたが、2018年7月9日からは、モバイル検索のランキング要素にも組み込まれています。

では、ランキング要素としてなぜ組み込んだのでしょう。こちらも上記の引用内に答えがあります。

「私たちの内部調査では、サイトの応答が遅い場合、訪問者の滞在時間が短くなることがわかりました。ユーザーはスピードを重視しています。そのため、私たちはサイトの表示速度をアルゴリズムに組み込みました。」

Googleが掲げている理念のひとつに「ユーザーに焦点を絞れば、他のものはみな後からついてくる。」というものがありますが、Googleの検索アルゴリズムは、突き詰めれば「ユーザーのためになること」が基礎になっているのです。

売上に影響するため

実は、サイトの表示速度が遅いと売上が減少するという恐ろしいデータが出ています。

EC最大手Amazonによると、サイト表示が0.1秒遅くなると、売り上げが1%減少。1秒高速化すると10%の売上が向上するという公表が出ています。また、Googleからも、ページの反応が0.5秒遅くなるとアクセス数が20%低下するという調査結果が出ています。

他にもアメリカのAberdeen Group 2008年の調査によると、スピードが1秒遅くなるとページビューが11%、コンバージョンが7%、顧客満足度が16%低下するという調査結果が出ています。

上記のように、表示速度が遅くなることでアクセス数が低下・顧客満足度が低下・売上が減少、表示速度が速くなることでそれらが向上するということがわかります。

参考:2008年 Google調査、2006年 Amazon調査、2008年 米Aberdeen Group 調査
 
サイトの表示速度が速ければ、UX向上・SEO効果・さらに売上の向上と、いいことだらけです。表示速度が速くて困ることはありませんので、ご自身のサイトの表示速度が遅いと感じる方は、改善を行いましょう。

Speed Update(スピード アップデート)とモバイルファーストインデックスの違いは?

少し話がズレますが、表示速度に関係してよく質問をいただく、「Speed Update(スピード アップデート)」と「モバイルファーストインデックス」について解説します。

同じように感じられている方のいるのですが、実はこの2つは異なるアップデートです。
簡単に言うと下記のような違いがあります。

モバイルファーストインデックス インデックスの基準をPCからモバイルへ変更
スピードアップデート アルゴリズムにモバイルの表示速度を組み込む変更

つまり、モバイルファーストインデックスはインデックスに関するアップデートで、スピードアップデートはアルゴリズムのアップデートです。

また、Google Webmastersの公式Twitterでも関係がないアップデートとアナウンスしております。

Speed and mobile-first indexing: The mobile speed update in July is independent of mobile-first indexing. Fast sites are awesome for users, especially on mobile, since devices & connections there tend to be slower than with desktops.

引用元:Google Webmastersの公式Twitter

このように、どちらとも検索順位に関わるアップデートですが、アップデート種類が異なりますので、混同しないように注意しましょう。

では、具体的な改善方法をお話する前に、まずはどのように表示速度を調査するのか見ていきましょう。

サイトの表示速度を調査する方法

サイトの表示速度を調査できるツールはいくつかあります。その中でも、主要なGoogleが提供しているツールを3つご紹介します。

Test My Site

Test My Site

 
Test My Siteでは、モバイルページの表示速度を無料で調査することができます。3Gでのページの読み込み速度が表示されます。さらに、その下には、その読み込み速度による推定の離脱率が表示されます。

Test My Siteの調査結果

 
このツールの嬉しい機能の1つが、下記のように自社サイトが同じ業種内と比べてどれくらいの表示速度なのか比較してくれる機能です。自社サイトが他社に比べて勝っているのか劣っているのか気になる方にとってはありがたい機能です。

Test My Siteの競合との比較結果

 
また、「無料レポートを取得する」をクリックし、アドレスを入力すると、入力したアドレス宛にレポートを送付してくれます。

Test My Siteで無料レポートを取得する方法

Google Analytics

実は、Google Analyticsでも確認することができるのをご存知でしょうか?Google Analyticsにログインしていただき、「行動」内にある「サイトの速度」で確認することができます。

いくつか表示される項目がありますので、それぞれどんなことが分析できるのか見ていきましょう。

概要

Google Analyticsのサイト速度に関して①

サイト全体の読み込み時間の平均がグラフで表示されます。また、ブラウザごとの表示速度も確認することができます。

ページ速度

Google Analyticsのサイト速度に関して②

各ページの表示速度が把握できます。

また、各ページの表示速度がサイトの平均表示速度に比べて遅いのか、速いのかも合わせて表示されます。平均よりも遅い場合には右側に赤色グラフが、平均よりも速い場合には左側に緑色のグラフが表示されます。

速度についての提案

Google Analyticsのサイト速度に関して①

各ページの平均読み込み時間と改善提案が表示されます。

この「PageSpeed の提案」に表示されている改善をクリックすると自動で、PageSpeed Insightsが立ち上がるようになっており、改善のポイントを表示してくれます。

カスタム速度

通常何のデータも表示されていませんが、分析したい時間を独自に設定しトラッキングすることで、分析したいデータを表示させることができます。

参考サイト:カスタム速度

PageSpeed Insights

PageSpeed Insights

3つ目が、PageSpeed Insightsです。こちらもGoogleが提供している無料のツールになります。

 
「ウェブページのURLを入力」部分に調査したいURLを入力すると、下記のような画面が出てきます。

PageSpeed Insightsの調査結果

2018年11月14日より、PageSpeed Insightsの分析エンジンがLighthouseを利用することになったため、今までのPageSpeed Insightsでは、分析できなかったことも結果として表示されるようになりました。

引用元:PageSpeed Insights、Lighthouse の使用を開始しました

そこで、まずは簡単にどのようなことがページに記載されているのか見ていきます。

ラボデータ

Lighthouse を使用してページを取得・分析したパフォーマンス指標が計算され、その指標が0~100のスコアとして表示されます。

0~49(赤色) 遅い(修正が必要)
50~89(黄色) 平均(修正を考慮)
90~100(緑色) 速い(修正の必要なし)

フィールド データ

First Contentful Paint、First Input Delay などのページのパフォーマンス指標が表示されます。しかし、一部のデータは取得されない、ラボデータと異なる場合があるみたいなので、注意しましょう。

必ずしもすべてのサイトに表示可能なフィールド データがあるとは限りません。データは、毎日更新される Chrome ユーザー エクスペリエンス レポートを利用し、過去 28 日間かけて収集されます。実際のネットワークの状態や Chrome ユーザーが使用する端末は広範囲に及ぶため、ここでの指標は、ラボデータ欄の指標とは異なることがありますのでご注意ください。

引用元:PageSpeed Insights、Lighthouse の使用を開始しました

改善できる項目

改善すべき項目とその項目を改善することにより、どれくらいの時間が短縮できるのかが表示されます。
さらに、各項目をクリックすると項目によっては、改善すべき画像やcssなども表示されます。

診断

アプリケーションのパフォーマンスに関して、おすすめの設定がどれくらいできているかの情報が表示されます。

合格した監査

既に改善ができており、追加での改善の必要がない項目が表示されます。

サイトの表示速度の改善方法

では、把握できた改善すべきポイントはどのように改善していくのがご紹介します。

今回は、「Test My Site」と「PageSpeed Insights」から改善すべき内容として表示される内容の一部をご紹介します。

  1. スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
  2. サーバの応答時間を短縮する
  3. ブラウザのキャッシュを活用する
  4. 画像を最適化する
  5. 圧縮を有効にする
  6. JavaScriptを縮小する
  7. CSSを縮小する
  8. HTMLを縮小する
  9. リンク先ページのリダイレクトを使用しない
  10. 表示可能コンテンツの優先順位を決定する

スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する

CSSの配信を最適化する

ウェブページのスタイルを指定するための言語がCSSです。この.cssファイルが複数のある場合、できるだけひとつの内容にまとめてください。

レンダリングを妨げるJavaScriptを最適化する

「async属性」と「defer属性」を使用してレンタリングを妨げないようにします。

外部ファイルを読み込む間、レンダリングが途中で中断され遅延が発生する問題をは、上記の施策によって解決します。

サーバの応答時間を短縮する

PageSpeed Insightsでは、サーバの応答時間が0.2秒以上であるとこの項目の修正対象となります。

この解決方法としてgoogleが推奨している方法は下記です。

既存のパフォーマンスやデータを収集して調査します。データがない場合は、自動的なウェブ アプリケーション監視ソリューション使用したり(ほとんどのプラットフォームでホストされたオープンソース版が提供されています)、カスタムな計測プログラムを追加したりします。

パフォーマンス上の最大のボトルネックを特定して修正します。一般的なウェブ フレームワークやコンテンツ管理プラットフォームを使用している場合は、パフォーマンス最適化のベスト プラクティスに関するドキュメントを確認してください。今後のパフォーマンスの問題に備えて、監視と警戒を続けます。

引用元:PageSpeed Insights サーバーの応答時間を改善する
 
なお、WordPressを使用している場合、プラグインが多いと重くなる原因となります。そのため、使用していないプラグインは停止、もしくは削除を行いましょう。

また、PHPのバージョンが古い場合にはバージョンアップするのも有効な手段です。

ブラウザのキャッシュを活用する

現在の.htaccessファイルに下記の記述を追加するだけで解決です。

#—-ここから—-
ExpiresActive On
ExpiresDefault “access plus 1 day”
ExpiresByType image/gif “access plus 7 days”
ExpiresByType image/jpeg “access plus 7 days”
ExpiresByType image/png “access plus 7 days”
ExpiresByType text/css “access plus 7 days”
ExpiresByType application/x-javascript “access plus 7 days”
ExpiresByType application/javascript “access plus 7 days”
ExpiresByType application/rss+xml “modification plus 30 minutes”
ExpiresByType text/html “modification plus 30 minutes”
#—-ここまで—-

これにより、一度閲覧したファイルを保存して使い回す期間をファイルの種類によって設定することが可能になります。

画像を最適化する

まずは画像の枚数を減らすことが理想です。例えば、テキストで良いのにも関わらず画像になっている部分は、画像内容をテキストにしましょう。

次に、残す必要がある画像を適切な大きさに変更しましょう。無駄に画像が大きい場合は、これにより表示速度を遅くしている可能性があります。

最後に、画像を圧縮してファイルの軽量化をしましょう。これを行うに際には下記ツールを使用すると便利です。

なお、こちらのツールは非可逆圧縮ですので、圧縮ファイルを元に戻す事が不可能です。使用する際は、元データのバックアップをとってから行いましょう。

圧縮を有効にする

下記を現在の.htaccessファイルに下記の記述を追加するだけで解決です。

#—-ここから—-
AddOutputFilterByType DEFLATE text/html text/css text/javascript application/x-javascript text/plain text/xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
DeflateMemLevel 8
#—-ここまで—-

最初の「AddOutputFilterByType」から「text/xml」までは1行で記載して下さい。

これにより、ホームページの内容や画像を表示する際、ブラウザとWebサーバの間で毎回この圧縮を行う事で表示速度を改善することができます。

JavaScriptを縮小する、CSSを縮小する、HTMLを縮小する

JavaScriptとCSSのコード量を少なくすることで、読み込み量が少なくなるため表示速度を速くすることができます。

なお、下記ツールを使用することで簡単に圧縮することが可能です。

リンク先ページのリダイレクトを使用しない

googleが推奨している方法は下記です。

Google の推奨事項に従ってレスポンシブなウェブ デザインを使用すると、必然的にサイトでリダイレクトを避けることができます。

サイトでどうしてもリダイレクトが必要な場合は、次の両方を行う必要があります。
HTTPリダイレクトを使用して、モバイルユーザーエージェントを持つユーザーを、モバイルの対応するURLに中間リダイレクトなしで直接送信します。
パソコン向けのページに<link rel=”alternate”>マークアップを含めて、モバイルの対応するURLを指定し、Googlebotがモバイルページを検出できるようにします。

引用元:PageSpeed Insights リンク先ページでリダイレクトを使用しない

表示可能コンテンツの優先順位を決定する

googleが推奨している方法は下記です。

スクロールせずに見える範囲の重要なコンテンツを最初に読み込むようにHTMLを構成する

ページの主要なコンテンツを最初に読み込みます。サーバーからの最初のレスポンスでページの重要な部分の表示に必要なデータがすぐに送信され、残りは後で送信されるように、ページを構成します。つまり、コンテンツのスクロールせずに見える範囲のスタイルを指定したインライン部分と、遅れてもよい部分の2つにCSSを分割する必要があります。

読み込みを速くするためにサイトを再構成する方法として、次の例を検討してください。

HTMLでメインのコンテンツを読み込む前にサードパーティのウィジェットを読み込んでいる場合は、メインのコンテンツを最初に読み込むように順序を変更します。
サイトでナビゲーション用サイドバーと記事の2列で構成されたデザインを使用していて、HTMLで記事より前にサイドバーを読み込んでいる場合は、記事を最初に読み込むことを検討します。

リソースで使用されるデータの量を減らす

さまざまな端末に適合し、重要なコンテンツを先に読み込むようにサイトを設計し直したら、次の手法を使って、ページの表示に必要なデータの量を削減してください:
リソースを圧縮(ミニファイ)する: HTML、CSS、JavaScript は、不要な空白やコメントを削除して圧縮することができます。リソース内の変数名を変更するツールを使用すると、さらに最適化できる場合があります。
可能な場合は画像の代わりに CSS の使用を検討します。
圧縮を有効にします。

引用元:スクロールせずに見える範囲のコンテンツのサイズを削減する

WordPressの場合の改善方法

なお、上記10個の解決策の他、WordPressなのであれば下記のプラグインを入れることで、表示速度を速くすることも可能です。

  1. WP Super Cache
  2. WP Fastest Cache

まとめ

いかがでしたでしょうか。
まずはこの記事をもとに、ご自身で改善してみてください。

そして、わからないこと、できないことがあれば、ぜひお気軽にお問い合せいただければ幸いです。
 

  • このエントリーをはてなブックマークに追加
The following two tabs change content below.
digital-marketing

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。