新@kyotapyな日々

思いついたら書く… wordpress,iPad,美味しいもの,観光

.htaccessへの設定とプラグインで読み込み速度(Page Speed Insightsのスコア)が150%アップ

      2015/12/21

無料のレンタルサーバにブログを引っ越して1年あまり。ページビューは月間5,000〜6,000アクセスになりました。
思いつくままに、更新間隔もバラバラながらここまでご覧いただき感謝、感謝です。
ここで、さらに快適にアクセスしてもらうために読み込み速度の改善を試してみました。

 

google SpeedInsightsで判定

最初にこのブログの読み込み速度をgoogleのPageSpeed Insightsで判定。

 

 

スコアは、モバイルが54/100、パソコンが67/100といまいち…そこで以下の対策を実施。

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

再度アクセスした際に、同じファイルを読み込まなくてもいいようにブラウザにファイルを保存しておくようにします。
wordpressにはキャッシュ系のプラグインが沢山あるのですが、適用したことでトラブルに見舞われることがあるようです。

そこでApacheの設定ファイルである.htaccessへ設定を書き込むことでキャッシュするようにしました。

そもそも.htaccessって?との疑問にはこのページを参考にしました。

.htaccessの設定内容については、このページを参考にしました。

.htaccessへの追記内容は以下のとおり。

追記した.htaccessをアップロードする前に、追記前の.htaccessをバックアップしておいたほうがいいと思います。

gzipでリソースを圧縮して送信サイズを減らす

gzipという圧縮技術を使って、リソースを圧縮して送信サイズを減らします。
これも.htaccessに設定を追記して実現できます。

このページを参考にしました。

.htaccessへの追記内容は以下のとおり。

EWWW Image Optimizerで画像ファイルを圧縮する

gzipでは画像ファイルなどの圧縮済みのファイルを圧縮するとファイルサイズが増えて逆効果になるようです。
プラグインのEWWW Image Optimizerを使うと画像ファイルを劣化させずにファイルサイズを圧縮してくれます。
このプラグインをインストールして設定すれば、投稿した画像を自動で圧縮してくれます。
また、ダッシュボードから過去に投稿した画像やテーマに使用している画像も圧縮してくれるので便利です。
設定や使用方法はこのページが参考になります。

Async JS and CSSでjavascriptとcssの読み込みを遅延させる

ページを読み込む際に、処理に時間がかかるjavascriptやcssを後で読み込ませることで、読み込みの体感速度を上げます。Async JS and CSSというプラグインで実現できます。
ここでひとつ問題が発生。このエントリで紹介しているプラグインのSiteOrigin Page Builderとalpine photo tile for tumblrで作成した固定ページがうまく表示されなくなってしまいました。

SiteOrigin Page Builderで作成した他の固定ページは、問題なく表示できているので、alpine photo tile for tumblrが原因だと思われます。
とりあえず、Tumblrの固定ページはメニューから削除しました。後で他のTumblr系のプラグインを試してみたいと思います。
追記:Tumblr Widgetというプラグインを使ってとりあえず復活させました。

スコアが120%〜150%アップ!

上記の対策をすべて実施して、PageSpeed Insightsで判定してみると…

 

 

 

モバイルが53/100→80/100、パソコンは67/100→82/100へと120%〜150%アップしました。
無料サーバなのでサーバの応答速度はいかんともしがたいですが、無料サーバでもここまでできます。
wordpressはノウハウやプラグインが豊富なので助かりました。
ここで参考にさせていただいたページの作者さん、ありがとうございました。

 

 - seo , ,

  プロフィール  PR:無料HP  北播ドライビングスクール  横手自動車学校  純正中古部品の通販  スタッドレスタイヤ はきかえ  タイヤ パッソ 激安  自動車 専門学校 夜間  クラウン純正ホイール  加南加賀自動車学校  開運パワーストーン  岡山 合宿免許  音楽 専門学校 福岡  タイヤ 取り付け 柏市  リノベーションローン