ページ表示速度の測定とウェブサイト高速化

2017年7月6日

ページの読み込み速度は、Googleの検索順位を決定付ける指標の一つとされています。また、ページの読み込み時間を短縮することでユーザビリティが向上します。
結果的に訪問者が閲覧しやすいサイトになりますので「PageSpeed Insights」を使ってチェックしてみましょう。




ページの表示が遅い場合のデメリット

Googleは検索順位アルゴリズムの1つにページスピードを加えています。
ただし、1%以下のクエリに影響があるという事ですので、大きなウェイトではありません。
Using site speed in web search ranking


回線速度の遅い環境を考慮

ウェブサイトの訪問者は必要なコンテンツを素早く探したい為、「コンテンツがロードされるまで長く待つことができない」事をGoogleは認識しています。


訪問者によってはモバイルデバイス、WiFi接続のような低速な接続環境で大きなファイルを扱う事も想定される為、ページ表示速度はウェブサイトを改善する際に優先度の高い項目となります。


結果的に、2種類の同品質のウェブサイトがあった場合、Googleは表示スピードの速いウェブサイトを好みます。
一般的には、表示スピードは3秒以下が推奨されています。


「消費者の47%はウェブページが2秒以下で表示される事を望む – Sean Work @ Kissmetrics.com」

47% of consumers expect a web page to load in 2 seconds or less.


代表的な例としては、WordPressプラグインによってページロード時間が遅くなると、ページロード時間を最適化した他の競合サイトと比較して不利となります。
順位にも若干影響があり、インデックスされたページであっても訪問される機会は減るかもしれません。


加えて、ウェブサイトがECサイトの場合、販売にも影響があるでしょう。
ページ表示時間が数秒増えるだけでも次のような影響があると言われています。


ECサイト上におけるページ表示速度

「ロードに3秒以上かかるウェブサイトでは、40%の人々が離脱する – Sean Work @ Kissmetrics.com」

40% of people abandon a website that takes more than 3 seconds to load.


ウェブサイトや商品販売ページの表示速度はChromeのデベロッパーツールでも確認できます。


更に、ページスピードはコンバージョンにも深く関係するようです。

「1秒のページスピードの遅延で、コンバージョンの7%減少する結果に – Sean Work @ Kissmetrics.com」

A 1 second delay in page response can result in a 7% reduction in conversions.


モバイルサイト上におけるページ表示時間と直帰率の関係

think with Googleの調査データによると、モバイルページの表示時間が1秒から3秒になると直帰率が32%増え、1秒から5秒では直帰率が90%になるそうです。今やGoogle検索の半数以上はモバイル検索と言われていますので、モバイル向けの表示速度を完全に無視するというわけにはいかなくなってくるでしょう。





ページ表示スピードの改善方法

いくつかの簡単な改善方法をご紹介します。
GoogleのPage Speed Insightsでチェックするとより詳しく表示されます。


このブログもWordPressを使用していますが、ページ数が多くなるにつれて負荷が高くなり、ページの表示スピードが遅くなり、時には表示すらされない場合もありました。


もちろんキャッシュ関連のプラグインも試しましたが、相性の問題が非常に多く、WordPressをバージョンアップした瞬間に真っ白になってしまった事もあり不安定な部分が気にかかりましたので途中から外しました。


最終的にはサーバーのスペックを上げたり、プラグインを外したりする事で大分改善してきました。
以下は高速化の方法のうち代表的なものです。


  • 共有サーバーではなく専用サーバーを使用
  • リソースを消費するプラグインを外す(Google XML Sitemap等。)
    ※WordPressであればP3 (Plugin Performance Profiler)でチェックできます。



ページ表示速度の改善は特にモバイルユーザー向けには必須?

スマホで表示した際に、極端に遅いウェブサイトはスマホユーザーからすると使いにくいウェブサイトと認識されます。
現在の所、モバイル検索においてページスピードはデスクトップ検索と比べて特別なランキングファクターではありません。


PCサイトとモバイルサイトのページ読み込み速度

