1. HOME
  2.  > 
  3. ブログTOP > 
  4. 高速化 > 無限スクロールプラグインが表示速度に悪影響を及ぼす理由
カテゴリ:高速化

無限スクロールプラグインが表示速度に悪影響を及ぼす理由

無限スクロールプラグインが表示速度に悪影響を及ぼす理由

WordPressには、デザイン性・機能性を拡張できるプラグインがたくさんありますが、中にはセキュリティの面で問題を起こしたり、表示速度を遅くしてしまったりと利用することでデメリットも出てきます。

今回は、以前いただいた高速化のご依頼で遅延の大きな原因となった無限スクロールのプラグインに関してご紹介します。無限プラグインを導入している方、これから利用を考えている方の参考になれば幸いです。

無限スクロープラグインとは

無限スクロールプラグインとは、おそらくWordPressでブログ運営をしたことがある人であれば一度は目や耳にしたことがあるプラグインではないでしょうか。

↓画像で説明するとこんな感じのやつです。

無限スクロープラグインとは

もっと読む」、「more」というリンクをクリックすると表示されている記事をさらに読み込むことができるプラグインです。

このプラグインのメリットは、ボタン一つで記事を読み込むことができ、新たにページを開く手間が省けること。ページを移動する必要がないということは、ページが開くまでの待ち時間を無くすことができ、見ている人のストレスを無くすことができます。

有名なものだと「Ajax Load More」というプラグインがあります。カテゴリを選択し任意の記事数をボタン一つで読み込むことが可能。利用者も多く、無限プラグインの中で使いやすに定評があり情報もたくさんネットにころがっています。

なぜ遅延の原因となるのか

なぜ遅延の原因となるのか

WEBサイトはアクセスされる度にサーバーからHTML、CSS、jsなどのファイルの情報をサーバーから取得し表示する仕組みです。そのため、表示速度を少しでも早くしたいのであれば出来るだけ読み込みに時間のかかるjqueryやファイル容量の大きいCSSの使用は避けたほうが良いということです。

また、無限スクロールの技術はAjaxとjqueryを使用することで非同期でデータを読み込むことができる便利な仕組みである反面、jsファイルの読み込みが必要になり表示速度の面で見るとデメリットになります

「Ajax Load More」プラグインもその一つで、CSS・jsファイルを大量に使用するためPage Speed Insightsで確認するとかなりの負担をかけていることが分かります。

このように、便利な機能があるのですがその多くは、遅延の主な原因となってしまっているのです。

どうすればよい?

どうすればよい?

表示速度よりもデザイン性を重視せざる得ない、そうしたいということであればjsファイルをヘッダーからフッターに移動するという方法があります。ただし、Page Speed Insightsのスコアの面では思ったほどの改善は期待できません。

反対にデザイン性よりも表示速度を重視したいという場合は、プラグインを利用せずに一定記事数以上を見せる際はカテゴリページに飛ばす方法が最善ではないかと思われます

「Ajax Load More」プラグインはUXの面で優れてはいます。しかし、サイト全体の読み込み速度を高速化すれば、カテゴリページに移動させたとしても差ほどストレスを感じさせることはないでしょう。

まとめ

まとめ

いかがでしたか?

無限スクロールプラグインが便利な反面、高速化の面ではおすすめしない理由がお分かりいただけたかと思います。

デザイン性を重視するサイトであれば非常に便利でUXにおいても優れた仕組みなので、利用すること自体を否定することはしませんが、少しでも表示速度を早くしたいということであれば避けたほうがいいでしょう。

その他、いろんなプラグインを利用していれば尚更です。無限スクロールに限らずAjax、jsを必要とする仕組みの導入は、よく検討されることをおすすめします。

※現在、すでに導入してしまっている、自分では改善できないという場合は是非WP代行レンジャーにご相談ください。お問合せはこちらをクリック

もっとイイ記事を書いていきます!シェアお願いします!

著者プロフィール:Master
Master
WP代行レンジャーのリーダー。WordPressを愛し、WordPressを広めるための活動を積極的に行っています。お役立ち情報からセキュリティに関することまで幅広く発信していきます!

関連・おすすめ記事

無限スクロールプラグインが表示速度に悪影響を及ぼす理由

サイト低速化の原因はCDNだった!利用する際の注意点と対処法

▲TOPにもどる