「WordPress遅いよね」に立ち向かう(その2.5):CSS読み込み最適化Tips

どうもです,ayijkです。
昨晩はふとしたことで寝るのが遅くなってしまい,ブログ書く余裕がなくなってしまったので早起きを生かして朝書いています。というか電車の中で書いています。
6時過ぎに最寄りの駅を出る電車はそれなりに混んでいて座れないんですが(世の中のお父さん方,お疲れ様です!),それよりも早い電車は座れるので早起きのモチベーションが高まっている最近です。
どちらにせよ4時くらいには起きているので,朝ご飯をゆっくり食べたり,ちょっと調べ物したり,こうしてブログを書いたりとそれなりに充実した生活にスイッチできて超満足です。

眠いことは眠いんですが,不思議と冷たい空気に触れると目が覚めるもので。
あと,余裕を持って座れる電車に乗れればPC広げられるので色々できて最高ですね。通学(通勤)の1時間弱って,意識の埒外にありがちですが塵積もだと思います。

さぁみんなも朝活しよう!!
「毎日1時間早起きすれば1年で365時間だよ?」みたいな文章を見てはっとしたのを思い出しました。

PageSpeed Insightsスコアをまた更新しました

昨日はそんなわけであまり自由な時間が取れなかったのですが,帰りの電車で調べていたことを家に着いてからちょっと試してみたら存外うまくいってしまって,PageSpeed Insightsのスコアをさらにアップルすることができてしまいました。

改善したのは,昨日のエントリと同じく「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の項目です。

それでも世界はループ!

昨日ちょっとサイトの高速化に足を踏み入れてから,意外と楽しくてちょこちょこ作業してます。 基本はGoogleのPageS…

ただし昨日はJavaScript(特にjQuery)の最適化でしたが,今回取り組んだのはCSSです。
具体的には以下のような対処策を施しました。

  • 本サイトで実装している複数のCSSを1つのCSSにまとめる(Autoptimzeプラグイン使用)
  • 上記CSSから,スペース,改行などを除去して圧縮する(Autoptimzeプラグイン使用)
  • 上記CSSを内にinline化(Autoptimizeプラグイン使用)
  • 外部CSS(FontAwesome,jQuery-UIなど)のCSSの読み込み位置を内から直前に移動(functions.php変更

上記の対策を取ることで,スコアは以下のようになりました!

モバイル,パソコンともに夢の85点以上です。

お詫び

そんなわけで満足できる改善が果たせたのですが,具体的な手順についてはまた後日,詳細にまとめたいと思っていますので今回は省略します。

前回,前々回のエントリ以外にもWordPress高速化のために行ったことは多数あるのですが,そこに行き着くまでに多くのサイト様を参考にさせていただきました。
逆をいえば,私の環境に適した設定をすべて行ってくれている単一のブログはなく,今このタイミングでWordPress高速化のための私なりの最適解Tipsをまとめることは結構な意義があるような気がするからです。

ブログを書いていて一番のモチベーションは当然アクセス数(と「うまくいきました!」のコメント)なのですが,以前書いたこちらの記事がちょうどうまい具合にHITした快感が忘れられません。
(WordPressのドメイン変更に伴ってページview数がリセットされてしまったのが痛いですが,以前は本サイト1番の閲覧数でした)

それでも世界はループ!

※このエントリはWills3をBloggerでやっていた時に書いたものを,WordPress移行に際して改訂したものです…

あまり狙いすぎるのも良くない気がしますが,言ってみればいわゆる「良記事」を書くことがブロガーの意義であり楽しみでもあると思うので,まぁ長いスパンで多くの人の役に立てるような記事を書きたいと思います。

……と,今回はチラ見せどころか何も見せていないのですが,お詫びということでご容赦いただければと思います。

それでは!