「モバイルサイトとPCサイトを比べた場合、モバイルサイトはページの読み込み速度は重要視されているのか?」といった質問に対して、Matt Cutts氏が回答しています。



全て同じ条件でページスピードが遅い場合、サイトの順位は他と比較して低くなる可能性はあります。
ただし、特に何秒以内にしなければならないといった事はここでは発言していません。というのは、サイトそれぞれ役割があり、異なるからです。
他のサイトを見た上で、明らかにスピードが遅いと感じるようであれば、改善させる必要はあります。


モバイルサイトだからといってPCサイト以上にページスピードが重要という事ではありません。重要なことは閲覧者がどんなデバイスであっても、利用しやすいように配慮する事です。


Googleはモバイル検索に関してはモバイルフレンドリサイトを優遇した順位付けを行っています。
詳しくは、「Googleモバイル検索 モバイルユーザビリティが順位要素に」で解説しています。
現時点ではモバイルフレンドリなサイトの評価軸にページスピードは含まれていませんが、今後予定されていモバイルファーストインデックスの時点では、モバイルのページ表示速度をランキング要因に含めることをGoogleは示唆しています。
モバイルサイトの読み込み速度とパフォーマンスを確認するには、Googleが提供のツールが便利です。
モバイルサイトの読み込み速度とパフォーマンスをテストする – Google


下の入力枠にURLを入力し、キーボードのEnterを押下します。

モバイルサイトの速度をテスト

すると、ページの読み込み時間と推定離脱率がレポートされます。次のような条件で時間を計測しているようです。

“3G 接続の Moto G4 端末で Chrome を使って読み込んだ際、ページ上の可視コンテンツが表示されるまでにかかる時間を指します。”

speed-performance

右側の青丸の箇所をクリックしていくと同じ業種とのパフォーマンスを比較した結果のレポートが表示されます。

同業種比較

右側の青丸を更にクリックしてくと、修正した場合に短縮できる秒数が表示されます。

修正アドバイス

「優先度の高い修正点を確認」をクリックすると次のようにアドバイスが表示されます。

修正アドバイス



PageSpeed Insightsの項目

「PageSpeed Insights」は、Googleが社内のWebサイトの表示速度向上のため使用していたツールのようです。
かなり高度な設定も含まれていますので、自分ではどうしようもないものもあります。「PageSpeed Insights」で表示される内容のうち修正可能な項目に関しては対策したほうが良いでしょう。


当サイトでは重要な商品ページと一部のブログ部分に関して「PageSpeed Insights」を使いページ読み込みスピードの高速化を行いました。
商品ページ部分はEC-Cube、ブログ部分はWordPressです。サーバー環境にも依存しますが、どちらも工夫することで読み込み速度を向上させる事ができます。
以下の項目はPageSpeed Insightsでチェックされる項目です。




高速化の項目一覧

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

非常に多くの項目がありますが、「PageSpeed Insights」でそれぞれチェックしてくれます。




この記事上でページ表示速度改善にチャレンジ

「キャッシュ」、「gz圧縮」、「縮小」、「@importをやめる」、「画像の可逆圧縮」、「画像のサイズ指定」などを試しに行ってみたところ、スコアの改善とともに体感時間もかなり早くなりました。
各要素の改善には、バックアップを取った上で検証しながら行う必要がありますのでご注意ください。


CSSの@importを使わない

@importは複数のcssファイルを一括してまとめて読み込む記述ですが、@importで記述するとその中のCSSは一つずつロードされてしまいます。
@importを使わずに通常通り記述すればパラレルにロードされる為、表示速度が改善されます。
詳しくは、「CSS @import を使用しない」で解説しています。


imgタグのwidth、height指定

画像のサイズが指定されていれば、ブラウザは画像をダウンロード前にレイアウトを計算することができるようなので表示速度の改善に繋がります。


画像のサイズ指定は他の項目に比べ簡単に修正できます。ページの読み込み速度が遅いと感じるようでしたら、画像のサイズ指定から手をつけても良いでしょう。


画像のサイズ指定の方法

