自分のブログを読み込んでみたら表示速度が重すぎてびっくり!こんなんじゃGoogleに評価を下げられてしまう...!ブログ記事の作成になれてくると自然と画像の数も多くなってくるもの。サイズを圧縮したりしても、画像の数が増えるとサイトの表示速度はどうしても遅くなってしまいます。そこで、ぜひインストールしておきたいのが画像遅延系のプラグインです。Loadに代表される画像遅延系のプラグインは、画面に表示されてない画像の読み込みを遅らせることでサイトの表示速度を上げてくれます。表示速度は検索エンジンによるサイト評価にも関わってくる大切な要素です。そのため、すぐにインストールしておきたいところなのですが、困ったことに画像遅延系のプラグインは目次系のプラグインと相性が悪いという難点があります。Plus(TOC+)で目次のジャンプ先がずれる場合の対応方法TOC+で生成された目次のジャンプ先がずれる場合の原因と対応についてまとめています。Loadを入れるとジャンプ先が思いっきりずれます。利便性のために用意した目次で逆に不便に...。Load」は名前から分かるとおり画像遅延系プラグインの一つですが、画像遅延機能はそのままにTOC+でジャンプしてもずれないという特性があります。そのため、TOC+を使用されている方にはうってつけのプラグインです。Load」についてご紹介していきます。いきたいところだったのですが!ちょっとした落とし穴があったんですよね。この記事ではそれについてもあわせてご紹介したいと思います。Loadとは画像遅延系のWordPressプラグインです。Loadに触発され開発されたプラグインとのことで、本家と同様に画面に表示されてない画像の読み込みを遅延させ、サイト全体の速度を向上させてくれます。Loadを含めて下記の4種類があります。Loaderそれぞれ設定できる内容などが異なりますが、他のプラグインとの相性なども含めてどれを使うか決めていくかたちになるかと思います。Loadのインストールから設定項目について説明します。LoadのインストールWordPressの管理画面からインストールします。ワードで検索しましょう。インストール後は「有効化」します。Loadの各設定項目です。Load:「ON」で遅延読み込みを有効化します。Images:画像について遅延読み込みを有効にする。Support:JavaScriptを使用できないブラウザのユーザーの場合はフォールバックとしてNoscriptタグを有効化する。Support:JavaScriptが使用できないブラウザを使っているユーザーの場合、フォールバックとしてNoscriptタグを有効化する。URls:対象外にしたいURLを直接指定できます。Exclusions:対象外にするページを決めることができます。トップページ、カテゴリーページ、アーカイブ、検索結果など。対象外にしたいページがなければすべて「OFF」でOKです。Colour:ロード中の画像の背景色この辺りは適当にお好みで。Loadを実行するスクリプトの記述をヘッダー(wp_head)にするかフッター(wp_footer)にするかを設定します。基本はデフォルトの「FOOTER」でよいはずで、不具合があれば「HEADER」に変えてみてください。Loadを無効化する。Loadを無効化する。それぞれのプラグインを使用してなければ「ON」でOKです。Threshold(画像のロードのしきい値)Threshold:しきい値(ピクセル)ページ中の画面上に表示されているポイントから何ピクセル先までロードするかを設定します。0pxであれば事前に全くロードしないので表示されて初めてロードし始めます。多めに取っておけばそれだけ急な表示にも対応できますが、その分、表示速度の改善の度合いは薄れてしまいます。僕は400pxで設定しています。Loadはなぜ目次のアンカーリンクでずれないのかTOC+などの目次系プラグインは、ページの読み込み時にアンカーリンクのジャンプ先までの距離を設定します。Loadは画像の読み込みを遅延させてしまいます。そのため、読み込まれてない画像は高さが0pxで設定されてしまい、距離に誤差が生じてしまいます。Loadはまだ読み込まれてない画像の高さも取得できるため、アンカーリンクが正確に機能します。Load系プラグインは画像がスクロールしない限り読み込まれないことから、検索エンジンのクローラーが取得し漏らしてしまうという弱点もあります。画像がクローラーに認知されないことから検索エンジンにインデックスされないため、訪問機会を失っているとの見方もあるようです。Loadではこの問題もクリアしており、記事中の画像も全てクローラーに認識されるというメリットがあります。設定を行った前後の変化を表示速度測定ツールで計測してみました。使用させてもらったサイトはこちらのサイト。DevelopersGoogle様に測っていただきます。世界の公式なので間違いありません。有効化前で、左がモバイルで右がPC。Loadを有効化した後。同様に左がモバイルで右がPC。改悪されとるやんけ!どういうことかよくわからないのですが、何故かPCの方のスピードが落ちてしまいました。改善したいモバイルはぴくりとも変わってないし何でや...。項目の設定の仕方で変わるのかもしれませんが、ちょっと納得のいかない結果です。Loadを設定する意味がなっしんぐ...。Loadにはスピードが改善されない他にも、もう一点だけ大きなデメリットがあったのですね。それが、WordPressテーマ「JIN」で使用すると一部デザインに余白が生じるということです。PCサイトの方は特に問題はないのですが、モバイルサイトで、画面下部のページャーとプロフィールの間に謎の空白が...。ちなみにこちらが通常の場合。こちらの問題については、実はすでにJINのフォーラムで話題に出ており、解決策も示されているようです。Loadを使用する場合はコンテンツマガジンを利用しない余白でCSSを埋めるという解決方法が提案されています。JINユーザーはここさえクリアできればこれで決まりと言わんばかりの良プラグインなのですが...。Loadはオフにしてしまいました結局オフにしてしまいました!ぐだぐだな紹介になってしまいましたが、通常は普通に速度改善されるプラグインだと思います。このブログで速度改善が見られなかった原因が分かったら、あらためてこちらの記事に追記したいと思います。JINとの相性が一部よくない部分がありますが、こちらはJINに固有の現象ですので、他のテーマを使用されている場合は問題はありません。Loadというプラグインがリリースされているくらいです。比較しつつぜひ最適なプラグインを導入していただき、積極的に速度改善に臨んでいただければと思います。MEヨノイヨノイといいます!ブログや文章を書くことが好きで、ネットのさまざまなサービスや製品について発信しています!Amazonが大好きなのでそのあたりの情報が多め。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。スマホにくっつくワイヤレス型モバイルバッテリーBrickspowerがと...TweetDeckをスマホアプリ化するTJDeckとその後継アプリMTD...スポンサーリンクブロガーヨノイ(yonoi)アーリーリタイヤを目指すブロガーです。日々の生活をより良く暮らすために新しいサービスやデバイスについて勉強中です。