WebDesign Dackel

WordPressのブログでプチリニューアルを兼ねて高速化に挑戦してみた

Hatena0
Google+0
Pocket0
Feedly0

先週の土日を使って、ブログのプチリニューアルをしました。
見た目は大きく変えていませんが、

  • 背景色をベージュから白へ
  • コンテンツ幅を少し広く
  • 行間を調整

など、細かい点を調整してみました。

スタイルを調整しようとCSS(Sass)をいじっていたら、ちょっと前に書いたものなのに色々と気に入らない箇所があり、気づいたら一から書き直していました。。
そして、CSSを書き直すなら…とずるずるやって、結局HTML+JSを含めて全て一から作り変えました。

これを機会に、やろうやろうと思って中々手を付けていなかった高速化に挑戦してみたので、やったことを纏めておこうと思います。

まだ途中の部分もあるので、暫定的なものとなってしまっていますが、誰かのお役に立てたら嬉しいです…。


ちなみにこのブログはWordPressを使っているのですが、途中まではWordPressに限らない内容になっています。

これまでの環境と表示速度など

まずは、リニューアル前の状態の整理から。

SassCoffeeScriptはそれぞれ単一ファイルにまとめて、圧縮(minify)しているのですが、なんといってもjQueryの容量がでかい!

また、highlight.jsbowerで持ってきたものをそのままwebpackでまとめていて、結構容量が大きめでした。

GTmetrixさんの評価

記事ページのデータサイズが1.29MB…。画像を多く使うようなブログでも無いのに「何があったの?」ってレベルですね。

トップページ

リニューアル前記事ページのGTmetrixの評価

記事ページ

リニューアル前記事ページのGTmetrixの評価

この結果に若干へこんだのが、高速化挑戦のきっかけでもあります。笑

要らないものをどんどん削ぐ!

WordPressの高速化で思いつくのが、キャッシュ系プラグインを入れるというものですが、一度他のサイトで痛い目にあったことがあるので、まずはもう少し根本的なところから改善していきたいところです。

cssnanoを使ったCSSの最適化と見直し

これまではSassのコンパイル時に、outputStyleオプションをCompressedにしていただけでした。

これだけでは物足りなかったので、もっと効率的に圧縮してくれるものは無いかなと探してみると、cssnanoが良さそうだったので導入してみました。

詳細は公式サイトを見ていただけると助かりますが、個人的にcssnanoの良いなと思った点は以下。

  • 重複したセレクタをいい感じに纏めてくれる
  • 不要なダブル(シングル)クォーテーションを削除してくれる
  • ライセンス用のコメントは残しつつ、不要なコメントのみ残してくれる
  • プロパティの意図を把握して、最適化してくれる

PostCSSのおかげで、かなり賢い最適化をしてくれるみたいで、今後もお世話になりそうな感じがしています!

公式サイト:cssnano: A modular minifier based on the PostCSS ecosystem


簡単に使い方についてです。
gulp用のプラグインがあるので今回はそちらを使用。

$ npm install gulp-cssnano

gulp-sassgulp-autoprefixerと使うとこんな感じ。

gulp.task "sass", ->
  gulp.src "./sass/**/*.scss"
  .pipe $.sass().on "error", $.sass.logError
  .pipe $.autoprefixer()
  .pipe $.cssnano()
  .pipe gulp.dest "./css"

bootstrapを削除し必要なものだけ持ってくるように

これまではレイアウト関連(グリッドやコンテナ)、ボタン、フォーム関連のスタイルなど、一から書くのは少し面倒なものはbootstrapを使っていました。そうすると、結構余計なものまで持ってくる必要があります。

ただ、今回本当に欲しかったのはレイアウト位だったので、公式のサイトからSass版を落としてきて、必要なファイルだけ読み込ませる形で調整しました。

これで、ぼちぼちの容量削減に成功しました。

脱jQuery

古いブラウザへの対応は気にしていないし、もともと大した事はしていないのでjQueryを捨てました。

ただ、SNSのカウントを取得するのにAjaxは必要だったので、代替としてsuperagentを使用しています。
superagent単体ではjsonpを扱えないので、superagent-jsonpも併用しています。

WordPressでjQueryの読み込みを外す

デフォルトで勝手にjQueryを読み込もうとするので、これは明示的に外しておく必要があります。

function app_scripts() {
  if (!is_admin()) {
    // jQueryの登録を外して、独自のJSファイルを読み込ませるように
    wp_deregister_script("jquery");
    wp_enqueue_script("jquery", get_bloginfo("template_directory") . "/dist/js/app.js", array(), false, true);

    // 目次用のスタイルとJSも登録を外す
    wp_deregister_script("toc-front"); 
    wp_deregister_style("toc-screen");
  }
}