私自身は、当初かなり面倒くさがりでした。
その為初期のウェブページにはimgタグ内のwidth、heightの指定どちらかのみで調整していました。現在でもそのままのページは結構あります。
※widthは幅、heightは高さを指定します。


imgタグの記述例



<img src=”http://URL” alt=”代替タグ” width=”幅” height=”高さ” />



画像のサイズを指定する理由

ブラウザは、画像のサイズが指定されていれば画像をダウンロード前にレイアウトを計算することができるようです。逆に指定されていないと、画像をダウンロードしてからレイアウトを計算します。


画像はHTMLやCSSで指定したサイズに合わせる

当初は、私はこの画像に関しての設定をいちいち行う事を面倒と思って、大きな画像のままアップロードし、HTML、CSS側でサイズを指定していました。
また、時にはサイズすら指定しなかったり、widthのみ設定しているケースもあります。


変更後のサイズで画像を提供

もしページに表示させる画像が大きすぎる場合は、GIMPやPhotoshopなどの画像編集ソフトでHTMLやCSSで指定しているサイズにピッタリ合わせましょう。


メリット

実際に試してみるとわかりますが、大きなサイズの画像を作成し、HTMLやCSS側で小さなサイズで画像を指定して表示させると画像がぼやけたように表示されます。
わざわざ訪問者に質の低い画像を見てもらうよりは、きれいな画像で見せる方が当然良いです。
質以外では、読み込みスピードの改善が見込めます。ブラウザでは、一度画像を取得した後にリサイズを行う為、再計算の為の時間がかかります。


WordPressであれば不要なプラグインを外す

WordPressでブログを始めた頃は、無料のプラグインが便利なので大量にプラグインをインストールしていましたが、今はプラグイン無しで解決できる方法を探し、ページ表示に影響がありそうなプラグインを外しています。
これだけでもかなり高速化されます。


利用するサーバーのスペックを上げて環境を改善する

共有サーバーではなく専用サーバーを使用したりスペックを上げます。
若干費用がかかりますがビジネスにおいてウェブの貢献度が高いのであれば必要かもしれません。
特に頻繁にサーバーがダウンしたり、ロードの時間が10秒かかるくらい貧弱なサーバーではビジネスに支障をきたす事もあります。


gzip や deflate を使用してリソースを圧縮

リソースを圧縮する事で、ウェブサイトを表示する為に必要なリソースのダウンロード時間を短縮できます。
ウェブサーバーはApacheなので以下のように「.htaccess」に「mod_deflate」の記述を加えました。


<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/js text/plain text/xml text/css application/x-javascript application/javascript </IfModule>

※「Apache モジュール mod_deflate」を参照


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

これは少々手間どりました。
まず不要なCSSやJavaScriptがあれば削除します。
小さなサイズのCSSは、<head>内に、<style>、</style>を記述し、インラインでCSSを記述します。
小さなサイズのJavaScriptの場合も同様に、<head>内に<script type=”text/javascript”>、</script”>でインライン化します。


またファーストビュー(最初にページを表示した際にブラウザで見える範囲)の処理で必要なJavaScriptやCSSに関してはインライン化しておきます。
それ以外のJavaScripはこのブログの場合は、可能なものにはasyncを記述し非同期に読み込ませています。
レンダリングを妨げる JavaScript を削除する」の「JavaScript の読み込みを遅らせる」を参照。


CSSの場合は、必要な記述をインライン化し、ファーストビューで使用しないCSSに関しては</html>(html閉じタグ)の下に記述します。

</html> <link rel=”stylesheet” href=”/user_data/packages/default/css/basic.css” type=”text/css” media=”all”> <link rel=”stylesheet” href=”/user_data/packages/default/css/common-mini.css” type=”text/css” media=”all”> <link rel=”stylesheet” href=”/user_data/packages/default/css/header1.css” type=”text/css” media=”all”> <link rel=”stylesheet” href=”/user_data/packages/default/css/footer.css” type=”text/css” media=”all”> <link rel=”stylesheet” href=”/user_data/packages/default/css/top.css” type=”text/css” media=”all”> <link rel=”stylesheet” href=”/user_data/packages/default/css/contents-mini.css” type=”text/css” media=”all”>

