Lighthouse との闘い - Chrome DevTools | WordPressのカスタマイズ

このページは、サイトのページ読み込みと表示の高速化として色々と試してみたことの、Part 1 としての、
Google PAGESPEED INSIGHTS との闘い
そしてその続編で Part2 である、
Google PAGESPEED INSIGHTS との闘い – それから
のつづきというか結果というか、のページ。やってることの詳細については、それらのページを御覧くださいませ。

Google PAGESPEED INSIGHTS の ブラウザ版というか、Chrome DevTools の Lighthouse において、なんとか満点をと、いろいろじたばたしたらなんとかこうなった、ということの結果報告というか、一応、フルマークが取れるようになったんでその動画を貼り付けたいっ！てことですな。
ちなみにフルマークが出ると、紙吹雪のようなもので祝福したりなどしてくれますから、驚きとともに喜びもひとしおという感じがするのです。

下の動画は、固定ページ。日本にいる野鳥の種リストのページで、コンテンツのデータ量も多いように思っていたので、パフォーマンスで100ポイントは難しいかな？と思えたのだけれど、以外にあっさりと、PC でもモバイルでも満点が出すことが出来た。まぁ、初めて満点が出たページということになりますか。-> 「 Check-list of Japanese Birds 」
いつも、というわけではないけれど、Lighthouse ならだいたいは 100 が出る。サイト版の Google PAGESPEED INSIGHTS の方は、Lighthouse よりも少し辛めのようで、同じポイントが出るときもあるけれど、ほとんどは少し低いポイントが出るように思う。サーバーの状況だろう。

—

Chrome DevTools Lighthouse の対策として

パフォーマンスに関しては、根本的なところから見直していった。

• php、Javascript の無駄をなくし、より高速な書き方へと見直し
• functions.php の管理画面において必要な部分の別ファイル化
• 背景画像の BASE64化
• ページ読み込み時に表示外の背景画像の Ajax による遅延読み込み
• コンテンツのデータ量や prism.js での処理が多いページのコンテンツの独自キャッシュ化
• コンテンツの極端ではない細分化というか最適化
• タグクラウド、カテゴリー一覧など各リストのキャッシュ化
• css スタイルシートの不要部分の掃除
• 自作プラグインの高速化のための抜本的な見直し
• そして、ちょうどというかこの時使えるようになったサイトの常時 SSL化

と、いったところ。
自作プラグインにおいては、作りっぱなしでそのまま使っていたコメントの編集プラグインなんてのは、この機にほとんどリニューアルしてしまったようなもの。
それぞれの詳細にご興味があれば、このページの冒頭のリンクにある2つのページにあります。

SEO と アクセシビリティ においては Lighthouse で指摘される点において、一つづつ直して対応していくしかない。ただ、自分が好むデザインとか、あえてそうしているといった部分も問題として指摘される箇所になってしまうことも多々ある。妥協して諦めてしまえば、簡単に対応出来てしまうことがほとんどではあるけれど、それだとどれも工夫のない画一化された同じようなものに収斂していってしまうような気がする。ここまでならなんとか許容範囲というのを工夫して探していかないと、これに挑戦する意味がないように思える。そう、そういう部分で実はこの 「 WordPress DIY 」のページにおいて苦労してる。いまだ、フルマークは出せていない。アクセシビリティにおいて90ポイント台後半であり、なんとも 100 を出せていない。その上、いまのところモバイルにおいてはエラーとなってしまいポイントの表示が出ない状況に陥っている。他の項目は 100 ポイントがコンスタントに出ているのであるが・・・。と、いいつつもこのページのモバイルではエラーにならずにフルマークが出せた。
と、いうことで、今はその辺りの課題と格闘していると行った状況。

下は我がサイトのメインである鳥画像サイトの個投稿、single.php におけるページ

そしてそのページのモバイルスクリーン