Webサイトの高速化と改善策！こわ〜い損失

ホームページの表示速度による損失

投稿日 更新日

by Chiharu Morita

このページを訪れた方は、ホームページの表示速度の遅さが気になっていることでしょう。

どうしてこんなにも表示に時間がかかるのか？イライラしていることでしょう。ホームページの運営者なら0.1秒でも早くしたいものです。

今回は速度低下によって、どんな損失が発生するのか？また、それを改善する方法を解説していきたいと思います。

速度の低下は命取り

大手企業や調査会社による表示速度とコンバージョン率の増減データが発表されています。下記データが参考になると思います。

売上やユーザーの満足度が大きく低下

Amazon：１秒増加 11%のPV損失 16%不快に感じる 7%コンバージョン損失
Google： 0.5秒 検索数が20%減少
Walmart： 1秒未満の場合と比較し、1秒から2秒の場合、コンバージョン率が半減
ebay： 表示速度が10%速くなると売上1%増加、35%速くなると5%増加

引用先：0.1秒の遅れが、1%の売上に影響する!? ページ表示速度の影響力と改善法まとめ
Vol.1　Webサイトの表示遅延対策で機会損失を未然に防ぐ方法

この図は0が小さい、表示速度が速い、100が大きい、表示速度が遅いことを意味します。
コンバージョンと表示速度のグラフ
このように、表示速度は0.1秒でも早い方がいいということがわかります。

Googleの検索順位にも影響

ページのダウンロード時間
※上記のデータはGoogleサーチコンソールに登録するとチェックできます。

厳密い言うと、ホームページの表示速でではなく、クロールの巡回時間が影響しているとの事。

クロールとはGoogleの検索エンジン用ロボットの事です。このロボットがホームページを見て回って収集したデータをもとにランク付けしているのです。

クロールの巡回速度を上げるにはサーバーの性能を上げるしかありません。

参考サイト：グーグルが順位付けに使ってるのはページ表示速度ではなくクロール時間らしい

速度をチェックしてみる

当サイトの状態です。ほとんど何もしていないので、かなり悪い点数になっています。

Gtmetrix

Gtmetrixで調べる
gtmetrix

PageSpeed Insights

PageSpeed Insightsで調べる
pagespeed-descktop
pagespeed-mobile

改善することでユーザーに優しい運営者になろう

PageSpeed Insightsをもとにやり方を紹介していきますが、表示速度アップに最も大事なことはサーバーを高速化することです。

画像を圧縮する

画像を圧縮してくれるウェブサービスを紹介します。２つのサイトを抑えて於けば十分だと思います。ファイルをドラッグアンドドロップすればアップロードできます。圧縮されたものをダウンロードして使います。
TinyPNG
compressor.io

WordPressの場合は、EWWW image Optimizerプラグインを導入すると良いでしょう。

WordPressの場合圧縮してアップロードしても、WordPress内で作られる画像（通常複数のサイズの画像が生成されます）は圧縮されていません。

これらを圧縮するにはダウンロードして圧縮するか、プラグインを利用して圧縮するかの2通りありますが、プラグインを利用する方が手間がかかりませんので利用しましょう。

各種ファイルを圧縮する

圧縮をかけることでファイルサイズを小さくすることができます。ファイルを圧縮する前に必ず、バックアップしておきましょう。

HTMLを圧縮するサービス

HTML minifier

CSSとJavaScriptを圧縮するサービス

Online JavaScript/CSS Compressor

キャッシュを利用する

キャッシュとは一度訪問したユーザーを記録して、一定期間同じファイルを見せる仕組みのことです。そうすることで、新たに発生するリクエストを減らすことができます。

htaccessへの書き方

現在利用しているサーバーがAppachの場合使えます。Nginxの場合はやり方が異なりますが、今回は一般的なAppachの例になります。（mod_expires.cを使える場合、各レンタルサーバーにて確認が必要ですが、大抵は使えます。）


ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "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 image/svg+xml "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

