ブラウザのキャッシュを活用してPageSpeed Insightsの点数をあげてみた

psi0

ブログ初めてまだ1ヶ月、記事数も20ほどしかないのに、PageSpeed Insightsの点数が”赤点”とイマイチだった。

関連 PageSpeed Insightsでサイトの表示スピードを測定してみた

これは何かしなければと思うけど、何をすればいいのかわからない・・・

なので、”ブラウザのキャッシュを活用する方法”をググってみると、”ド素人が気楽にいじってはいけない”臭がプンプンしたので、ここは”寝ログ”さんのお知恵を拝借することにした。

ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法
先日、PageSpeed Insightsというツールを知りました。PageSpeed Insightsとは、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案してくれるGoogle Developersのツー

寝ログさんを参考にした理由は、寝ログのオーナーである”わいひらさん”が無料で提供している”Simplicity”を使わせて頂いていることと、レンタルサーバーも同じエックスサーバーだったので、このブログの環境とほとんど同じだったと思ったから。

スポンサーリンク
アドセンス広告レクタングル大

準備

一般的な方法は”.htaccess”というテキストファイルを変更するようなのですが、どうやらこれが強力な設定ファイルらしいのでバックアップを取る。

エックスサーバーだと”.htaccess”は”・・・/ドメイン/public_html”にあるとのこと。

PSI-6

これをローカルフォルダに保存して、もし何かあった場合はこのファイルをアップロードして復元できるようにしておく。

あとは、.htaccessに必要な部分を追加する。

ブラウザのキャッシュを活用した結果

Pagespeed Insights

活用前(モバイル)

PSI-2-crop

活用後(モバイル)

PSI-2-1

続いてパソコンの活用前

PSI-3-crop

活用後(パソコン)

PSI-3-1

8ポイントアップ。

Website speed test

活用前

PSI-4

活用後

PSI-4-1

”Perf. grade”は5ポイント上昇。

”Leverage browser caching”の55ポイントも上がった。

その他の値で改善してるのもあれば、”Combine external CSS”みたいに少し悪くなっているのもあった。

GTmetrix

活用前

PSI-5

活用後

PSI-5-1

ここでも”Leverage browser caching”は、FランクからCランクへあがった。

”PageSpeed Score”はB(86%)からA(91%)に。

と、いうことで

結果はPagespeed Insightsの点数が8ポイント上昇。

これが、良かったのかそれ程でもないのかわかりませんが、グリーンレベルに達するには、85点以上必要みたい。

そこで、調子に乗ってHTML/JavaScript/CSSの最適化をしたら、

”モバイルフレンドリーテストに合格しない可能性・・・”

となってしまった!!!

初心者がこんなトラブルに遭遇すると、パニックになるどころか呆然としてしまうもので、

何が何だか状況を飲み込めなかったようで、”んっ???”と軽くパニックに。

今は何とか復帰したけど、そのポンコツぶりは、また今度、備忘録のためにブログにアップすることにしよう。

スポンサーリンク
アドセンス広告レクタングル大
アドセンス広告レクタングル大

シェアしてみる。

  • このエントリーをはてなブックマークに追加