PageSpeed Insightsのモバイル（携帯電話）のスコアが30ぐらいだったものを
70台まであげることができました。
（追記：2024/4/15レンタルサーバーからVPSに移行し
WordPress専用で運用していないため遅くなりした。50台）
デスクトップは90～80台。
ちょっと微妙な数字ではありますが、これ以上チューニングすると
今はよくても何かのきっかけで不具合の原因になるので、
あまりいじらないようにしました。
プラグインやWordPress、テーマの設定をいじることは
色々問題が発生する原因にもなります。
十分注意して自己責任で実施してください。
当ブログもシンプルなデザインや設定で運営を心掛けています。
それでも今回、いじったことによっていろいろ問題が発生しました。
対策して解決しています。
人それぞれ同じブログ運用をしているわけではないので
ご紹介する設定で何が起きるかわからないことはご認識ください。
そもそも高速化する目的はSEO的にいいかもということだと思いますが
実際検索上位の人のブログをPageSpeed Insightsで見てください。
決して速くはないと思います。
なので危険を冒してまで改善する必要があるか今一度ご判断ください。
私の環境2022/4/1
Window10、WordPressバージョン：5.9.2 Cocoonバージョン : 2.4.2.4 CocoonChildバージョン : 1.1.2
サーバー：お名前ドットコム
動作確認 Edge、Chrome、androidスマフォのみ
Xseverを使っている方は「Xアクセラレータ」というサーバー独自の高速化機能と被って
思うように動作しない可能性があるので別途お調べください。
高速化を始める前に
人それぞれプラグインやテーマなど違います。
一概にこれがいいという答えはないと思います。
また変更したことによって予想していない不具合が起きるかもしれません。
その辺はご理解いただきお読みいただきたいと思います。
おかしくなった時のバックアップ等の対処法も準備しておき慎重に作業してください。
メモ帳にやったことをメモしながらやることをおすすめします。
その際ショートカットキーを使うと面倒くさくないです。
CTRL+Vで貼り付け、CTRL＋Sで上書き保存など。
こちらショートカットキー一覧が紙で売ってます。
意外に便利かも！
作業中おかしくなったことと対処法
最終的な設定に行く途中でおかしくなったことと対処法です。
アイキャッチが表示しなくなった。
プラグインAutoptimizeとCocoonの高速化設定がかぶっていてアイキャッチが消えたようです。
Autoptimize無効化したら直りました。最終的にはAutoptimize不要になったので削除しました。
バリューコマースのMylinkBoxが表示しない
これはプラグインの設定戻したり無効化したり、
Cocoonの高速化設定戻したりしましたが直りませんでした。
最終的にバリューコマースのLinkSwitchの設定にしたら表示するようになりました。
こういういじったところを戻しただけでは直らないパターンもあるので十分に注意してください。
Googleアナリティクスが検出しなくなった。
いつも見ているGA4のプロパティでリアルタイムが動いてなかった。
Cocoon設定→アクセス解析・認証→スクリプト
ga-lite.min.js（高速化）→gtag.js（公式）に戻しただけでは
リアルタイムは動くけどレポートのスナップショットが
設定を変えた日から0になっている。
しかしユニバーサル アナリティクス（UA)で作ったプロパティに変更すると
ちゃんと保存されている。
GA4とユニーバーサル アナリティクス(UA)（併用して）
Google AnalyticsトラッキングIDがG-～と
ヘッド用コードのid=UA-～が違うことも問題かも。
そもそも併用したのはAdsenceと連携させるためUAのプロパティを作った。
以下をやった結果アナリスティクスの動作がおかしい。
表示回数が2回カウントされて、すべて偶数になっていたので削除。
アナリスティクスに関しては変更の反映に時間がかかるようなので
日にちをおいて対策をしたほうがいい。2022/4/28
ということでUAはもう使わないことにしてUA用のコードを削除してGA4用コードを貼った。
具体的には
Cocoon設定→アクセス解析・認証→ヘッド用コードに書いていたUA用コードを削除してGA4用コードを貼った。（今まではGA4用コードはここに貼っていない。トラッキングIDを入力するだけで検出できていた。）
１日たって正常に戻りました。
CLS に関する問題: 0.25 超
サーチコンソール→エクスペリエンス→ウェブに関する主な指標で
不良URLが高速化したときから発生していました。
PageSpeed Insightsでも以下のようにCLSが不合格になっています。
「CLS に関する問題: 0.25 超」とはページのレイアウトが動くことが問題です。
いろいろ調べて対策しましたが効果の確認が出るまで時間がかかるようです。
その際Pagespeed Insightsの見方として
①実際のユーザーの環境で評価する（上の部分）
②パフォーマンスの問題を診断する（下の部分）
の２か所に分かれていて①は実際のユーザーが使ったデータを集めた結果なので
対策の効果が分かるまで時間がかかります。
下は早いはず。
そのことに気づかずやっていて、①の数字が全然変わらないので、
いろんなことやったけど効果ないのかと思ってました。
しかし②を見ると
Cumulative Layout Shift（CLS）携帯は0.017になってました。
①のCLSは0.27のまま。パソコンは①0.62→②0.023
何をやって効果があったかわかりません。
このままフィールドデータがたまって①の値も改善したことがGoogleで
確認できればサーチコンソールでも「CLS に関する問題: 0.25 超」はなくなると思います。
結果2022/04/14不良 URL: 88件、対策実施→2022/5/1不良 URL: 0 件になりました。
やったことはCocoonでのアドセンスによるCLS対処方法を参考に対策しました。
最初紹介されてるコードを外観→カスタマイズ→追加cssで追加しました。
サイドバーはちゃんとスペースが確保されているけど
見出しの下の広告スペースが開いていません。
Edgeの検証ツールで自分のページと上記のページを比較すると
私のページはad-wrapの上のdivタグのclassにad-linkがありませんでした。
適当にad-content-topへ変更（２か所）したらスペースが確保されました。
ここは特に動作の保証はできません。自己責任でお願いします。
その他、目次の上にあった広告を下に移動したり、
ヘッダのサイズが空欄だったものを埋めたりしました。
どれが効果あったかはわかりません。
ただアドセンス広告は表示するときに確実にずれるのでかなり怪しいです。
かといってこれは高速化する前からそういう状態だったはずなので
なぜ今回高速化したことで急にエラーになったかは謎です。
目次へ
高速化に効いたもの
最終的に高速化してやったものは
- プラグインの見直し
- Cocoon設定サイト高速化の利用
- プラグインEWWW Image Optimizerの設定変更
- プラグインFlying Scripts by WP Speed Mattersの導入
プラグインの見直し
最終的に６個だけ使用しています。
高速化に関係あるのは２つだけです。
Akismet Anti-Spam (アンチスパム)
Cache Clear for お名前.com
Contact Form 7
EWWW Image Optimizer（高速化のため使用）
Flying Scripts by WP Speed Matters（高速化のため使用）
UpdraftPlus – バックアップ/復元
目次へ
Cocoon設定サイト高速化の利用
Cocoon設定→高速化で以下にチェックを入れる。→変更を保存
「Lazy Loadを有効にする」だけチェックを外しています。→チェックしてます2024/4/15
「 WordPress 5.5からLazy Loadが標準機能になりました。」ということで
機能がダブるのを避けるため外していましたが
「WordPress 5.5からLazy Loadが標準機能になりました。この機能を有効化すると標準Lazy Loadではカバーしていないエリアの画像の対応をします。例：新着・人気・カルーセル・おすすめカード・ナビカードのNO IMAGEサムネイル等」ということなのでチェックしてます。
プラウザキャッシュは私の使ってるお名前ドットコムのレンタルサーバー側で
設定できることが分かって今は外しています。→VPSに移行したのでチェックしてます。2024/4/15
プラグインEWWW Image Optimizerの設定変更
前から入れていましたがデフォルト設定で使用していました。
2023/10/13追記
シンクラウド for Freeでは、画像が表示されなくなりました。無効化すれば直った。
設定
こちらを参考に変更しています。
2022年版 EWWW Image Optimizerの設定とWebPへの変換方法
画像のリサイズはデフォルトでは幅の上限、高さの上限両方とも0。
実際上限が0ということはないので0は上限なしの意味かと思います。
ここに数字がはいいていたころのウェブにデフォルト設定が
幅の上限1920というのを見たので1920にしてます。高さは0のまま。
遅延読み込みはWordPressのを使うので外してる。
お名前ドットコムレンタルサーバーの「.htaccess」設定方法
Webp変換をするときレンタルサーバーの「.htaccess」にコードを貼り付けるのですが
お名前ドットコムのやり方がないようなので書いておきます。
お名前ドットコムの.htaccessの設定を参照してください。
入れる場所は1番最後
最初#END COCOON HTACCESSの上に入れてOKだったんですが
数日後確認するとwebpではなくjpegに戻っていました。
.htaccessを確認すると#BEGIN COCOON HTACCESS～#END COCOON HTACCESSがなくなっていました。
多分Cocoonの高速化設定をいじってなくなったと思われます。
再度1番最後にwebpのコードを入れたら直りました。
変更する前に.htaccessは保存しておいた方がいいです。
また以下にもバックアップはあります。
.htaccessはコントロールパネル→ファイル管理→ファイルマネージャーで
public_html→自分のドメインアドレスのフォルダの中に.htaccess、.htaccess.bak、.htaccess.cocoonの3つがあります。
.bakと.cocoonはバックアップみたいです。
参考 .htaccessについて | Cocoonテーマに関する質問 | Cocoon フォーラム
Flying Scripts by WP Speed Matters
JavaScriptのコードを遅らせて読み込ませるプラグインです。
結局ここが１番効果があります。
こちらを参考にしました。
Flyingng Scripts – JavaScript 読み飛ばし高速化プラグインの使い方｜WordPress
Include Keywordsは
不具合の可能性をおさえるため私は１個だけにしてます。
これでGoogleアドセンスを５秒遅らせて読みこむようになります。
Timeout時間を2sとか短くするとPageSpeed Insightsの成績が悪くなります。
5秒遅れて広告表示させて収益的にいいかはわかりません。
GoogleAdsenceの自動広告はオフにしてます。
この辺の設定も表示しなくなったとか影響してくるかもしれません。
（2023/7ONにしたけどあまり変わらなかった）
まとめ
- 予想外の不具合が発生するのでプラグイン、WordPress、テーマ設定は慎重に！
- 1番遅い原因はGoogleAdsence→プラグインFlying Scripts by WP Speed Mattersで広告表示遅らせる。
コメント