Webデザイナーブログから学ぶホームページ制作

Webサイトの表示速度は重要な改善点のひとつです。
表示速度が改善されることでSEOや検索順位にも影響があり、訪問者の離脱率を回避することにも繋がります。
表示が遅かったり、重かったりするとなるとせっかく訪れた訪問者がいなくなってしまいます。

ブラウザキャッシュを設定することで、Webサイトの表示速度を改善することができます。

今回は、.htaccessファイルにブラウザキャッシュを設定してWebサイトの表示速度を早くする方法を解説します。

ブラウザキャッシュとは、ブラウザでWebサイトを表示するたびに、画像やデータファイルを一時的にコンピューターに保存する機能のことです。
一度訪れたWebサイトへ再度アクセスを行った時に、保存されていたデータを利用し表示されるので、毎回データを読み込む必要が無く、Webサイトを表示する時間を短縮することができます。

毎回サーバーから大量なデータを取得するとなるとサーバーへのリクエスト回数が増えるためその分、ブラウザが重くなったり速度が遅くなったりします。そのために、ブラウザキャッシュの機能を利用して表示速度を改善します。

Webサイトの表示速度が遅い事によって、訪問者の離脱が増え直帰率を下げることになります。
Googleは、ページ表示速度がSEOに影響することを公表していて、ブラウザのキャッシュを活用することを推奨しています。

参照：Google Developers

2018年7月には、「ページの読み込み速度をモバイル検索のランキング要素として使用する」と公表しています。

参照：Google 検索セントラル ブログ

ページの読み込み速度がランキングシグナルとなり検索順位へ重要な影響を及ぼす要素とされています。

また、Googleは、表示速度が遅いサイトは直帰率やCV（コンバージョン）に影響があることを公表しています。 表示速度の秒数が落ちることによる直帰率の分析を公開しています。

表示速度が1秒から3秒に落ちると、直帰率は32％上昇する
表示速度が1秒から5秒に落ちると、直帰率は90％上昇する
表示速度が1秒から6秒に落ちると、直帰率は106％上昇する
表示速度が1秒から10秒に落ちると、直帰率は123％上昇する

参照：Think with Google

Webサイトの表示速度を無料で計測でき、パフォーマンス最適化を支援してくれる「Google PageSpeed Insights」というツールがあります。
「Google PageSpeed Insights」は、Googleが提供する無料支援ツールで、URLを入力するだけでモバイル、PCのそれぞれのページパフォーマンスを測定し、改善が必要な項目を提案してくれます。
スコアは100点満点評価で、100点に近いほど高い評価となります。
また、スコア表示したにページパフォーマンスの改善項目が表示され、パフォーマンス原因となる情報や改善できる項目が表示されます。

【3段階で評価】
・0～49点は赤
・50～89点は黄色
・90～100点は緑

Google PageSpeed Insights

「.htaccess」ファイルを作成してWebサイトの表示速度を改善します。

メモ帳などのテキストエディタを開いて「htaccess.txt」という名前のファイルを作成します。
.htaccess（ドットエイチティーアクセス）ファイルは、エディタでそのまま「.htaccess」の名前で保存しても保存ができないため、ここでは「htaccess.txt」という名前でファイルを作成します。

「htaccess.txt」ファイルにブラウザキャッシュを保存するためのコードを記述します。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType text/x-javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType text/js "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 months"
ExpiresByType application/x-font-woff "access plus 1 months"
</ifModule>

記述する内容は、「ファイルタイプ」と「保存する期間」を指定します。
「ExpiresByType text/css」は、ファイルタイプの指定で、「”access plus 1 weeks”」は、保管期間を指定しています。
「weeks」の箇所を変更する事で、保存期間が設定できます。

【有効期限】
・秒：seconds
・分：minutes
・時：hours
・日：days
・週：weeks
・月：months
・年：years

「htaccess.txt」ファイルをサーバーにアップロードを行いますが、この時必ずドメイン直下にアップロードします。
「htaccess.txt」ファイルをアップロードしたらアップロードをした「htaccess.txt」ファイルの名前を変更します。ファイルの名前を「htaccess.txt」から「.htaccess」に変更します。
名前を「.htaccess」に変更出来たら完了です。

Webサイトの表示速度が遅いのは致命的ですね。ブラウザキャッシュ以外にもパフォーマンスを改善する方法はいくつかありますが、一つ一つ改善していくと良いです。
画像を出力するWebサイトは特に表示速度が遅くなったりするので、ご紹介した「Google PageSpeed Insights」ツールを利用して最適化できる個所はなるべく改善をしていきましょう。