Headをすっきりさせて読み込みを早くするお勧めのWPプラグイン

あなたのサイト、読み込み、遅くないですか？

解決策は山ほどあります。

今回は、方法としてはそれほど重要度は高くないので読む必要はありませんが、（おいおい）「もう少しGoogleの評価をあげたい」というひと押しになるような記事になります。

1分でわかるスクリプト最適化でサイトの読み取りを早くする方法

ブログ高速化の駄目押しの一手として、レンダリングブロックしているCSSやJavascriptをフッターに押し込む方法を試します。

ファーストビューまで時間がかかる原因

ヘッダーで読み込むものが多すぎると、処理がそこで止まってしまい、コンテンツを表示するのが遅くなってしまいます。

一番いい解決方法としては、

これですね。

この記事は、「Scripts to Footer」というプラグインを使って、headerをスリム化することで処理を軽減させる方法を中心に解決を図ることを目的としています。

①見える範囲をとりあえず表示させるために

これは、本来的にいえばCSSやJavascriptをHTMLの適切なところに入れ込むことで解決します。でも、これはWordPressでいえばテーマの中までいじることになるので面倒です。非常に面倒です。

わたしはもう二度とテーマの中身はいじらないと心に決めているので、今回はここはみなかったことにしましょう。

ユーザーはファーストビューさえあれば離脱しない

一応、理論的なところは説明します。

考え方としては、例えばメインの記事とサイドバーがあって、サイドバーがさきに表示されているようならメイン記事を表示できるようにしましょう、ということです。あるいは、記事の中でもCSSやJavascriptは全部最初から必要な指示ばかりではありません。

例えば目次を先に表示させるのか、記事途中にちょっとだけでてくるフォントやアイコンを先に読み込むべきなのか、フォントやアイコンならその場その場で指示があったほうが、最初にまとめて指示を受けるよりいい、ということです。

「CSSの配信を最適化する」

このメッセージが出ている場合には、この課題をクリアする必要があります。
私はやりませんが、先に説明したように、例えば途中でデザインとして別のウェブフォントをとりいれるためにCSSの記述をしている、などのときに、そのデザインがでてくるところに直接書き込む→インライン化する、ということをやってのける必要があります。

とはいえ、私のようにただCSSをテーマのスタイルシートに書き込んでいるだけのくまには難易度が高すぎます。

小さいCSSとか大きいURIとかがよくわからない

途中にCSSというスクリプトを入れ込むと、そこで読み込みが始まります。
注意したいのは、大きなデータ処理を後回しにすると結局痛い目にあう、ということです。

夏休みの少年を想像すれば理解できる

夏休みの宿題を想像していただければ理解は早いと思う。

HeadにCSSスクリプトを詰め込む、というのはいわば夏休み初日に宿題を全部終わらせるという指令と一緒です。

これを「宿題」という大きな括りにして最終日に追いやると、２つ不都合が出ます。

この２つですね。まさに。

夏休みがほしい

余談ですが、私はわりと宿題をやるほうでした。

でも、計画性がないので最初の１週間である程度終わらせるけど、前々日くらいに友達に自分の知らない課題があることを伝えられて最終的には泣きをみるタイプでした。

適切な課題解決には予定を小分けに分類して優先順位をつける

「宿題」をいちど小分けにして、「自由研究」「読書感想文」「絵日記」など小さな課題にします。
これを夏休みの予定に挟み込んで行くことに、スムーズな夏休みを過ごすことができるわけです。

初日に絵日記をやるやつはいないですもんね。絵日記は最終日に帳尻合わせにやるべき課題です。読書感想文は読書の後に、自由研究は親を巻き込むのでお盆休みに。
適切なタイミングにやる気スイッチを押すことで、効率よく課題を終わらせることができるのです。

と、説明はしましたが、夏休みのない大人たちには無縁の話で、プログラムを組めない私にこの課題を解決するのは少しばかり難しい話です。
私の中では、どちらかといえばテーマ作成の課題になると思うので、ここは手をつけずにおきます。

②スクリプトをフッターに持っていく

今回は、ここの解決のためにプラグインを用意します。

人気どころは高機能の「Head Cleaner」ですね。

Head Cleanerとは

高機能なヘッドお掃除プラグインですね。
今回はCSSやJavascriptの処理をフッターに回す、という目的で紹介していますが、いろいろできます。

「Scripts to Footer」を利用する

参考にしていた記事が消えてしまったようで、当サイトがオリジナルみたいなフリをして書きますが、ネタ元はある。

「Scripts to Footer」と似たようなプラグイン

これはシンプルに、CSSとJavaScriptを下界送り（フッターへ移動）してくれます。

いいところは、jQueryという指示に関しては移動しないという設定ができるところ。いま、jQueryはライブラリ型のJavascriptで人気があるので、たくさんのテーマで利用されています。

場合によっては、スクリプトをフッターに送られると困ることもあります。jQueryを除外しておくことでエラー回避ができる場合もあるので、シンプルながら使いやすいと思います。

導入後の結果

こちらも導入するとPageSpeed Insightsの結果はよくなりました。「medium」から「good」になるような感じですね。点数で言えば5点くらい。
この辺りは、正直サイトの表示スピードというよりは、あまり実感のわかない部分ではありますが。

処理量を減らすのが一番

そもそも、邪魔をしているスクリプトを減らすのが一番です。

広告やプラグインがヘッダーを重くしている１番の原因です。あまり使っていないプラグインや機能が被っているものなど、軽量化できる部分は減らしてしまうのが一番です。

物販のリンク作成ツールが結構邪魔する

ただ、運用を続けていくとまた点数が下がりました。

というよりも、レンダリングブロックをかましているのは「プラグイン」と「広告」そして「CDN」のようなのです。アイコンの取得や、広告や物販の画像の取得のためにヘッダーで色々やっているような感じでした。

というわけで、いろいろプラグインを入れてみて点数は上がったけども、今度は「プラグインを外す」作業が待っているようです。面倒だなぁ。

ではでは。