PageSpeed Insightsの使い方!ブラウザのキャッシュを活用するの改善方法

Googleはページの読み込み速度もサイト評価の対象としています。
つまり、読み込み速度の改善はSEO対策として効果があるということです。

※質の高いコンテンツを作成するほうが重要です。
 

Googleは、
Google Developersの中の1つのサービス「PageSpeed Insights」
でサイトのページパフォーマンスを測定するツールを提供しています。
 

測定結果は「読み込み速度を100点満点中何点になるか」で表現され、
測定結果だけでなく、パフォーマンスの改善方法も示してくれます。
 

今回はPageSpeed Insightsの使い方と、

ページの読み込み速度の改善方法の1つブラウザのキャッシュを活用する方法を紹介します。

■PageSpeed Insightsに関するGoogleの説明
PageSpeed Insightsとは?
 (https://developers.google.com/speed/docs/insights/about)

 

PageSpeed Insightsの使い方

以下ににアクセスします。
PageSpeed Insightsのサイト(https://developers.google.com/speed/pagespeed/insights/?hl=ja)

「ウェブページのURLを入力」にパフォーマンスを測定したいURLを入力し、【分析】をクリック。
PageSpeed Insightsの使い方 分析
 

「分析していいます」という表示がでますので、少し待ちます。
PageSpeed Insightsの使い方 分析しています
 

分析が終わったら、以下のように分析結果が100点満点中何点なのか表示されます。(↓の例だと58/100点)
PageSpeed Insightsの使い方 ブラウザのキャッシュを活用する

もし、上の画像のように赤色で表示されたら、修正する必要があります。

次に修正方法(改善方法)を紹介します。

ブラウザのキャッシュを活用する

読み込み速度を改善する「ブラウザのキャッシュを活用する」方法を紹介します。

FFFTPを使用しますので、FFFTPの使い方がわからない方は以下の記事を参考にしてください。
FFFTPの使い方

ブラウザのキャッシュとは、ブラウザ、つまり読者のパソコン内に記録されるサイト情報の一時ファイルです。

一時ファイルを作るメリットは、読者がある期間内に再度サイトに訪問する際に、以前見たサイトのデータを使うことによって早く表示させることができることです。

ブラウザのキャッシュの設定は「.htaccess」を編集することにより可能です。

では、まずFFFTPを起動させ、ホストに接続します。
PageSpeed Insightsの使い方 ブラウザのキャッシュを活用する ホスト一覧 接続
 

「ドメイン/public_html」内に「.htaccess」ファイルがありますので、デスクトップなどにコピーします。(ドラッグ&ドロップで可能)
PageSpeed Insightsの使い方 ブラウザのキャッシュを活用する .htaccess

デスクトップなどにコピーしたら、エディタで「.htaccess」を開きます。
(おすすめエディタはMKEeditor)

「.htaccess」をエディタで開いたら、以下を追記します。

# キャッシュの期間を設定
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 minutes"
ExpiresByType image/png "access plus 7 days"
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/html "access plus 10 seconds"
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</ifModule>

追記したら上書き保存し、サーバー内に戻します。(ドラッグ&ドロップで可能)
PageSpeed Insightsの使い方 ブラウザのキャッシュを活用する .htaccess アップロードの確認
 

以上が読み込み速度を改善する「ブラウザのキャッシュを活用する」方法です。

では、再びPageSpeed Insightsを使って分析してみます。以下が分析結果です。
PageSpeed Insightsの使い方 スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScriptCSS を排除する

速度の評価が「57/100」→「69/100」に改善され、「ブラウザのキャッシュを活用する」という表示が消えました。

ただし、まだ「修正が必要」と表示され、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」と表示されています。

これを改善することにより、「修正が必要」という赤い警告を消すことができます。

このように読み込み速度を上げることによってサイトの評価が高まり、検索上位へ表示される可能性が高まりますので、ぜひ活用していきましょう!

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。