見ていて気持ちいいホームページってどんなホームページですか？
- デザインがキレイなサイト
- 情報が整理されているサイト
- サクサク動くサイト
では逆にストレスが溜まるホームページはどんなものですか？
- 情報がたくさんありすぎて求めている情報がどこにあるかわからない。
- やたら新しいタブでページが開く
- 表示されるまでに時間がかかる
などなど、いろいろありますよね。
とにかく、表示されるのに時間のかかるホームページはイライラしてストレスが溜まりますよね。
あなたのホームページは大丈夫ですか？
そんなときにあなたのホームページの表示速度を計測してくれる便利なサービスがあります。
それがGoogleのサービス、PageSpeed Insightsです。
もちろん無料であなたのホームページを診断することが出来ます。
せっかく訪問してくれたユーザーにストレスを与えず気持ちよくページを見てもらうためにも表示速度は重要です。
この機会にPageSpeed Insightsであなたのホームページの表示速度を診断して、表示速度が速くなる対応をしましょう。
なぜホームページの表示速度が速くないといけないのか？
ユーザーのストレスになる
ズバリ！ユーザーにストレスを与えるからです。
あなたも表示に20秒も30秒も時間のかかるホームページを見ているとイライラしてきませんか？
多くのユーザーもそのように感じていますので、表示の遅いホームページは離脱率が上がってしまいます。
せっかく訪問してきても、がっかりして帰ってしまうということです。
SEOにも問題がおきる
Googleが表示速度はSEOの要因のひとつと発表しています。
Googleはユーザーのことを第一に考えているのは有名なことですが、ユーザーがストレスを感じそうな要因はマイナスになってもおいかしくありません。
ショッピングサイトなら致命的
非常に興味深い記事があります。
Amazonの調査では、ページの表示速度が0.1秒遅くなると、売り上げが1%低下することが明らかになった。Googleからは、ページの反応が0.5秒遅くなるとアクセス数が20％低下すると発表されている。さらに米Aberdeen Groupの2008年の調査では、スピードが1秒遅くなるとページビューが11％、コンバージョンが7%、顧客満足度が16%低下することが報告されている。
[引用元]
Webサイトのレスポンス速度から見るインターネットユーザーの閲覧行動と企業の課題 | Web担当者必見！ リサーチ データ&市場調査レポート | Web担当者Forum
Amazonの調査ではわずか0.1秒表示速度が遅くなると1%売り上げが低下するそうです。
ほんの1%ですが、Amazonの1%は非常に多きいはずです。
またページの反応が0.5秒遅いとアクセスが20%低下するそうです。
このように表示速度は売り上げにも影響を及ぼす重要な要因であることがわかります。
PageSpeed Insightsとは
パソコンサイトとスマートフォンサイトが実際に表示されるまでの速度を表示し、診断も行ってくれるツールです。
Googleが提供しており、無料で使用できますし、ありがたいことに改善部分まで教えてくれます。
その改善部分を改善することで表示速度があがるというツールです。
ホームページの表示速度を測定する
PageSpeed Insightsにアクセスする
PageSpeed Insightsにアクセスします。
まずはPageSpeed Insightsにアクセスします。
赤枠の中に、表示速度を測定したいホームページのURLを入れて「分析」をクリックします。
しばらくするとスコアが表示されます。
「モバイル」、「パソコン」と書かれたタブをクリックすることで、それぞれ「モバイル」と「パソコン」の測定結果を切り替えることができます。
「最適化」の部分は、スコアのようなもので100点中何点かが表示されます。
画像では「good」で緑色になっていますが、「緑」、「黄色」、「赤」があります。
勘のいい方ならわかると思いますが、信号と同じで
「緑」は修正しなくても大丈夫！、
「黄色」は修正を考えて！
「赤」は修正する必要あり！
となっています。
「速度」・・・Unavailableとなっています。
Unavailable – 「利用できません」という意味です。
速度を計測したいのに「利用できません」？？
手順を間違えたのでしょうか？
調べてみると、現時点では人気のあるサイト（アクセスの多いサイト）しか計測できないそうです。
もし私と同じように「Unavailable」となった場合は、諦めてアクセスの多そうな大きなサイトのURLを試しに入れてみてください。
私は大好きなLIGさんのサイトで試させてもらいます。
株式会社LIGさんは東京のWeb制作会社さんで、サイトのコンテンツマーケティングが非常に上手で、よくサイトを見させていただいています。
そんなLIGさんで試すと下記のような結果が出ました。
LIGさん、さすがです！
速度がしっかり表示され、ページの読み込み分布というものも表示されています。
FCPとDCLという単語がでてきましたが、FCPはFirst Contentful Paintの略でテキストとか画像が表示されるまでの時間を測定したものです。
そしてDCLはDOM Content Loadedの略でHTMLが読み込まれて解析されるまでの時間を測定したものです。
難しいですが、FCPはユーザーが認識できるまでの時間で、DCLはブラウザが認識できるまでの時間と考えていいと思います。
勝手に計測しましたがLIGさん貴重なデータありがとうございました！
最適化対策
それでは、弊社の測定結果に戻ります。
パソコンの測定結果を見ると赤字で「Low」という診断が出ています。
これは早急に対応しなければいけないので、すぐに対応します！
対応・・したいんですが、どこをどう対応したらいいのかがわかりません。
安心してください。
赤枠で囲んだ中をみると、親切に「最適化についての提案」が書かれています。
各項目の「修正方法を表示」をクリックすると、具体的にどの部分を対応すればいいかが表示されます。
本当にGoogleは親切です。
それではGoogleさんの提案を見ていきます。
画像を最適化する
「画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます。」
ホームページで使用している画像を圧縮してあげることで表示速度が改善されます。
例えばデジカメやスマートフォンで撮影したままのサイズの画像を使用していませんか？
jpg形式にした方が容量が軽くなるのにpngで保存したりしていませんか？
画像の圧縮は手軽にできるので、まずはここから手をつけるとよいかもしれません。
基本的には無料のサービスやソフトを使って行いますが手作業になります。
画像の数が多いと面倒になってくるので、少しずつ行って、新規で画像を使う場合には意識して圧縮しましょう。
無料のサービスを利用する場合は「画像圧縮 無料サービス」などで検索するとよいでしょう。
・Optimizilla
画質を保ったまま画像サイズを圧縮してくれるサービスです。
使い方もカンタンで、圧縮したい画像をアップロードして画質を選ぶだけです。
圧縮を有効にする
「gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。」
これは少々やっかいな感じだと思いませんか？
聞いたことのない単語が並んでいて、何のことかさっぱりわからないかもしれませんね。
一言で言えば、HTMLやCSS、JavaScriptも圧縮して表示速度上げますよということです。
ですが、いざやろうとなると.htaccessを変更する必要があるので、あなたのホームページの環境やサーバーによって出来ない可能性もあります。
方法は.htaccessに下記を記入してサーバーにアップするだけなのですが、自信がない場合は詳しい方に相談しましょう。
<IfModule mod_expires.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>
ブラウザのキャッシュを活用する
「静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。」
これも.htaccessに記載することでキャッシュを使用するように設定可能です。
ExpiresActive On
ExpiresByType text/css “access plus 7 days”
ExpiresByType image/png “access plus 7 days”
ExpiresByType image/gif “access plus 7 days”
ExpiresByType image/jpg “access plus 7 days”
ExpiresByType image/jpeg “access plus 7 days”
ExpiresByType application/x-javascript “access plus 7 days”
7 daysのところはキャッシュしておく時間です。
特に理由がなければ7日以上にしておきましょう。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
「このページには、レンダリングをブロックするスクリプト リソース が 5 個、CSS リソースが 10 個あります。これが原因で、ページのレンダリングに遅延が発生しています。」
これはファーストビューの部分のテキストや画像が表示される前にCSSやJavaScriptが読み込まれていて、表示が遅れていますよってことみたいです。
対応方法としては下記のようなものがあります。
- scriptタグでasyncをつけて非同期で読み込む
<script async src=”sample.js”> - 影響がなければ読み込む位置をページの下部にする
- ファーストビューに関連するCSSはソースに直書きする
JavaScript を縮小する
JavaScript コードを縮小すると、データ サイズを大きく削減でき、ダウンロード、解析、実行の速度を向上させることができます。
CSSやJavaScriptのファイルの中の必要のない改行や空白を削除してファイルサイズを軽くします。
普段ソースを書くときには見た目がキレイでわかりやすいように、スペースを空けたり、改行したりします。
ですが、その改行やスペースでもわずかな容量をとっているので、処理に支障がなければスペースや改行も削除してしまいます。
まとめ
表示速度はSEOの要因のひとつでもありますし、早いほうがユーザーにとってもいいはずです。
ですが早いからといって劇的にアクセスがあがるというものでもありません。
ショッピングサイトでも商品のよさを伝えるにはいい画質の写真のほうがユーザーも満足します。
何事もバランスが重要です。
それからPageSpeed Insightsは便利ですが、過去のデータを比べることが出来ず、現在の状態しか測定できません。
アナリティクスやサーチコンソールでは、過去のデータも表示されるので比較することがカンタンにできます。
さらに現状では速度を表示できないサイトもあるので、今後に期待したいサービスです。
コメント