ブログ高速化のためにやった5つの方法｜WordPressテーマはCocoon

5分でわかるブログ高速化

私はPageSpeed Insightsを真っ赤な「Low」という警告を半年ほど放置しました。

そんな私でも、たった５つの方法を実践するだけで「Good!」までもっていきました。

なんと、初心者でも簡単にできます！
PHPファイルに触らずにプラグインと、サーバーの設定をいじるだけです。

 

画像を見直すことで７割は解決する

ブログ用のサイトであれば、コンテンツ（記事）の中にちょこちょこ画像を挟んでいると思います。
この画像たちがスピードを悪化させる原因です。

サイト高速化のために画像でやるべきことは３つ

とりあえず、サイトを重くしている原因をスリム化していきます。

詳しい方法はこちらの記事へ

数字は最後にまとめますが、あれだけで真っ赤だったPageSpeed Insightsの評価が、オレンジ色まで戻ってきました。

個人的にはオレンジ色でも及第点なので、ここでやめてもOKだと思います。
しかし「どうせなら記事にするか」と思ったので、もう少し深めていきたいと思います。

エックスサーバーなら簡単に高速化設定できるよ

とりあえず及第点までは戻ったのですが、どうせなら、PageSpeed Insightsの評価を緑色にしたい、と思ったのが泥沼。

Googleさんから「いいね」をもらうべく、サーバーの力も借りることにしました。

 

エックスサーバーでmod_pagespeedをONにする

こちらも画像付きで別記事で解説してます！

キャッシュを最適化していく

やったことは「プラグインの導入」それと「どれがいいかひたすら比較」です。
比較がどうしても時間がかかるので、だいたい1日おきくらいにプラグインの項目を少しずついじって、データを取って、また変えて、を繰り返すイメージです。

結論だけいえば、WP Fastest Cacheを導入することになります。

 

詳しくはこちらも別記事です。

CDNは難しいのでJetPackの設定だけ利用する

CDNという高速化に役立つ機能があります。

こちらも警告が出ているのですが、いろんなところからデータを置いたり引っ張ったりする、という構造上、コンテンツが表示されない系のエラーが出ることが多いみたいです。

JetPackのプラグインを使っていれば、WordPressのPhoton（image CDN）というCDN機能が簡単に使えます。
いつか解説しますが、これを切ると点数が上がったり下がったりするのでとりあえず入れてみます。

Rinkerとカエレバの画像が表示されなくなる

ちなみに、この時点でRinkerとカエレバで作った物販系のリンクが死んでます。

まぁたぶんキャッシュかCDNのエラーだろうということで、1日放置したら表示されてました。焦った方はキャッシュをクリアしてから放置してみると意外と治っているかも。
キャッシュが更新されて表示されるようになったんだと思いますが、もしダメそうならJetpackの画像設定を変更してみてください。

追記：結局CloudflareというCDNを導入しました

正直なところ、もう高速化できているので不要かと思いましたが、記事完成のためには必要な知識だと思い実践してみました！

PHPをバージョンアップするとサイトスピードが上がる

そういう噂がありましたので、エックスサーバーのPHP ver.7を更新してみました。
とはいえ、メジャーなアップデートじゃなかったようなので、正直あまり変わりませんでした。
もし、2015年くらいPHPアップデートされていなければ、やってみる価値はあります。

レンダリングブロックを回避する

抜本的な改革が必要だという結論になり、

レンダリングブロック

という聞きなれない警告にも対応することにしました。
といってもやること自体は難しいことではありません。

レンダリングブロックについての簡単な考え方

基本的に、読者の端末（ブラウザ）があなたの記事をサイトから構成するときには、
シンプルに「頭」から「足」にむかって、上から舐めるようにひとつずつの「司令」を読み込んでいきます。
この「司令」なんですが、スタイルを決定する「CSS」や、サイトの動きを制御する「Javascript」などの形式をとったりしていて、HTMLという形をつくっています。
先ほどから圧縮だの何だの言っているCSSやJavascript、HTMLっていうのは、
この司令を「なるべく簡潔に、余計な指令を挟まないようにする」という作業のことです。

この指令も、優先順位をつけることでよりスムーズなサイト構成ができるようになります。
大体の指令は、「頭」つまり＜head＞という部分に詰め込みます。
でも、本当は「足先」くらいにあっても困らない指令があります。
Googleは「頭に指令が詰め込まれすぎて読み込みができなくなってるから、もう少し順番つけていらないやつは消すか後に回すかしろよ」という警告を出しているんですね。
これがレンダリングブロックということです。

どんな指示を後に回せばいいのか

実は、何でもかんでも指令を後回しにすればいいわけじゃないんです。
Googleとしては、まずはファーストビューを完成させろ、ということを望んでいます。
とりあえずコンテンツを表示しろ、ってことですね。
不必要なアニメーションやデザインは、コンテンツが表示されてからでもいいわけで。

コンテンツとして何が重要か、というのはサイトによると思います。
ただ、ほとんどのブログでは「文章」が大事かと思いますし、
画像主体であれば、読者が観にきた画像を最初に表示された方が安心するかもしれません。広告なんかは当然後回しになるわけで。

初心者にはわからないのでとりあえずフッターへ移動

長々と書きましたが、私も初心者なので、何が正しいのか、どうすべきかは、

というわけで、エラーが出ない限りは、まずはGoogle先生のおっしゃるように、レンダリングブロックだけは解消しましょう。

プラグイン「Scripts to Footer」で解決

今回もプラグインで解決します。
詳細は別記事にしますか。

これでようやく緑ゾーン、「Good!」評価をいただけました。

画像にするのが面倒なので、なんとなくPCもGoodな緑色評価になったことはお察しいただきたい。

一応、これでPageSpeed Insightに関しては高得点を取ることができました。
同じようなCocoon利用者であれば、同じ方法でもある程度は挙動がおかしくなることはないと思います。

一応モバイル速度も3秒台まで上がっているよ

とはいえ、やはり広告が多くなったり、画像が多い記事になると４〜５秒台になることも。

まとめ：Cocoon機能を生かしてプラグインは減らしたい

ただ、そもそもCocoon自体が高速テーマなので、今回のようなプラグインはできれば使いたくないなぁ、とは思っています。
自分でコードをみつけてfunctions.phpに記入しても良かったのですが、後々、Cocoon側でさらなる対応をすることもあろうと思い、取り外しも簡単なプラグインで処理しました。

個人的には、70点台が安定して出せれば無理に対応しなくてもいいかな、とは思ってます。あくまでも記事作成のために対応策を書いた、というだけの話。

今回の感想と後日談

最低限やっておけばいいサイト高速化のための処理

いろいろやってはみたものの、これで高得点はとれるな、と感じました。

あと、どうにもRinkerとかWPAPとかの物販リンク系が悪さをしているのか、その後点数が下がったりすることが多くなりました。体感としては、画像が多くなければまったく問題なく感じるのですが。

ではでは。

ブログサイト高速化の測定サイトまとめ