ページTOPへ

「ブラウザのキャッシュを活用する」についての対策法|webサイト高速化

「ブラウザのキャッシュを活用する」についての対策法|webサイト高速化



当サイトからご購入の方に豪華特典付き!






「ブラウザのキャッシュを活用する」についての対策法|webサイト高速化

 

 

 

先日サイトページの読込速度が遅いと感じて、webサイト高速化についていろいろ勉強しました。

 

 

webサイト高速化のツール「PageSpeed Insights」について

 

「PageSpeed Insights」はGoogleが社内で使っていたページ高速化のツールです、指定したページの表示スピードの状態を診断し改善点を提示してくれます。

 

以下はGoogle Developersサイトに掲載されている説明です

 

PageSpeed Insights は、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案します。ページの読み込み時間を短縮することで、直帰率が低下しコンバージョン率が上昇する可能性があります。

 

PageSpeed Insights

 

 

PageSpeed Insightsの使い方

 

 

まず、Google DevelopersのPageSpeed Insightsページにアクセスします。

 

 

 

 

解析したいページのURLを入力し、「分析」をクリックします。すると解析したページのモバイル版とパソコン版の点数が表示されます(100点満点)。

 

 

 

 

パソコン版の点数が69ですね、「ブラウザのキャッシュを活用する」という提案をしてくれました。

 

 

「ブラウザのキャッシュを活用する」についての対策法

 

 

「ブラウザのキャッシュを活用する」には、.htaccessにディレクティブを追加すればOKです。

 

 

サーバーによってはこの方法は使用できません。注意してください


 

 

例えば、画像ファイル(pngファイル)をブラウザにキャシュしたい場合には、以下のディレクティブを.htaccessに記述します。

 

 

ExpiresActive On
ExpiresByType image/png "access plus 10 days"

 

 

「ExpiresActive On」で有効期限の設定をONにし、pngファイルをキャッシュする有効期限を設定します(ここでは10日キャッシュを保持しています)。

 

 

まず、FFFTPを使って「.htaccess」を取り出します。デスクトップに保存した「.htaccess」をMKEditorなどで開きます。

 

<IfModule mod_expires.c>と</ifModule>の間にに以下のコードを追記してください。

 

 

ExpiresActive On
ExpiresByType text/css "access plus 1 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"

 

 

コードを追記したら上書き保存。保存した「.htaccess」を再びFFFTPを使用して、サーバーにアップロードします。

 

 

設定前と設定後の変化

 

設定前:

 

 

設定後:

 

 

 

読み込み速度が以下のように改善されました:

 

設定前:69/100 → 設定後:80/100

 

 

 

他の提案の対策法

 

 

リソース圧縮の設定

 

gzipやdeflateを使用してリソースを圧縮する方法」というようなメッセージが出た際の修正方法です。

 

リソースとは、html、css、xml、JavaScriptなどのことです。今回は「deflate(デフレート)」を使用してリソースを圧縮する方法です。

 

「.htaccess」の<IfModule mod_expires.c>と</ifModule>の間にに以下のコードを追記してください。

 

 

#圧縮の設定
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

 

 

PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

 

 

「.htaccess」の<IfModule mod_expires.c>と</ifModule>の間にに以下のコードを追記してください。

 

ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"

 

数字はサイトに合わせて変更してください。

 

GoogleはJavaScript を1週間(604,800秒)に設定するよう推奨しているそうです。それ以下の時間だと、また「修正が必要」と表示されます。

 

「mod_deflate」はレンタルサーバーによっては使えない場合があります。追加してサイトを見てみると「503」が表示されるかもしれません。

 

 

関連ページ

