WordPressは重い Lighthouseのスコアがよくない…

いろいろ検証しているが、どうもWordPressは重くなる

プラグインによって、テーマによって、さらに遅くなる

ユーザー利便性も高まるはずなので、Lighthouseでスコアアップを目指し、WordPress特有の問題を少し解消してみた

Google Chromeの拡張機能 Lighthouseでスコアをチェック

Chrome、ならびに「Blink系レンダリングエンジン」採用の、Operaや新しいEdgeなどで、このLighthouse拡張機能が使える

今は、Windows10の新Edgeを、Lighthouseのスコアチェック専用にしている

algorism.co.jpトップページから転載

seojuku.com：Lighthouseスコア

algorism.co.jp：Lighthouseスコア

上記は、algorism.co.jpリニューアル時にチェックしたもの

JQueryやJSをヘッダーからフッターへ

これに対して、JavaScript系をヘッダーからフッターへ移動
functions.phpでごにょごにょ

seojuku.com：JSフッター

algorism.co.jp：JSフッター

これで、ファーストビューが少し速く読み込まれるようになったと思う

HTML/JS/CSSをMinify(圧縮)

W3 Total Cacheで、Minify: Enable かつ Minify mode: Auto
これは、サイト表示が崩れるリスクがあり、とにかく実験

seojuku.com：Minify(圧縮)

algorism.co.jp：Minify(圧縮)

多少なりともスピードアップはできている

ファーストビューを軽くする

Lighthouseがチェックするのは、まずファーストビュー

そこで、JQueryを含むJavaScriptの読み込みを、ヘッダーからフッターに移動

それだけでも、随分とLighthouseのスコアがよくなる

WordPress js ヘッダーからフッターへ – Google 検索

サーバー環境や、テーマ、プラグインなどの影響があるので、自サイトにフィットするコーディングを採用していただきたい

LighthouseはNexus 5

Chromeの拡張機能、Lighthouseでスコアチェックする場合、ファーストビューを意識するのであれば、モバイル表示確認は Nexus 5 もしくは Nexus 5X にしておくといいと思われる

dashicons.min.cssもかなり重い

弊社販売のWordPressテーマは、WPデフォルトのダッシュアイコンが使われている
テーマによっては、あるいはサイトとして独自に、ダッシュアイコンを使っていることもあるだろう

algorism.co.jpでは、そのダッシュアイコン表示を、Font Awesomeに取り替えてみた

seojuku.comでは、上のMax Mega Menuがダッシュアイコンを使っており、Font Awesomeに変更するにはPro版にアップグレードする必要があって、ダッシュアイコンを読み込んだままである

Max Mega Menuのアイコンを読み替えることも可能だが、それは大ごとになりそう

ともあれ、ダッシュアイコンはWordPressの管理画面で使われているので、ログインしたときだけ読み込めるように、ごにょごにょしなければならない

WordPress dashicons.min.css 管理画面以外 読み込まない

JQueryやCSS

そのほか、JQueryも下記がバージョンがどうなの？
と思うのだが

/wp-includes/js/jquery/jquery.js?ver=1.12.4

このJQueryの読み込みを阻止したり、バージョンアップしたりすると、プラグインが機能しなかったり、サイト表示がおかしくなったりする場合もある

CSSもフッターへ移すと、表示がおかしくなるときもあるので、検証しながら実行

JQuery・JavaScript、CSSなど、プラグインがhead要素にねじ込むことが多いので、チェックしながらbody要素の最下部あたりに移動する

ファーストビュー命？ ここに関わるCSSをhead要素内にインライン化

WordPressで外部PHPファイルを読み込むことを覚えたので、style.cssからファーストビューに関わるCSSを移動

firstview-inline.phpの中の、<style type="text/css">～</style>に記述

この firstview-inline.php をhead要素の最後に読み込み

ファーストビュー関連CSSのインライン化はそれほどでもない

ファーストビューCSSのインライン化は、思ったほど効果はなかった

それよりも、style.css から移動させただけなのに、seojuku.comでは表示が異常におかしくなったので、インライン化はalgorism.co.jpだけにとどめている