お役立ち
2019.02.19
Webサイトの表示速度を改善する5+1つの方法
2018年7月9日に、Googleの“Speed Update”（スピード アップデート）が採用されました。
今後、SEOの面でも重要になってくると思います。
“Speed Update”は
「ページスピードが遅いと検索結果ページでのランキングが下がってしまう可能性がある」というものです。
しかし、「ページスピードが○秒なら良い」「○秒なら悪い」という基準はありません。
Googleの順位の基準として、ユーザーの利便性を重視していますので、検索クエリとの関連性の高いコンテンツは、遅くても上位に表示されます。
参考：スピードチェックツール
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
Test My Site
また、サイトスピードが遅いとユーザーが離脱しやすくなり、コンバージョン率にも影響すると言われています。
アクセス数・コンバージョン率いずれの改善のためにも、サイトスピードの改善は重要と言えます。
サイトの表示速度が遅くなる原因
①サイト内のコンテンツが重い
Webサイトの中には、文字、画像、動画などさまざまなコンテンツがあります。
一番最初に改善点として挙げられるのが、画像のサイズです。
今のサイト制作はレスポンシブデザインでサイト作成が主流となっており、PCとスマホで同じ画像を使用します。
PCサイズで使用した画像をそのまま読み込んでしまうため、スマホでは画像容量が大きく、表示速度が遅くなってしまいます。
②外部ファイルを沢山読み込んでいる
Webの仕組みとして、ページにアクセスする際に1回通信をおこなっていると思っている人が多いかもしれません。実際は外部ファイルの数だけ通信を行います。
具体的には、画像・CSS・JavaScriptの数だけ通信を行います。なので、数が多いとその分通信数が増え、サイトスピードが遅くなります。
③JavaScriptを多用している
今、どのサイトでもjqueryが入っているのが当たり前になっています。
Jqueryはいろいろな動き（ファーストビューのスライド・ロールオーバー・ページトップに戻るアニメーションなど）を行えますが、その分ファイルの容量がとても大きくなってしまっています。
また、広告の効果計測用のタグを大量に設置している場合も、読み込み速度低下の原因となります。
サイトスピードの改善策
①画像の容量を小さくする
画像を軽くする場合、例えば下記サイトを利用すると簡単に容量を軽くすることが可能です。
基本的に画像は容量を軽くするとどうしても荒れてしまいますが、下記サイトはきれいな状態で圧縮することができます。
②外部ファイルを圧縮する
CSSやJavaScriptの容量は、記載されている内容（行数）で容量が変わってきます。
下記サイトなどを利用すると、改行がなくなりファイルが圧縮されます。
・CSSの圧縮
・JavaScriptの圧縮
③gzip圧縮を利用する
gzip圧縮とはWebページで利用している「HTMLファイル」や「CSSファイル」などをファイルごとで圧縮してブラウザに読み込ませることができる圧縮方法です。
フリーソフトでは、7-Zipという圧縮ソフトで利用可能です。
各ファイルに下記を記載すると、gzipに対応しているブラウザのみgzipファイルを読み込むことが可能です。
. htaccess
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
スタイルシート (.css)
<FilesMatch “\.css\.gz$”>
ForceType text/css
AddEncoding x-gzip .gz
</FilesMatch>
Javascript (.js)
<FilesMatch “\.js\.gz$”>
ForceType application/x-javascript
AddEncoding x-gzip .gz
</FilesMatch>
HTML (.html)
<FilesMatch “\.html\.gz$”>
ForceType text/html
AddEncoding x-gzip .gz
</FilesMatch>
④使わない外部ファイルは消す
サイトの表示速度が遅くなる原因②であるように、外部ファイルの数だけ通信をおこなうため、使わない外部ファイルは削除しましょう。以前配信していて、今は配信を停止している広告の計測タグなどは、定期的に見直し削除をおすすめします。
⑤スマホのキャッシュを利用する
キャッシュとは、ブラウザに一時的にウェブページのデータを保存しておいて、次に同じページを開いたときに素早く表示させる仕組みです。
. htaccessファイルに下記を記載することで実装可能です。
※キャッシュする日数は適宜変更してください。
ブラウザのキャッシュを有効
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 15 days”
ExpiresByType image/gif “access plus 10 days”
ExpiresByType image/jpg “access plus 10 days”
ExpiresByType image/jpeg “access plus 10 days”
ExpiresByType image/png “access plus 10 days”
ExpiresByType application/x-javascript “access plus 10 days”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType text/js “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
</ifModule>
⑥【スマホサイトの場合】AMPを導入する
AMPについて
AMPとは、モバイルユーザーが快適にホームページを閲覧できるようにGoogleとTwitterが共同で立ち上げたオープンソースプロジェクトです。
モバイル端末でページを高速で表示させるための仕組みを指します。
今スマホで検索していると検索結果に雷マークがついているものがあると思いますが、ついているものがAMP対応されているページになります。
AMPの仕組みについて
AMP HTML に準拠したウェブページを公開すると、Google のクローラーが AMP ページをキャッシュします。キャッシュされたコンテンツが検索クエリに関連が深いと判断された場合、検索結果にはキャッシュされたページの URL がリンクされます。検索結果に表示されたキャッシュ済みの AMP ページにユーザーがアクセスする場合には、キャッシュ済みのためコンテンツの取得までの時間が短く、記事の表示が瞬時に行われます。
引用：Google Developers Japan
AMPのメリット
- サイトが素早く表示される
- カルーセル表示される場合がある
AMPのデメリット
- HTMLとAMP HTML2つ制作・管理する必要がある
- デザインやコンテンツをうまく表現できない場合がある
AMPは専用の組み方（使用できるタグ）があり、できることとできないことが多々あります。
制約が多くオリジナルページの再現性が低いので、どんなサイトにも適しているわけではありません。
AMPは、静的コンテンツ（ニュースサイト・記事サイト・ブログなど）が向いています。
まとめ
以前より、スマホでのネット利用機会が増えてきています。一般に、スマホでWebサイトを閲覧する場合、通信速度はPCよりも遅くなるため、スマホ最適化が更に重要になってきます。
サイトの読み込みが遅いなぁと感じたら、これらの改善を実施してみてはいかがでしょうか。
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
