Twitterにてブログの新着記事更新情報をお届けしてます!(ここをクリックするとTwitterへ)

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

あなたのサイト、読み込み、遅くないですか?
解決策は山ほどあります。

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

スポンサーリンク

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

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

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

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

  1. まずは見える範囲から表示されるように優先順位を正す
  2. ヘッダー以外の場所に読み込むスクリプトを分散させる
  3. そもそもの処理量を減らす

これですね。

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

夏休みの宿題を想像していただければ理解は早いと思う。
HeadにCSSスクリプトを詰め込む、というのはいわば夏休み初日に宿題を全部終わらせるという指令と一緒です。
これを「宿題」という大きな括りにして最終日に追いやると、2つ不都合が出ます。

  • 遊ぶ予定をたてても、一緒に遊ぶはずの友達は適宜「自由研究」などで遊べない。
    つまり、夏休み最中にやるべき予定もうまくいかないことがある(不具合が出る)。
  • 最終日にえげつない量の宿題が待っている(結局、処理が落ちる)
この2つですね。まさに。
夏休みがほしい
余談ですが、私はわりと宿題をやるほうでした。
でも、計画性がないので最初の1週間である程度終わらせるけど、前々日くらいに友達に自分の知らない課題があることを伝えられて最終的には泣きをみるタイプでした。
ぶちくま
ぶちくま

楽しい立つ休みにするためには計画性が大事です。

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

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

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

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

スポンサーリンク

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

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

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

Head Cleanerとは

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

  • CSSやJavascript、HTMLの圧縮
  • キャッシュ作成
  • 内のJavaScript をフッタ領域に移動
これらを結構細かく設定しながら運用できます。
とはいえ、Cocoonに備わっているCSSやJavascriptの圧縮機能とかぶるところもあり、キャッシュがたまるのも精神衛生的によろしくないと思い、今回は見送りました。
シンプルなテーマを運用している方であれば、これひとつでサイト高速化が実現できる可能性もありますね。

「Scripts to Footer」を利用する

今回はこちらの記事を参考にさせていただきました。ありがとうございます。

WordPressプラグイン3つでPageSpeedInsightが30アップした話

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

  • JavaScript to Footer
  • Async JS and CSS
  • Asynchronous Javascript
これはシンプルに、CSSとJavaScriptを下界送り(フッターへ移動)してくれます。
いいところは、jQueryという支持に関しては移動しないという設定ができるところ。
いま、jQueryはライブラリ型のJavascriptで人気があるので、たくさんのテーマで利用されています。
場合によっては、スクリプトをフッターに送られると困ることもあります。
jQueryを除外しておくことでエラー回避ができる場合もあるので、シンプルながら使いやすいと思います。

導入後の結果

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

スポンサーリンク

処理量を減らすのが一番

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

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

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

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

RinkerやWPAPは相性が悪いのかもしれませんね。
GoogleAdsenseをやめるわけにはいかんしなぁ。

ぶちくま
ぶちくま

ここに手をつけるのは骨が折れそうなのでやめました。

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

ではでは。

コメント