add_action("wp_enqueue_scripts", "app_scripts");

記事ページに表示させる目次の出力に、Table Of Contents Plusを使っているのですが、このプラグインがCSSjQueryに依存したファイルを読み込ませているので、外すようにしています。

他にプラグインを使っている場合は、同じような感じで読み込みしないようにしていきます。

脱jQueryで役立つライブラリなど

有名なものばかりなのでわざわざ書かなくても良いかなと思いましたが、念のため。

smooth-scrollはおよそ満足いっているのですが、画面下部へ移動する際の挙動や、スクロール位置の指定方法、スクロール中にホイールを動かしても止まらないなど、細かい点でちょっと不満があります。

そのため、今ブログ用に他のライブラリへ依存しないスクロールライブラリを書いているので、出来上がったらそちらに移行予定です。

highlight.jsの容量を減らす

bowernpmでインストールしたものを使用すると、必要ない言語の設定まで入ってしまうため相当容量が大きくなっていました。

ダウンロードページCustom packageで、使用する言語をポチポチと選択したものを使うことで、かなりの容量削減が実現できました。

highlight.jsのカスタムダウンロードページ

FontAwesomeから卒業しIcoMoonへ

FontAwesomeは沢山のアイコンが入っていて、質も高いのでとても便利ですよね。
その分、そこそこなファイルサイズとなってしまいます。サイト内で使うアイコンだけに限定したいなぁ〜と思っていました。

そこで、IcoMoonで使いたいアイコンだけ選ぶ方法へ移行しました。

元々、ロゴやSNS用のアイコンなど、所々IcoMoonを使ってアイコンフォント化している箇所があったので、それを全面に採用した流れです。

必要なアイコンの選択

IcoMoonで必要なアイコンだけ選択する

基本は好きなフォントセットを選択して、使いそうなアイコンを選んでいくだけです。

FontAwesomeは全体的に丸っこいデザインですが、もう少し「シュッと」した感じにしていきたかったので、Material Iconsをメインにしてみました。

参考サイト

駄目押しでキャッシュ系プラグインを導入

ここまでの施策で、だいぶファイル容量を抑えることができました。
最後に駄目押しでキャッシュ系のプラグインを導入してみようと思い、いくつか見ているとWP Fastest Cacheが良さそうだったので導入してみました。

設定した項目など

設定した項目は次の通りです。

  • キャッシュを有効化
  • 新しい投稿のタイミングでキャッシュをクリア
  • HTMLの圧縮
  • Gzip圧縮
  • ブラウザキャッシュ

CSSJSの結合周りは、既にgulpで行っているので設定しませんでした。

追記
HTMLの圧縮を有効にすると、ソースコード中の空白が消えちゃっていたのでこの設定は無効化しました。


設定を行うと自動でhtaccessに設定を書き込んでくれますが、書き込み権限が無い場合などは「これを貼り付けてください」というモーダルが表示されるので、表示された内容をhtaccessにコピペする必要があります。

参考サイト

高速化の結果

必要の無いファイルをどんどん削いでいった結果、ファイルサイズが大きく変わり、全体でおよそ1/5程度まで小さいサイズになりました!

JavaScript

一番大きな変化があったのがJSです。

  • リニューアル前 => 567 KB
  • リニューアル後 => 88.9 KB

1/6以下のファイルサイズまで小さくなりました。

CSS

CSSも半分以下のファイルサイズに。

  • リニューアル前 => 129 KB
  • リニューアル後 => 53.1 KB

アイコンフォント

使うフォントだけ選択した結果、1/4以下にまで削ることができました。

  • リニューアル前 => 142 KB
  • リニューアル後 => 30.9 KB

GTmetrixさんの評価

トップページ、記事ページ、どちらもかなりのランクアップに成功です。

トップページ

リニューアル後のトップページのGTmetrixの評価

記事ページ

リニューアル後の記事ページのGTmetrixの評価

ページの読み込み時間が何故か若干長くなりましたが、体感では相当早くなっているので気にしないことにします!

おわりに

プチリニューアル中に、なんで同じようなスタイルをもう一回書いているんだろう…。と、なんとも言えない気持ちになりながら作業した甲斐のある結果となり大変満足しました!

今回はフロント寄りの高速化だったので、時間のあるときにサーバ側のチューニングもやりたいなぁと思っています。(Nginx入れたい…)


jQueryを捨てきれるサイトなら積極的に捨てて行きたいところですが、それが難しいサイトもありますよね。

なのでまずは、アイコンフォントやCSSの最適化、本当にCSSのフレームワークがいるか等、出来そうなところからちょこちょこと手を加えていくのが良いかなぁ感じました。