‘PageSpeed Insights’ ご存じの方も多いと思います。UXと深いかかわりを持つサイトの表示速度を改善すべく、Googleが提供しているツールです。私も’Lighthouse’と共に使わせてもらっていますが、やみくもに高得点獲得を目指しての施策はしませんし、そのためのプラグイン導入もしていません。
只、サイトの現状を把握し改良のための指標をいただく上ではありがたいツールです。このサイトの制作・運営にあたっても、適宜、‘PageSpeed Insights’ ’Lighthouse’に様々なご指摘をいただきながら、施策を重ねているところです。
因みに本日確認した結果は、以下のとおりです。只、私の契約しているサーバーとプランがすこぶるチープで、’デスクトップ’の数値は安定していますが、’携帯電話’の数値は時間帯と環境によって見事に上下します。ですから、数字はあくまで参考程度に考えています。
施策の概要
施策は以下の分野で実施しています。
| WordPress Theme | Neve シンプルで基本的に早いです。只、所々手をかける必要はあります。Kadenceへの乗り換えを検討中。 stackoverflowの情報は、有用です。 |
| Font | Noto sans JP デフォルトではCDNから引っ張ってきますので、停止。 .otfファイルをダウンロードしサブセット化。 WOFF,WOFF2にコンバート後アップロード 施策の詳細は、投稿記事：Webフォントサブセット化のコツとツールを紹介 (別タグで開きます) |
| 画像 | EWWW Image Optimizerにて、Webp変換。オフスクリーン画像は遅延読み込み FontAwesome iconは、CDN,Theme同梱（Lightning等）いずれも使用しない。 必要なものを個別にダウンロードし、svgのまま、もしくは加工後、アップロードし使用。 width/heightは明示。 |
| プラグイン | Contact Form 7 用 CSS,JSは、フォーム設置ページにのみ読み込ませる。 reCAPTCHAも同様にフォーム設置ページでのみ作動させる。 施策の詳細は、投稿記事：Contact Form7とreCAPTCHAを限定的に読み込む方法 (別タグで開きます) 常時作動させる必要のないプラグインは、頻度に応じて削除もしくは停止。 スピードアップ助力系、Redirect系、Blockエディタ系のプラグインは基本インストールしない。 gtag用にはFlying Scriptsを使用。jquery.min.jsには一切関わらせない。 トップへ戻る、目次（開閉機能付き）は手動にて設置 シンタックスハイライターはprism.jsにより導入。タグ(’code’)付与の投稿ページにのみ,prism.js,prism.cssを 読み込ませる。投稿記事：Prism.jsの必要な機能を必要なページに|設定と操作のコツ (別タグで開きます) その他必要な機能は適宜判断し、自作、およびfunctions.phpへの追記にて対応。 スライダーはSwiper.jsにより導入。 |
| CSS、JS | 基本Minify後、使用。 クリティカルCSS実施 初期表示CSS以外は、linkタグmedia属性を’print’とし、非同期ロード。ロード完了後、‘all‘とする。 施策の詳細は投稿記事：クリティカルCSSと非同期ロードでレンダリング改善 (別タグで開きます) emoji js css等、不要なものは削除。 JSは基本</body>直前に移動。 自作JSは1ファイルで全スクリプトを管理。 |
| Cache | .htaccessによるブラウザキャッシュ設定（Cache-Control-header）。 |
| Redirect | 極力、抑える。 |
| レンタルサーバー | ロリポップ（ライトプラン）。 すこぶる遅いが、気に入っています。今のところ、他社への乗り換えやプラン変更の予定はなし。 |
今後の予定
今後も一層の快適化を目指して施策を重ねてゆく予定です。しかしプラグイン頼みの安易な施策は結果として時間と労力を無駄遣いしますので、課題には一つづつ丁寧に取り組みながら、都度、備忘録として投稿をアップしていく予定です。
稚拙な投稿ですので先輩諸兄には参考にもならないと思いますが、寛容に見守っていただければ幸いです。今後ともよろしくお願いします。
