SmushのLazyLoad機能によりサイトの読込速度が改善【WordPress】

数日前から当サイトの読込み速度が急激に遅くなりました。画像やテキストも見た感じは表示されているのにブラウザのグルグル読み込んでいるマークが1分くらい消えません

結果的にSmushというWordPressのプラグインをインストールして改善しましたが、色々と勉強になる事があったので情報を纏めておきます。

スポンサーリンク

原因の切り分け方法

早く直したいという焦りもあり、ネットで解決方法を調べていると結果だけに目が行きがちですが、もちろん原因によって解決策は異なります

私の場合は最終的にSmushで解決しましたが、それに至るまでに1週間くらい色々な事を試しています。まずは基本的な切り分けをしておきましょう。

ページの問題

  • 特定のページだけ遅いのか
  • 全てのページが遅いのか

特定のページだけ遅いのであれば、特に画像・動画などの重いコンテンツやそのページに適用しているAPI・広告・CSS・JavaScript など原因が絞れてくると思います。

ブラウザ・端末の問題

  • Internet Explorer/ PC
  • Google Chrome /PC
  • Safari / スマートフォン
  • Google Chrome / スマートフォン

特定の端末・特定のブラウザだけの症状であればキャッシュの問題かもしれませんし、場合によっては端末の再起動やアプリの再インストール等で直る可能性もあります。

端末やブラウザが特定できても、自分だけの症状なのか世界中の同じ端末・ブラウザで症状が発生しているのかは分からないので、友人や知人に見て貰ったりSNSで情報収集してみるのも良いですね。

ネットワークの問題

自宅でも外出先でも職場や学校でも症状が変わらないのであればネットワークの問題ではなさそうです。ネットワークが原因なら他のサイトも遅いはずなので今回の件とはあまり関係ありませんが、ただ可能性がゼロではないので頭に入れておいても損はないと思います。

その他

複数のサイトを運営していれば他サイトとの比較もできますが、私の場合はこのサイトだけなのでWordPress / Cocoon を使ってそうな他者サイトをいくつかチェックしてみました。みんな読み込み速かったです。

サーバー(エックスサーバー)についてはPHPのバージョンやら高速化設定などはたまにチェックして対策してきましたし問題ないはずです。

ただ、Gutenberg のアップデート近辺から症状が出始めた&それからずっと編集画面がやたらと重いので、Gutenberg が間接的にでも遅延の要因となっている可能性は否めません。

考えられる原因は?

間違いなく当サイトに問題があるという事が分かったので、原因追求していきます。

実施した項目
  • CSSの整理
  • JavaScriptの見直し
  • キャッシュ削除(サーバー・テーマ)
  • サイドバーやグローバルナビOFF
  • カルーセルOFF
  • プラグイン無効化・整理

結果的にどれも解決には直結しませんでしたが、知識も増えて今後のサイト運営にとってはプラスとなりました。

※もしかしたらタイムラグがあっただけで、どれかの効果があった可能性も

Lazy Loadについて

サイトにアクセスした際、通常は最初に該当ページの全ての画像を読み込もうとするのですが、Lazy Loadはユーザーのスクロールに応じて(実際に画面に表示されるタイミングで)画像を読み込んでくれるので、不要な読込み時間が削減できます。

Lazy LoadはWordPressバージョン5.5に標準搭載されている機能ですが、当サイトはその上で遅いので別途プラグインを探すことに。

WordPressのバージョン確認方法
  • ダッシュボード → 更新

Smush (スマッシュ)

プラグイン名称

Smush – Lazy Load Images, Optimize & Compress Images

プラグイン新規追加の画面で「Lazy」と検索したら1番上に表示され(2020年10月時点)、有効インストール数もダントツで多いのがSmush

概ね初期設定のままで問題無さそうなので特別な設定はしていません。

主な用語
  • smush: 潰す・砕くなど。※但し、子供が使ったり子供っぽい言い方らしい
  • optimize : 最適化
  • compress : 圧縮
  • bulk: 大きさ・容積

EWWW Image Optimizer

プラグインも適切に管理しなければ遅延や不具合の原因となりますので、役割が重複する EWWW Image Optimizer は無効化しておきました。

画像の圧縮方法

SmushをインストールするとWordPress のメニューに『Smush』が追加されますので、そこからダッシュボードを開きます。

BULK SMUSH NOW というボタンをクリックすると圧縮が始まります。無料版の一括圧縮は50ファイルまでの制限があるので、例えば1,000枚あったら20回実行する必要があります。

サイズ制限(5MBまで)もあり。エラーはダッシュボードで確認可能

Lazy Laod

2020年10月時点ではBETA版の表記がありましたが、インストールしたら設定不用でActiveになっていました。あくまでもコンテンツの読込みを遅延させているだけであり、画像や動画のサイズ・容量は変わりません。

Comment

タイトルとURLをコピーしました