目の疲れの対策!パソコンを長時間作業し続けるあなたへ
目の疲れの対策について紹介します。
Amazonで9割引き以上の商品を一発で探す方法
ネット通販大手のAmazonで、9割引き以上の商品を検索する裏技をご紹介します。やり方はとても簡単なので、ぜひ試しくてください。
記事の校正に使える無料の文章校正・リライトツール
記事の校正に使える無料の文章校正・リライトツールを紹介します。
アフィリエイトに必須!無料ツール厳選11!
アフィリエイトをするにしても、パソコンでネットビジネスをしても、便利に快適にパソコンを使用していきたいですよね。そこで、ヨウが毎日使っている便利な道具やソフトを紹介します。
無料で使えるSEO対策ツール7選
無料で使えるSEO対策ツールを紹介します。
マイナンバー制度とは?新しい制度を知らないと、損することはたくさん!
2015年10月からスタートする新しい制度「マイナンバー制度」について、簡単にわかりやすく解説します。
マイナンバーの通知カードを受け取る時に、要注意!
いよいよマイナンバーが送られてきますが、どうしていいかわからない方に対して、この通知カードを受け取る時に、いくつか注意することについて説明します。
【要注意!】楽天カード!何も知らずに入会していまうとポイントが貰えない!&お得に入会する裏技!
楽天カード入会について説明します。何も知らずに入会していまうとポイントが貰えない可能性がある、及びお得に入会する裏技!
ネットでテレビ番組を見たい人は必見!約50番組がすべて無料で見れるTver(ティーバー)!
約50番組がすべて無料で見れるTver(ティーバー)について紹介します。
テレビでも取り上げられた!ワンコインであなたのお悩みを解決!
「ココナラ」は、ビジネスでもプライベートでも500円でいろいろなお願いができるワンコインお悩み解決マーケットです。「ココナラ」についてご紹介します。
「楽天銀行カード」から「楽天カード」に切替・変更する方法
「楽天銀行カード」から「楽天カード」に切替・変更する方法についてご紹介します。
「nanaco」払いにする事で税金や公共料金を節約する裏技
「nanaco」払いにする事で税金や公共料金を節約する裏技についてご紹介します。
楽天ポイントをお金をかけずに貯める方法
楽天ポイントをお金をかけずに貯める方法について説明します。
手数料無料で楽天銀行から入出金する方法
手数料無料で楽天銀行への入出金する方法についてご紹介します。
SBI証券の口座開設で現金3000円をお得に稼ぐ方法
SBI証券の口座開設で現金3000円をお得に稼ぐ方法についてご紹介します。
銀行口座間の資金移動を無料で行う裏技
銀行口座間の資金移動を無料で行う裏技について説明します。
現金よりお得!ポイント3重取りできるEdy-楽天ポイントカードのお得な使い方!
Edy-楽天ポイントカードの使い方とお得なチャージする方法についてご紹介します。
Body Make Seat Styleの口コミ・使ってみた感想!長時間パソコン使う方必見!
長時間パソコン使う方必見!デスクワークをしている方に役立つ腰痛対策を紹介します。
絶対お得!出品手数料など、すべて無料で提供!「楽天フリマ」
スマートフォンの普及が進む中、フリマアプリが注目を集めています。その中に2014年11月に開始した「楽天フリマ」についてご紹介します。
Amazon(アマゾン)で本を注文する前にハピタス堂書店とインカムBooksをチェックしよう
Amazon(アマゾン)で本を注文する前にハピタス堂書店とインカムBooksをチェックしましょう。
WAON(ワオン)に1円も使わずチャージする方法
電子マネーのWAONWAON(ワオン)に1円も使わずチャージする方法をご紹介します。
アフィリエイトと在宅ワークどっちが稼げるのか?
アフィリエイトと在宅ワークどっちが稼げるのか?について、個人的な見解を述べたいと思います。
nanacoギフトとは?使い方&無料で手に入れる方法!
nanacoギフトの使い方・購入・無料で手に入れる方法を紹介します。

初心者でも月10万円

カテゴリー


ホーム 初心者のための講座 お小遣いサイト攻略法 お役立ち情報 初心者のための教材