2017.06.09SEO記事一覧

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

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

2017年アメリカのサンノゼで開催されたSMX West 2017でGoogleのGary Illyesが、モバイルファーストインデックスでは、サイトの表示速度をランキング要素として外すことを撤回し、話題になりました。

参考:sengineland Attend SMX West
 
サイトの表示速度が遅いとユーザーの離脱が起こる可能性もあり、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はさまざまな方法を使って、サイトの速度を判断します。」と述べています。つまり、サイトの表示速度も検索ランキングを決める要素のひとつなのです。

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

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

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効果・さらに売上の向上と、いいことだらけです。表示速度が速くて困ることはありませんので、ご自身のサイトの表示速度が遅いと感じる方は、改善を行いましょう。

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

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

googleが無料で提供している「PageSpeed Insights」というツールを使えば、簡単に調査することができます。

「ウェブページのURLを入力」部分に調査したいURLを入力すると、下記のように100点満点中何点かという結果が出てきます。

得点が高いのは表示速度が早いということであり、逆に得点が低いのは表示速度が遅いということです。こちらのツールはPCとモバイルそれぞれの数値がでてきます。

目指すべき数値は、80点~85点です。例で出しているサイトは54点なので、まだまだ改善が必要ということですね。

また、得点の下には下記のような3段階評価があります。

修正が必要
黄色 修正を考慮
修正の必要なし

さらに、赤・黄色・緑の欄の下に下記10個の改善項目が出てきます。

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

上記を改善することにより、表示速度が速くなります。

PageSpeed Insightsでサイトの表示速度を改善する必要がある場合、それぞれの課題に対して下記の方法で解決していきましょう。

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

スクロールせずに見えるコンテンツのレンダリングをブロックしている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

まとめ

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

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

【SEOコンサルタント監修】
2017年 最新版 SEOセルフチェックリスト 無料プレゼント!

年間何百ものWebサイトを確認している当社でも、内部施策SEOが完璧にできているというサイトを見たことがありません。
内部施策SEOに漏れがあるということは、自分でできることをやっていないということであり、それだけで機会損失を発生させている可能性があります。

本書では、ご自身でセルフチェックと修正ができるよう、Googleが推奨する内部施策SEOのうち、重要なポイントをかいつまんでご紹介しております。

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

digital-marketing

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