記事の表示速度を上げるためにブログのテーマをリニューアルしました

2016年12月8日に行われた「本気でアフィリエイトを学ぶ会2016」の中で、Googleの中の人の話を聞けました。

その中で感じたのが「ブログの表示スピードの重要性」。

話を聞いている最中からブログの表示スピードを徹底的に速くしようと決意しました。

表示スピードはかなり上がったと思うので、やったことを紹介します。

CSSをインライン化する

ページスピードの表示に関するアドバイスをしてくれるGoogleのツール「PageSpeed Insights」を使うと、

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」

という項目があります。通常Webサイトを作るとき、CSSは外部ファイルに書いてそれを読み込みますが、ページを開いた時に表示される部分に関するCSSはHTMLファイルのヘッダーに直書きすることを推奨しています。

このブログはCSSフレームワークの「Foundation」を使っていて、リニューアル前のCSSのファイルサイズは圧縮した状態で90KBでした。

フレームワークなので、使わない記述も多数ありファイルサイズが肥大化している状態です。

そこで必要な部分だけを取り出してみると、結局レスポンシブを実現するためのグリッドレイアウト部分だけになり、それに独自のCSSを加えることでファイルサイズを13KBと85％削減することができました。

ここまで小さくできたのなら外部ファイルとして読み込むのではなく、ヘッダー内にそのまま入れることにしました。

その結果、ページを開く時に、一度CSSが効いていない状態が一瞬表示され、その後ちゃんとした表示になるということが無くなっています。

読み込みが終わった瞬間に「パッ」っと表示されるのはなかなか気持ち良いです。

ただ、画像の読み込みで一瞬間が空いてしまうのが残念なんですよね〜。

JavaScriptの排除

ページの読み込みを遅くしているのはJavaScriptが原因である場合が多いです。

なので、新しいテーマでは余計な機能をやめ、JavaScriptを徹底的に排除しました。

排除したのは、

• ハンバーガメニュー
• SNSのカウント表示
• コメント機能のDISQUS

です。

ハンバーガーメニュー

画面が小さいスマホ用に使われるのが「三」のようなハンバーガーメニューです。

このブログでも使っていたのですが、ハンバーガーメニューを使って表示させるのがカテゴリーだけでした。

検索エンジンからのアクセスがほとんどのこのブログでカテゴリーメニューは必要なのか？という問いに対して、記事下にもカテゴリー表示しているのでそれで十分だろうという判断をしました。

ハンバーガーメニューに関しては不要論も根強くあるので、それらの情報に共感したことも辞める決意の一助になっています。

ハンバーガーメニューの実装にはJavaScriptとCSSが結構使われているので、これを辞めるだけでも読み込むjsファイルがかなり減りました。

SNSのカウント表示をやめた

ページの表示がされても、タブで読み込みマークがクルクル回っているのは、SNSのカウント数を取得するJavaScriptが原因であることがほとんどです。

読み込みの遅延は、ページのスクロールにも影響が出ることもあります。

SNSのカウント表示をするメリットは「この記事スゲーよ」的なアピールにしかならず、0が並ぶことが多いこのブログにとってはそれすらも達成できていない状況です。

それほどのメリットのないことを実現するためにページの表示スピードが遅くなっているのなら、この機能はいらないだろうということで、カウント数を表示しないことにしました。

コメント機能のDISQUSをやめた

このブログのコメント欄にはDISQUSを使っていました。

とても高機能なのですが、読み込みが遅く、表示されるまで時間がかなりかかっていました。

3年続けたこのブログについたコメントは10件程度なので、「コメント欄も要らないや！」と勢いで削除。

辞める時はスッパリと辞めるのが大事です。

その他使わないものは読み込まない

WordPressもjQueryなど使っていないのに読み込んだりするので、使っていないのに読み込まれるファイルは読み込まないようにしています。

JetPackとかいろんなもん読み込んだりしていますからね。

残ったJavaScript

上記のように、不必要なJavaScriptを削ったところ、残ったのはGoogleアドセンスとGoogleアナリティクスのみとなりました。

めっちゃスッキリ！！

高速化の結果

上記のような対応をしてPageSpeed Insightsの評価がどうなったかも紹介します。

評価に使ったページはGoogleAnalyticsでページの表示スピードが一番遅いと言われた「FacebookページやWEBサイトを「いいね！」した時に友達に知られないようにする方法 | 経験知」です。

モバイル

モバイルの結果は91点になりました。

修正を考慮すべき点も見てみましょう。

画像に関してGoogleさんはこのようなアドバイスしてくれました。

「https://tpc.googlesyndication.com」って…

お前んとこの画像じゃん！！

アドセンスの画像ですよこれ。

ここに表示されているのは全てアドセンスの画像なので、Googleさんがきっちり圧縮してくれたらこの表示は無くなりますよね…。

次の「ブラウザのキャッシュを活用する」ではGoogleさんはこのように言っています。

「https://pagead2.googlesyndication.com」

と

「https://www.google-analytics.com」

って、

あなたのとこのサービスですよね！！

「次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください」と言っておられるので、Googleにハッキングしてキャッシュの時間変えろってことですかね？

無理です。

パソコン

パソコンの結果は85点。

こちらも点数が下がっている原因は、モバイル同様Googleのサービスです。

ただ、モバイルと違い、このブログの画像もサイズ変更と圧縮をしろと言われました。

画像に関してはWordPressのプラグイン「EWWW Image Optimizer」を使っているので圧縮はそれなりにできているはずです。

そしてよく見ると、retinaディスプレイ用に縦横160pxの画像を80pxにして表示させているところを注意しています。

ディスプレイの高解像度化が進んでいるので、この項目は対応せずこのままにしておきます。

以前との比較

以前のテーマからどれだけ点数が改善したかというと、ほとんど変わっていません。

それは、以前のテーマでもそれなりに対応していたからです。

上記記事では98点までいっていますが、PageSpeed Insightsの評価は日々変更しているようで、点数での比較はできません。

ですが、修正すべき内容はGoogle次第というところまで来れたので、かなりの改善になっているはずです。

おわりに

PageSpeed Insightsで提案される改善内容は全て実装できたと思います。

あとはGoogleさんが評価基準を変えるかGoogleさんが提案した内容を自身で改善するかですw

これらの対応はフロントエンドの部分の対応なので、次はWordPressの動作やサーバの改善など、バックグラウンドの改善も行なっていきたいと思います。

僕の使っているサーバは「ConoHa」でKUSANAGIを使っています。こちらの記事も参考になれば幸いです。