Webサイトの表示速度を簡単にチェックして改善しよう！
Webサイトにおいてページの表示速度というのは重要な要素の一つです。GoogleはSEOのスコアにも影響すると公表していますし、UX（User Experience）にも大きく影響します。UXはユーザーエクスペリエンスの略で「ユーザーが製品・サービスを通じて得られる体験」を指します。
- デザインが分かり易く、探している情報にたどり着きやすい。
- 問い合わせや注文からの対応が丁寧で早く、好感が持てた。
- サクサク動いて軽くて快適。また使いたいと感じた。
上記のようなユーザーが感じることは全てUXになります。要するにユーザーが使いやすいと感じるものはUXが優れている、ということになります。
Webページが中々表示されなかったり遅かったりするとイライラしますよね？読み込み時間が3秒以上かかると、40%のユーザーが離脱してしまうというデータもあるそうです。見てもらえなければ、いくら中身のコンテンツが優れていても全てが水の泡になってしまいます。ページの表示速度が速いということは優れたUXの大前提となります。
そこで、今回は簡単にできるWebサイトのパフォーマンスチェックと改善方法をご紹介します。
まずはサイトの表示速度をチェック
早速表示速度のチェックをしましょう。やり方は簡単で、Googleが提供している下記ページにチェックしたいサイトのURLを入力して「分析」ボタンを押すだけです。
分析が終わるとモバイル・PC別にスコアを出してくれます。結果の文字色は緑・黄・赤の3色で表示されますが、赤であれば要改善のサイトになります。80点以上が望ましいので、改善できるところを一つずつ対応していきましょう。
結果画面を更にスクロールすると、最適化するにはどうすればよいかの提案をしてくれます。「修正方法を表示」をクリックすると、やり方まで教えてくれるので、できそうなことは指示に従ってやってみましょう。具体的なファイルまで指定してくれるので非常に参考になります。
具体的には下記の項目を改善すると早くなる可能性があります。
- 画像を最適化する
- JavaScript、CSS、HTMLを縮小する
- 圧縮を有効にする
- スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
- サーバの応答時間を短縮する
- ブラウザのキャッシュを活用する
- リンク先ページのリダイレクトを使用しない
- 表示可能コンテンツの優先順位を決定する
この中でなるべく手間を掛けずに簡単にパフォーマンスを改善する、というテーマの下にできる改善方法を下記に紹介したいと思います。
画像を最適化（圧縮）
Webサイトの表示は画像等の容量の多いメディアファイルの読み込みが最も時間が掛かります。書き出した画像はあとから圧縮するサービスがありますので、下記の様なサイトで画像を圧縮してみましょう。jpgやpngに対応しています。
もし可能であれば、書き出す際の画像形式や画質を見直してみたり、画像である必要のない部分はテキスト化し、出来る限り装飾もCSSで対応できるとより良いですね。
HTML、CSS、JavaScriptファイルを圧縮
メディアファイルの圧縮ほどではありませんが、HTML、CSS、Javascriptファイルもツールを利用して圧縮することで速度向上効果が期待できます。下記ページにて各ソースを圧縮できます。
■Online JavaScript/CSS/HTML Compressor
また、当たり前ですが外部ファイルの数は少ない方が読み込みが早いので、CSSやJavaScriptはまとめられる内容は出来るだけ一つのファイルにまとめましょう。
JavaScriptファイルを最適化し、読み込み位置を調整する
JavaScriptファイルはページのレンダリングを妨げる可能性があります。分析結果の中で妨げになっているファイルをリストアップしてくれるので、該当ファイルに「async属性」と「defer属性」を付与して回避します。（読み込みを非同期にします）
ファイルの読み込み位置は<head>内で読み込むより</body>の直前で読み込むようにするほうがページの表示速度が向上します。
上記の対策によりファイルの読み込み順による不具合が発生する場合もありますので、その場合は「async属性」「defer属性」を外したり、読み込み位置を<head>内に戻してください。問題がなければ表示速度向上が期待できます。
ブラウザのキャッシュを設定する
基本ファイルのキャッシュはブラウザの設定に依存しますが、htaccessファイルに下記の記述を追加することで、ファイル毎にどのくらいの期間キャッシュを持たせるかを設定することができます。頻繁に更新をしないサイトの場合は長めに設定しておけば2回目以降の表示速度が上がり、分析結果のスコアも上昇します。
ExpiresActive On ExpiresDefault “access plus 1 day” ExpiresByType text/html “modification plus 30 minutes” 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”
まとめ
Webサイトのパフォーマンス最適化は突き詰めると企画やデザインの段階から考えるべきことも多く、表示速度以外にもキリがないくらいにやるべきことがあるのですが、今回は出来上がったサイトに対しても手軽に実践できる表示速度向上の方法のみをご紹介しました。
極端にスコアが低いサイトであれば少しの手間で大幅な改善が期待できる場合もありますのでぜひ試してみてください。
余談ですが、モバイルファーストな時代ですので、これからスマホメインのサイトを制作する場合、今回紹介した対策を取るより初めからGoogle AMP(Accelerated Mobile Pages)対応ページとして制作するほうが高速表示が期待できていいかもしれません。
WEBプログラマー ／ O.K
