WordPressの表示速度を改善するプラグイン「YWS lazy loading」

ありがたいことに最近よくWordPressの表示速度改善のお仕事をいただいています。

回数をこなしていくことで表示速度を改善するための作業手順というか、作業パターンというか、そういうのが具体的に分かってきました。

近いうちにマニュアル化してまとめようと思ってはいるんだけど、ナニブン文章を書くのは苦手なものでorz

そこで、いつもお仕事をする時に追加するコードをまとめたプラグインを作ることにしました。

大体追加するコード内容はパターン化されて決まってきたので、依頼を受ける度にそれらを手書きするんじゃなくて、プラグインとして簡単に設定できるようにね。

あんまり細かいセッティングとなると、やっぱりそのWordPressの個体差によって変わるから、お仕事の時は最終的には手書きで微調整はするけど、それでも大分カバーしていると思います。

今回はそんなWordPressの表示速度改善するプラグイン「YWS lazy loading」を紹介します。

YWS lazy loading ってどんなプラグイン？

できることは大きく分けて３つあります。

• CSS読み込みを停止 or 遅延読み込み
• Javascript読み込みを停止 or 遅延読み込み
• 画像とiframeの遅延読み込み

要はファーストビューのサイズを減らしてページを素早く読み込ませるためのプラグインです。

PageSpeed Insightsの警告でいう、

「レンダリングを妨げるリソースの除外」
「オフスクリーン画像の遅延読み込み」
「第三者コードの影響を抑えてください」

この辺の対策ができるようになります。

プラグインをインストールした後、有効化しただけのデフォルトの状態ではとりあえず画像の遅延読み込みのみが有効になっています。

CSSやJavascriptの読み込みについては、そのWordPressが出力しているものを自分で精査して設定するような形になります。

使い方について詳しくはこちらをご覧ください。

YWS lazy loading の使い方

ダウンロードについて

とりあえずはしばらくここで無料配布します。

プラグインの公式リポジトリに登録しようとも考えてるけど、このプラグインはWordPress表示速度改善の依頼を受けた時に実際に使っているプラグインだから、ちょっとどうしようかな～と考えています。

時期をみて有料販売するか、機能性を制限した無料版を作るかとかね。

画像遅延読み込みの仕様

Intersection Observer を使っています。

WordPress5.5では本体にネイティブレイジーロードが実装されましたが、ぶっちゃけパフォーマンスは微妙ではありませんか？

画面外の画像を拾う範囲が広かったり、オフスクリーンにあるのにうまく遅延読みこされなかったり。

PageSpeed Insights でハイスコアを出すにはやっぱり Intersection Observer を使ってしっかり遅延読み込みをした方がいいと考えています。

また、遅延読み込みする画像にはCSSでプレースホルダーを設定しています。

これにより目次クリックで見出しに遷移した時にズレしまうというのもないはずです。

CSS、Javascriptの読み込みの仕様

async や defer 属性付与によるものではなく、Javascriptの Event や setTimeout で遅延読み込みをします。

挙動としては例えば、「指定したものを3秒後に読み込ませる」、といった感じになります。

ファーストビュー表示時には読み込ませないようにすることで表示速度を改善、PageSpeed Insights のスコアアップをさせるためです。

バージョンアップについて

公式リポジトリには登録していませんが、Plugin Update Checker によって更新があれば自動的に通知が届くようになっています。

公式に登録されたプラグイン同様、更新もワンクリックでOKです。

注意事項

有効化するとデフォルトで画像の遅延読み込みが有効になっていますが、テーマの機能や他のプラグインで画像遅延読み込みをしていると競合が起きて表示が崩れる可能性があります。

YWS Lazy Loading を有効化する前に、予め他の画像遅延読み込みはオフにしておいてください。

一部のプラグインと相性が悪いのでデフォルトはオフに変更しました。

画像遅延読み込みを機能させたい場合は設定よりオンに変更してください。

ライセンス

100%GPLではないです。

転売屋さんとは苦い思い出があるのでorz

PHPファイルはGPL、その他のCSSや画像については再配布不可のスプリットライセンスにさせていただきます。

どんな内容のサイトでも、何サイトにでも使ってOKです。