WordPressを高速化するには、CSSやJavaScriptの圧縮、読み込み順の調整などを行うプラグインを導入する手法が定番です。
CSS/JSの改行や空白を削除する軽量化や読み込まれるアセットを結合するプラグインはいくつかあります。
こういったものは一定の効果がありますが、使っていないCSSのプロパティまで読み込まれている場合が多く、ファイルを小さく圧縮するだけでは効果は限定的です。
Debloatは、CSSの読み込み最適化に加え、未使用CSSの削減やJavaScriptの遅延実行まで扱えるプラグインです。
筆者が特に気に入ってる点は、外部の最適化サービスへ処理を委ねる構成に頼らず、WordPress側で未使用CSSの削減を扱える点です。
CSSを圧縮するだけでなく、不要なルールを減らす
WordPressでは、テーマやプラグインが共通のスタイルシートを読み込みます。
そのページでは使っていないセレクターのルールまで、まとめて配信されることもあります。
Debloatが提供する「Remove Unused CSS」は、スタイルシートの中から不要なCSSルールを減らすための機能です。
CSSファイル単位の読み込み停止ではなく、セレクターやルールの単位で削減を試みる点が特徴です。
公式の更新履歴からは、CSSパーサーを使ってスタイルを処理していることや、メディアクエリ・複雑なセレクターへの対応を改善してきたことが確認できます。
処理済みデータを保存するキャッシュ機能も備えています。
これはビルドツールでいうTree Shakingに近い発想ですが、ビルド時に依存関係を静的解析する仕組みと同一ではありません。
WordPressのページでは、操作後に表示される要素や画面幅によって必要なスタイルが変わるため、削減後の確認が欠かせません。
外部の最適化サービスとの契約や連携を前提とせず、WordPressのプラグインとして未使用CSSの削減を扱える点も魅力です。
CSS・JavaScriptの読み込みもまとめて調整
WordPress.orgの公式説明では、未使用CSSの削減のほかに次の機能が案内されています。
- CSSの圧縮・インライン化、レンダリングを妨げる読み込みの最適化
- JavaScriptの
deferによる読み込み調整や、ユーザー操作までの実行遅延 - Google Fonts向けのリソースヒント
- 最適化結果のキャッシュ、テーマ・プラグイン開発者向けのAPIとフック
どのCSS・JavaScriptを、いつ、どのように読み込ませるかまで調整できるのが、Debloatの特徴です。
自動削減だからこそ表示確認は必要
未使用CSSの削減では、最初の表示では使われなくても、メニューの展開、モーダルの表示、フォームのエラー、画面幅の変化などで後から必要になるスタイルに注意が必要です。
削減を有効にしたら、トップページの見た目だけでなく、下層ページやスマートフォン表示、クリック後のUI、フォーム送信時なども確認したいところです。
JavaScriptの遅延実行も同様に、動作タイミングに依存する機能へ影響する可能性があります。
公式ページ自身も上級者向けの最適化プラグインであることを明記しています。
動作要件はWordPress 5.0以上、PHP 7.4.1以上です。
キャッシュ系プラグインと併用する場合は、CSS・JavaScriptの最適化機能が重複しないように設定し、変更後はキャッシュを消して確認します。
外部サービスに頼らず調整したい人に
CSSの圧縮や読み込み順の調整だけでは足りず、配信するルールそのものを減らしたいサイトなら、Debloatは検討する価値があります。
外部サービスとの契約・連携を増やさず試せる点も、運用上の魅力でしょう。
最適化後の表示や動作を確認しながら調整できるなら、試してみたいプラグインです。
動的なUIを多用するサイトでは、必要なスタイルまで削らないことを優先して設定したいと思います。
コメント