SWELLが遅い！サイトが激重になった原因と解消方法
最近サイトの表示が遅くなった気がします・・
特定の条件で使用するとSWELLが激烈遅くなります。
SWELLは初期状態で十分高速なテーマです。
しかし、SWELLは万能ではありません。
SWELLに問題があるというよりも、通常のWordpressテーマを使っていると遅くなる使い方があります。
WordPressサイトが遅くなる原因はほぼ決まっていて、それらのボトルネックを取り除くことでサイトが高速に表示されるようになります。
タームを大量に登録した場合に発生する問題は？
カスタムタクソノミーを使って、タームを大量に登録するということは通常ブログサイトではあまりないかもしれません。
しかし、タームというのは分類するためのものですから、本来そのように使うものです。
DBクエリの時間が遅い問題が発生
タームを登録するだけなら問題ないのですが、タームの一覧を取得する時にタームの数が多いと急激に遅くなります。
タームの一覧をキャッシュしたり、サイドバーやヘッダーのHTMLをキャッシュすればクエリの時間は無視できます。
クエリを発行する部分を遅延読み込みを行うことで、ページの読み込みを高速化できます。
HTMLが大きすぎる問題が発生
カテゴリウィジェットをカスタムタクソノミーに対応させるカスタマイズがあります。
そのカスタマイズを使って、タームの一覧をウィジェットで表示すると、サイトの描画が急激に遅くなります。
また、グローバルナビなどにメガメニューでタームを登録すると、同じようにサイトの描画が遅くなります。
おそらく、HTMLが大きくなりすぎるためのCSSのレンダリングの問題だと思います。
スクロールした時にページの一部がチラついたり、画像が消えたり、表示されない部分が出てくる場合、レンダリングが間に合っていない状態が考えられます。
レンダリングというのはユーザー側の問題になりますのでjavascriptと同じように負荷が重いとユーザーサイドで影響が出ます。
よく問題になるのが、li要素が長く、さらに深いネストがある場合、スマホで描画が間に合わなくなる傾向が顕著になります。
タームを大量に登録した場合に発生する問題を解決するには？
ターム一覧のHTMLを生成させない・使わない
タームの一覧をウィジェットやメニューで表示させないことです。
ほぼすべてのページで毎回読み込まれますので、ページのHTMLが急激に肥大化します。
タームのクエリをキャッシュで無くしても、リストタグで数千のタームがあるだけで、HTMLが大きくなりすぎてSWELL本来の軽さはなくなります。
ウィジェットやグローバルメニューで巨大なリストになるタームの一覧を表示させるのは止めましょう。
固定ページなどで代用する
タームの一覧を固定ページで用意して、そこへのリンクを張るようにすると、HTMLが軽くなります。
あまりにもHTMLサイズが大きいとPage Speed Insightで警告が出ますし、アクセシビリティが逆に下がってしまうので、SEO的にいいことはありません。
パーツの遅延読み込みを有効にする
記事下コンテンツには関連記事を出力する箇所があります。
関連記事はクエリが複雑なので、記事やタームが増てくるとクエリに時間がかかるようになります。
大規模なサイトでは関連記事がボトルネックになって、サイトの表示の低下を招きます。
まとめ
SWELLが遅いと感じたら、メニューやウィジェット部分のHTMLが大きくなっていないか確認した方がよいです。
HTMLが大きいとサイト全体がモッサリしてきます。
Query monitorなどを使って、クエリを削減しても、HTML自体が巨大だと別の問題を引き起こします。
昔は軽快に動いていたサイトが最近遅くなってきたという場合には、HTMLサイズが巨大になっていないか確認しましょう。
コメント