PageSpeed Insightsで90点以上をとるまでにやったこと

Photo by Aleks Dorohovich

 キャッシュの開放のタイミングですとか、時間帯によって違いはありますが、このブログのトップページに関して、PageSpeed InsightsのPCで90点前後(モバイルでも調子がいいと80点程度)をとれるようになりました。
 他のページも、極端に画像が多いとか出なければ、PCで80点ぐらいは取れているみたい、です。嬉しい。
 それで、自分がこれからサイトを構築するときの防備録も兼ねて、それまでにやった高速化を書いておきます。

広告

サーバの変更

 サーバをミニバードからJetBoyに変えました。それまでもWP Fastest CacheとAutoptimizeでなんとかNeed Workぐらいは取れていたように思います。記憶は曖昧ですが…。
 ただ、それでもレンタルサーバの常として、時間帯によって性能に差は出るかなと。あと、トップページ以外にAdsenseが多いためか、結構個別の記事ページは表示に時間がかかるみたいです。このままアクセスが上昇したら、場合によっては数を減らすかもしれません。

変更前にやっていた高速化

 変更前にやっていた高速化はだいたい以下のとおりだったと思います。

  • AutoptimizeでのJavaScriptとCSSの最適化
  • WP Fastest Cacheによるキャッシュシステムの作動
  • .htaccessとWP Fastest CacheによるGzip圧縮とブラウザキャッシュの設定

 だいぶWP Fastest Cacheに頼っています(確かフォントの圧縮設定などは自分でhtaccessに書いていた気がするが不明)が、まあまあ不便はしていませんでした。
 LiteSpeedでなくとも、これでだいぶ高速化できると思います。

LiteSpeed Cacheで調整

 LiteSpeedにサーバを変更したことにも関係しますが、Autoptimize+WP Fastest CacheからLiteSpeed Cacheに切り替えました。
 LiteSpeed Cacheではだいたいそのままの設定でWP Fastest Cacheを代用できます。
 そのままAutoptimizeと併用することもできたのですが、LiteSpeed Cache内にAutoptimizeを置き換えることができるオプションがあると知り、置き換えることにしました。
 置き換えについて書いた記事はこちら
 この効果は大分大きいように思えます。

.htaccessの設定

 主にWebフォントに関係したファイル拡張子(ttf,otf,woff,woff2).htaccessにgzipとブラウザキャッシュの設定を追加しました。
 参考にしたのはこちらこちらです。

CSSとJavaScriptの数の削減

 CSSの数を減らしました。
 というよりあれです。古いIEでWebアイコンフォントのサポートをするためのCSSとjsを使用しないようにしました
 これらのCSSはfunction.phpにより、フィルターフックでwp_headとwp_footerにインポートのコードをはりつけていたので、それらの出力をしないようにしました。
 シェア的にもIEさんは減ってきているので、もうこのサイトでは基本的にIEのサポートはあんまり意識しないようにしようかな…。

コメントなど

 色々書きましたが、大きいのはサーバの変更に、キャッシュプラグインとWebフォント周りのGzipとブラウザキャッシュ設定だと思います。
 これでも時間帯によっては点数が上下するので、安定できるようにCDNなども検討したいところ。こつこつ頑張ろうかと思います。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA