プラグイン『Smush』によりサイトの読込み速度が改善

数日前から当サイトにある全てのページの読込み速度が急に遅くなったのですが、何というか画像もテキストも全て表示はされているのにブラウザのあのグルグル読み込んでいるマークが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 はユーザーのスクロールに応じて(要するに実際に画面に表示されるタイミングで)画像を読み込んでくれるので、不要な読込み時間が削減できます。

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

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

Smush ※WordPress プラグイン

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

プラグイン名称

Smush – Lazy Load Images, Optimize & Compress Images

設定方法については分かりやすく解説してるサイトが多数あります。概ね初期設定のままで問題無さそうなのでデフォルトのままにしました。

主な用語
  • 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をコピーしました