Apacheドキュメント

データベースのゴミを処分する

ここはWordPressでホームページを作っている方が対象になります。長年運営しているとデータベースに不要なクエリが蓄積されてきます。通常のレンタルサーバーであれば簡単にゴミ掃除ができます。

何が溜まってくるのかというと、リビジョン（自動保存）・コメントスパム・下書き・ピンバック・トラックバック・カスタムヒィールドなどが蓄積されていきます。

データベースのパスワードやユーザー名はwp-config.phpに書いています。

データベースのページからphpmyadminにアクセスして、オーバーヘッドを調べます。
データベースのオーバーヘッドをチェック

もしあれば、チェックをいれて、「データベースを最適化する」を選択すればお掃除完了です。
データベースの最適化

長らく何もしていない方はやってみてください。結構速くなります。

思い切ってサーバーを変えてみる

私の運営しているWordPressサイトで、どちらも同じくらいのPVです。レンタルサーバーヘテムルとAWS網元を比較してみました。

ヘテムルで運営しているサイト
サーバーの応答時間0.8秒なので、結構遅いことがわかります。
サーバーの応答時間

AWSで運営しているサイト
合格しているので、秒数は出てきませんが、SEOチェキなどで見ると0.04秒とで表示されます。
サーバー応答時間合格

サイトの規模が違うので厳密な意味の比較にはならないのですが、参考までに載せておきます。実際AWS網元で運営しているサイトは、サイトの表示速度も管理画面の表示速度も体感として感じられるくらい違います。

まとめ

結局のところ、クロールの巡回時間も含めて、サーバーを強化するのが最も手っ取り早い方法だということがわかります。

HTMLサイトの場合

静的なHTMLサイトの場合は、初心者でも使いやすい高性能なレンタルサーバーで十分だと思います。候補はエックスサーバーがいいでしょう。WordPressなどのCMSとは違いサーバーでプログラムが動作しないHTMLサイトは、もともと表示速度が速いのが速いのでCMSを使うときのように、神経質になる必要はないと思います。

WordPressの場合

初心者向けWordPressに最適化されたWPXが国内でいち早くphp7（php5より２倍程度の動作速度向上）を導入しました。
上級者ならAWSなどがいいと思いますが、AWSは基本的にサーバ技術の知識がないと使えません。網元AMIを利用すると簡単にできますが、費用はレンタルサーバーより割高となり、専門知識も必要になりますので、学習コストは覚悟する必要があります。

サーバーまとめのページも用意していますので、気になる方はご覧ください。初心者にとてもやさしいレンタルサーバー

追伸

現在の当サイトのサーバー応答時間を見てもわかるよう0.8秒もかかっており、クロールのダウンロード時間は平均で600程度かかっています。当サイトでもサーバー移転（WPXかAWSに移転）を計画しており、結果を報告出ればと思います。

この記事投稿後にWPXクラウドにサーバー移転してみたのですが、サーバーの応答時間が１０倍くらい早くなりました。以前の0.8秒くらいから、0.06秒くらいに改善され、体感速度も爆速です。（php7を利用しています）

但し、Page Speedのスコアは少し悪くなりました。WPXの場合、多少のデメリットもあり、たとえば画像を圧縮してくれるEWWW Image Optimizerプラグインが使えない（使えるようになりました。）ことや、独自のキャッシュシステムを利用しているためhtaccessでキャッシュ期間を設定できない（こちらも使えるようになりました。）などの不都合な面もありますが、それらを修正したところで表示速度の改善は微々たるものです。サイトの表示速度はほとんどがサーバーの応答速度によりますので、Page Speedでのスコアは悪くても気にしないようにしています。

サイトへのアクセス数が増えてきたら、画像などを別のサーバーに設置して配信するCDNの仕組みも利用しようと思っていますので、実現した際に記事を更新してお知らせしようと思います。

カテゴリー SEO