サイト改修備忘録vol.2

色々と地味な改修を進めてみた。ChatGPT君全面協力。

googleSiteKitで出る読み込み速度が、モバイルだけ非常に悪かった。

プラグインの新規導入など、色々やってみたが、最終的に以下の4点に落ち着いた。

サーバーを契約したのが随分前だったからか、PHPバージョンが少し古いものだった。Xサーバーのサーバーパネル>PHP>PHP Ver. 切り替えより、PHPのバージョンを推奨の8.2.22に変更した。

WP管理画面>Cocoon設定>高速化にあった各種設定を起動。

キャッシュの有効化、CSS/JS縮小化、遅延読み込み、Googleフォントの非同期読み込みをすべてONにした。

CSS/JS縮小化は当初Autoptimizeで、遅延読み込みはEWWW Image Optimize で実装しようかと思ったが、複雑になりすぎるのと画像表示に異常が出た(後述)ので中止。

効果はいまいち分かっていないが、問題は起きていないし何かには役立つと信じる。

新しい、というかよっぽど古いブラウザでない限り、通常の画像形式よりこちらの方が便利らしい。

元から設定はしていたが、どうもうまく動いていなかった。
原因は2つ、コードが挿入されてなかったのと、私の利用するXサーバーの設定とWebP変換が競合するためだ。

コードは画像のWebP変換のあたりにあったボタンを押して解決。Xサーバーとの競合は、Picture WebP リライトを設定して解決した。

Xサーバーとの競合を一番簡単に解決する方法は、Xサーバー側でXアクセラレータという機能をOFFにすることらしいが、XアクセラレータをOFFにするとリクエストの同時処理能力が落ちるらしい。いつかバズってリクエストがパンクする夢に備えて、こっちの方法を採用。

どこまで出していいのか分からないから、画像は無し。

WP管理画面>外観>テーマファイルエディターより、テーマのための関数(functions.php)を選択。

ChatGPT君の提案から、
・JSの遅延読み込み
・画像の遅延読み込みに対して、一枚目のサムネイル画像だけ遅延飛ばして読み込む
などのコードを追加。

これまた、いまいち効果が分かっていない。が、悪影響はなさそうなので利用。

ここまでの改修の結果、PageSpeed Insightsのモバイルスコアは63点ほど。手を付ける前は40とかだったから、改善はされたかなと。しかし、80とかどうやったら出るんだろうか。

次に速度系の改修を行うのであれば、選択肢に入るかも。

Xサーバーで提供されている、XPageSpeedという機能がある。中身はおよそCocoonの高速化設定やEWWW IOの機能と同じ。CocoonとEWWW IOの方で起動したので、競合を避けるために使用せず。

プラグインを増やして、管理を煩雑にしたくなかったため使用せず。Xサーバーと同じく、機能がCocoon等と重なる部分が多かった。

よく分からんし、基本的に有料サービスっぽかったから利用せず。

上の改修をゴチャゴチャした後、気づいたらホームページに画像が表示されなくなっていた。

管理画面から各投稿などを開くと見える。しかし、プレビューや実際にサイトを開くと、サムネも投稿ページの画像も見えない。

サーバーから改修前のデータにロールバックしても解消せず。

原因:EWWWIOの画像読み込みの遅延設定

正直よくわかってないが、画像読み込みを遅延する命令を差し込んだ後に読み込むところに行かなかったらしい。EWWWIOの遅延読み込みを切って、Cocoonの遅延読み込みに切り替えることで解消された。

WordPress、JavaScript、PHP、CSS、正直なんも分からん。ChatGPT君を頼りにここまで進めたが、頭が煮えてきたから今回の改修はここまでとする。