ページは表示されているのに、ブラウザが読込中のままでグルグルマークが消えない【WordPress】

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

結果的に Smush という WordPress のプラグインをインストールして改善しましたが、その過程で知った情報を纏めておきます。

原因の切り分け方法

※原因によって解決策は異なります

私の場合は最終的に Smush で解決しましたが、それに至るまでに1週間くらい色々な事を試しています。ていうか表面的に直っただけで、原因は分かりませんでしたが・・

ページの問題

特定のページだけ遅いのであれば、画像・動画などの重いコンテンツや、そのページにだけ適用しているカスタマイズなど。

特に、直近で導入・変更したもの等が原因であるパターンが多いです。

ブラウザ・端末の問題

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

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

ネットワークの問題

自宅でも外出先でも職場や学校でも症状が変わらないのであれば、ネットワークの問題ではなさそうです。

ネットワークが原因なら他のサイトも遅いはずなので今回の件とはあまり関係ありませんが、ただ可能性がゼロではないので頭に入れておいた方が良いです。

その他

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

サーバー(エックスサーバー)についてはPHPのバージョンやら高速化設定などはたまにチェックしてきたので、今回は問題無さそうです。

ただ、Gutenberg のアップデート近辺から症状が出始めたので（それからずっと編集画面が重かった)、Gutenberg が遅延の要因かなぁとは少し思っていました。

考えられる原因は？

当サイトに問題があるのは間違い無さそうなので、原因追求していきます。

結果的にどれも解決には直結しませんでしたが、もしかしたらタイムラグがあっただけで、時間差でどれかの効果があった可能性もあります。

Lazy Load 機能について

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

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

Smush (スマッシュ)

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

概ね初期設定のままで問題無さそうなので、インストール後に特別な設定はしていません。

Lazy Laod

2020年10月時点ではBETA版の表記がありましたが、インストールしたら設定不用でActiveになっていました。

あくまでもコンテンツの読込みを遅延させているだけであり、画像や動画のサイズ・容量は変わりません。

画像の圧縮

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

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

EWWW Image Optimizer

それまでは画像圧縮系として EWWW Image Optimizer を利用していましたが、Smush と役割が重複するので削除しました。

※その後いろいろあって EWWW に戻しています