WordPressのブログを高速化する方法

SEO効果アップが目的

ブログの表示スピードをアップしたので、今回調整したことをまとめておきます。
体感とはいえ、実際にwebサイトの高速化はできたと思います。

ページの表示スピードは、googleの順位にも影響すると言われているので、重要視したいポイントです。

多くのjsは</body>の直前に配置

jQueryとかheadに置く必要のあるjs以外は全て、</body>の直前に配置させて読み込みを遅らせます。
これをさらに突き詰めると、特定のjsを5秒後に読み込むとか、一定のスクロールがあってから読み込むとか、jsで対応することになります。

不要なpluginを精査して停止する

どこかひとつの機能を持たせる為だけに、全ページで読み込まれるのは良くないです。
であるならば、そのpluginを削って、似たようなjsをそのページだけに読みこませましょう。

wordpressにおいて、個別のページで読み込ませるには、カスタムテンプレートを使うと便利です。
>WordPressでJSとCSSを特定のページだけに読みこませる方法

ソーシャルボタン不要説

私が勝手に唱えている説ですが、ソーシャルボタンはわりと不要なんじゃないかなという話です。
Tweetボタン、facebookボタン、hatebuボタンにはじまり、pocket、feedly、lineボタン などなど

tweetしてくれる人は、chromeの拡張機能や、appなどでTweetしてくれますし、シェアしたい!って気持ちが抑えきれない人は、その気持ちに従ってシェアしてくれるであろうという、私の希望が先走った説であります。

別に、ボタンを置いてもtweetしてくれないじゃないか、「Tweet=’0’」という表示が切なくないと言ったらウソになりますけど。。

そして、何より、ソーシャルボタンの読み込みが、ページの読み込みを遅らせているという、揺るがない事実があります。
これを克服する為には、数秒贈らせて、ソーシャルボタンを読みこませるなどの措置で対応するか、ボタンをhoverするときに、はじめて読み込みを開始させるなどのjs対応をするなどすると良いという話もありますが、とにかく、あっても無くてもいいけど、あるとページが重いんであれば、無い方がいいということで、最小限にとどめました

前置きが長いですが、ソーシャルボタンは不要というか、厳選しておきました。不要説とか大きく盛ってしまってごめんなさい。最小限を選ぶといいかも!という話でした。

ソーシャルボタンは非同期設定

厳選したソーシャルボタンですが、ボタンを読み込まれないとページの他の読み込みが始まらないというのは、本当にきつい話です。
なので、読み込みが終わらなくても、他のパーツを読み込んでもいいよっていう設定ができますので、それを行いました。
tweetボタンとfacebookボタンだけにですが。

Facebookタグのカスタマイズ

Facebookタグであれば、以下のように、赤い文字の部分(js.async = true;)を追加します。
(コードの前後は割愛しています。)

js = d.createElement(s); js.id = id; js.async = true;

twitterタグのカスタマイズ

twitterタグであれば、以下のように、赤い文字の部分(js.async = true;)を追加します
(コードの前後は割愛しています。)

https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+’://platform.twitter.com/widgets.js’;

これだけで、非同期ができますので、選び抜いたTwitterとFacebookのボタンも高速にしておきましょう。

googleAdsenseも非同期に

前からサイトを運営していて、Adsenseの広告を久しくいじっていないという方。
私はそうだったのですが、今はAdsenseも非同期が選べるというか、デフォなんですね!

こちらも張り替えましょう。
非同期Adsense

PCページとスマホサイトで利用するjsを分けた

PCサイトはわりとリッチにjsを利用して作成しておりますが、スマホサイトでは3Gを考慮して、あまりリッチに作りこみはできません。
PCサイトで利用しているjsをスマホで読み込ませないようにするには、条件分岐で分けます。

wordpressでは、そのような条件にぴったりな便利なタグがあります。

head内容を完全に分岐させました。
あと、このブログは、head以外もこのタグを利用してPC用とSP用と区別して最適化してあります。
レスポンシブデザインを推奨するgoogleですが、PCでもスマホでも最適化されて見やすくなっているという点では、レスポンシブデザインといえるのではないでしょうか!といいつつ、レスポンシブデザインにしようと思って挫折しました。。最初から考えて作らないと%で組むのは大変ですね。

この、if(!is_mobile())ですが、iPadがスマホサイトになるという欠点があります。(私が制作したバージョンではありました)
その場合、はfunction.phpに以下のコードを追加して、ユーザーエージェントをコントロールしましょう。


画像の読み込みに関して

画像関係の調整は手を出さなかったです。
1ページ目以降を遅く表示させるとか、スクロールに合わせて画像を表示していくとか、検索するとでてくるのですが、
chromeのデベロッパーツールで確認していると、あとから画像を表示するのを見ていると、なんか気持ち悪いからという、身も蓋もない、好き嫌いでやめました。

というのと、少し考えてみたことを言うと、うちのサイトは、ページを流し読みをするユーザーがとても多いです。
そのユーザーがスクロールをした時に、画像の表示スピードが追いつかないという事態は避けたいです。
画像の読み込みが遅くて、少しカクカクして待たされても、全部一気に表示されていたほうが良いと判断して、表示はノーマルにしました。

画像の重さに関しては、imageOptimを利用するなど、軽量化をがんばるのは言うまでもありません。

まとめ

まとめると、
  • jsはなるべくの直前へ。
  • 遅いプラグインはおもいきって削除
  • ソーシャルボタンは必要なのを残して削除
これだけ見直すでも、体感で50%というとウソになるかもしれませんが、それくらいサイトの表示が早くなりますので、ぜひご検討ください。