CSS の配信を最適化する」の「小さな CSS ファイルのインライン化の例」を参照。


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

サーバーでブラウザのキャッシュを有効にします。
このブログでは、.htaccessに以下の記述を追加しています。
※twitterやanalyticsなど外部リソースに関してはどうしようもないので無視しています。
(https://platform.twitter.com/widgets.jsなど)


<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css “access plus 1 weeks” ExpiresByType text/javascript “access plus 1 weeks” ExpiresByType image/gif “access plus 1 weeks” ExpiresByType image/jpeg “access plus 1 weeks” ExpiresByType image/png “access plus 1 weeks” ExpiresByType text/js “access plus 1 weeks” <FilesMatch “\.(css|js|gif|jpe?g|png|ico)$”> Header append Cache-Control “private” </FilesMatch> </IfModule>

ブラウザのキャッシュを活用する」を参照。


画像のファイルサイズを小さくする

JPEG や PNG ファイルに対して質を保てる範囲でロスレス圧縮を行います。
このブログでは画像はPNGばかりなので、「TinyPNG」というサービスを使って圧縮し、画像を差し替えました。


画像によっては、ツール上で圧縮すると薄くなってしまうものもありましたが、ほとんどの画像は気にならないと思います。


JavaScripやCSSファイルを軽量化する

余分なスペース、改行、インデントなどの不要なバイトを取り除いていきます。
※ツールそのもの、WPのプラグイン、文字コードなどが原因で表示が崩れたりする事もある為、バックアップとテストを行った上でお試しください。
このブログでは以下のツールを使ってみました。
CSS Minifier
Online JavaScript/CSS Compressor
※はてなブックマークなどの外部リソースに関しては何もできないので無視しています。
(https://b.hatena.ne.jp/js/bookmark_button.jsなど)


HTML を縮小する

これは後回しにしていましたが、「mod_PageSpeed」をサーバーにインストールした後に自動的に最適化されたと思われます。




ページ速度の改善を行った結果

ページ速度改善

スピードテストツールは他にも「GTmetrix」などがあります。
また、改善の一つとして最近ではGoogleの自動サイト高速化ツール「mod_PageSpeed」を利用できるレンタルサーバーもあるようですので、設定一つでウェブサイトの高速化ができるようになっています。
※このブログのサーバーもmod_PageSpeedをインストールしています。




モバイル向けの高速化表示を実現するAMPプロジェクト

Googleのウェブマスター向け公式ブログでアナウンスがあったように、「スマホ向けの高速化表示を実現するAMPプロジェクト」に取り組んでいるようです。
※「Accelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました

※AMPはAccelerated Mobile Pagesの頭文字をとった言葉です。


早ければ2016年2月下旬にGoogle検索の機能としてリリースされるようです。


スマホ向けの高速化はユーザビリティの面で今後重要視されていきます。
ランキングファクターにもなり得る要素で、SEOの面以外でもスマホユーザーのユーザビリティ改善により直帰率の改善やCVの向上にも繋がるはずです。
AMPを簡単に利用できるようであればこのブログでも活用したいですね。



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


野澤洋介

この記事を書いた人

アレグロマーケティング代表取締役 野澤洋介

SEOは考え方はシンプルですが、いざ実践するとなかなか思うようにいきません。
当ブログでは、読者の方に成功も失敗も合わせて情報を共有し、同じような悩みを解決できればという思いで運営しています。


著書:「最強の効果を生みだす 新しいSEOの教科書」(技術評論社)

follow us in feedly


関連記事


SEO管理ツール Spresseo(エスプレッセオ)

コンテンツが増えてきたらランキングの管理をツールで効率化しましょう。
ページごとの内部最適化や、キーワードの順位取得や競合比較、獲得した被リンクのレポートを自動化できます。



▲ ページトップ ▲
自動XMLサイトマップ管理ツールトライアル版配布中