JQueryやJS、CSSのフッターへの移動、dashiconsの削除。HTML/JS/CSSをMinify(圧縮)。ファーストビューのCSSをインライン化
スマホサイトWeb WordPressなどのSEO
小画面 少コンテンツ 省テキスト 多画像対応の
コーディング実験検証
いろいろ検証しているが、どうもWordPressは重くなる
プラグインによって、テーマによって、さらに遅くなる
ユーザー利便性も高まるはずなので、Lighthouseでスコアアップを目指し、WordPress特有の問題を少し解消してみた
Chrome、ならびに「Blink系レンダリングエンジン」採用の、Operaや新しいEdgeなどで、このLighthouse拡張機能が使える
今は、Windows10の新Edgeを、Lighthouseのスコアチェック専用にしている
seojuku.com:Lighthouseスコア
algorism.co.jp:Lighthouseスコア
上記は、algorism.co.jpリニューアル時にチェックしたもの
これに対して、JavaScript系をヘッダーからフッターへ移動
functions.phpでごにょごにょ
seojuku.com:JSフッター
algorism.co.jp:JSフッター
これで、ファーストビューが少し速く読み込まれるようになったと思う
W3 Total Cacheで、Minify: Enable かつ Minify mode: Auto
これは、サイト表示が崩れるリスクがあり、とにかく実験
seojuku.com:Minify(圧縮)
algorism.co.jp:Minify(圧縮)
多少なりともスピードアップはできている
Lighthouseがチェックするのは、まずファーストビュー
そこで、JQueryを含むJavaScriptの読み込みを、ヘッダーからフッターに移動
それだけでも、随分とLighthouseのスコアがよくなる
WordPress js ヘッダーからフッターへ – Google 検索
サーバー環境や、テーマ、プラグインなどの影響があるので、自サイトにフィットするコーディングを採用していただきたい
Chromeの拡張機能、Lighthouseでスコアチェックする場合、ファーストビューを意識するのであれば、モバイル表示確認は Nexus 5 もしくは Nexus 5X にしておくといいと思われる
弊社販売のWordPressテーマは、WPデフォルトのダッシュアイコンが使われている
テーマによっては、あるいはサイトとして独自に、ダッシュアイコンを使っていることもあるだろう
algorism.co.jpでは、そのダッシュアイコン表示を、Font Awesomeに取り替えてみた
seojuku.comでは、上のMax Mega Menuがダッシュアイコンを使っており、Font Awesomeに変更するにはPro版にアップグレードする必要があって、ダッシュアイコンを読み込んだままである
Max Mega Menuのアイコンを読み替えることも可能だが、それは大ごとになりそう
ともあれ、ダッシュアイコンはWordPressの管理画面で使われているので、ログインしたときだけ読み込めるように、ごにょごにょしなければならない
そのほか、JQueryも下記がバージョンがどうなの?
と思うのだが
/wp-includes/js/jquery/jquery.js?ver=1.12.4
このJQueryの読み込みを阻止したり、バージョンアップしたりすると、プラグインが機能しなかったり、サイト表示がおかしくなったりする場合もある
CSSもフッターへ移すと、表示がおかしくなるときもあるので、検証しながら実行
JQuery・JavaScript、CSSなど、プラグインがhead要素にねじ込むことが多いので、チェックしながらbody要素の最下部あたりに移動する
WordPressで外部PHPファイルを読み込むことを覚えたので、style.cssからファーストビューに関わるCSSを移動
firstview-inline.phpの中の、<style type="text/css">~</style>に記述
この firstview-inline.php をhead要素の最後に読み込み
ファーストビューCSSのインライン化は、思ったほど効果はなかった
それよりも、style.css から移動させただけなのに、seojuku.comでは表示が異常におかしくなったので、インライン化はalgorism.co.jpだけにとどめている