こんにちは、つむぎゆりです！
今回は、モバイルページエクスペリエンスが劇的に改善したので（かなり苦労した結果）、その改善方法を解説します。
結果からいうと、サイトの読み込みを速くすること、CLSを少なくさせることです。
LiteSpeed Cache100％の対処法↓
CLS に関する問題: 0.1 超を改善↓
レントラックスの招待メール↓
具体的な方法
サイト高速化関連
- 高速プランに変更（ロリポップのライトプラン→ハイスピードプラン）
- プラグインLiteSpeed Cacheの設定（詳細設定は後述）
- いらないプラグイン消去
CLS関連
- ヘッダーの高さを指定（高さを80に。モバイルも）
- ヘッダーロゴサイズ指定（幅796×高さ104）
- メディア設定を変更（サムネイルのサイズ幅176×高さ99、中サイズ幅500、大サイズ800）
- Google AdSenseで記事のTOPに広告を貼っていたが撤去
- Google AdSenseで自動広告をやめて手動広告に変更（アンカー広告は変えず）
- メインカラムとボトムのトップシェアボタンを撤去
というわけで、もう上記で結論となるので笑、以下は細かい説明だったり当時の試行錯誤の駄文となりますｗ
サイト高速化
当サイトのサーバーはロリポップなのですが、ライトプランからハイスピードプランに変更しました。
ちなみに、ハイスピードプランに変えただけではあんまり速くなりません笑（マジです）
ただ、ハイスピードプランに変えると、LiteSpeed Cacheというプラグインを使えることができ、これがとんでもない高機能で、これを使うことによりサイトが速くなる感じです。
ちなみに、このLiteSpeed Cache、ネット上でさまざまな設定が書かれていると思うのですが、自分と同じテーマを使っている人の記事を参考にしたほうがいいと思います。
このサイトはCocoonというテーマなのですが、Cocoonだとかなり事情が変わってくるので、おそらくほかテーマでも同様なはずなんですよね（テーマごとにすべき設定が異なるという意味で）。
当サイトではどう設定したか
Cocoon用のLiteSpeed Cacheの設定を載せているサイトが、主に３つ～４つほど信頼できそうなものがあり、それらを参考に設定しつつスピードをその都度測っていったんですよ。
すっごくざっくばらんにいうと、キャッシュ以外はCocoonの高速化にまかせても全然ＯＫです。
以下の記事にも書きましたが、LiteSpeed Cacheでぜんぶ補おうとすると、たしかに速いんですけど無料分の機能じゃ足りなくなってくるんですよね笑↓
ちなみに、Cocoon高速化はすべてチェックをつけています。
で、試しにチェックをつけた状態でプラグイン側のCSSやらJSもオンにしてみたのですが、不具合はなくしかもちょっと速くなったのですが、有料分のクレジットが確実に必要になると思うので、興味のある方は検討してみてもいいかもしれません。
細かい設定例
オンにする場合のみ記載しています。
一般
- ドメインキー
- ゲストモード
- ゲストの最適化
キャッシュ
- キャッシュを有効にする
- favicon.ico をキャッシュ
- PHP リソースをキャッシュ
- オブジェクトキャッシュ
- ブラウザキャッシュ
画像の最適化
- 自動要求 Cron
- 自動戻し Cron
- オリジナル画像の最適化
- WebP 画像への置換
ページの最適化
- フォント表示の最適化→Swap
ページの最適化がほぼ何もしてないも同義なので笑、不安になってくると思うのですが、入れずにやってみてもそんなに数字が変わらなかったんですよね。
ただGoogleさんの読み込み検証だと、JSを減らせとかCSSが～とか出てきちゃうかもしれないんですけど、90以上はコンスタントに出せませたし、ページエクスペリエンスも改善したので上出来なのかなと。
注意点としては、「モバイルをキャッシュ・メディア設定」、とくにこのあたりをオフにしたことで動作（速さもCLSも）が安定した印象です。
僕はなんでもかんでも不具合起きなければオンにしたほうが絶対速いやん、とか思ってたアホなのですが笑、まあそんなことないですよね。
また、ほかのプラグインを入れたほうがいい（autoなんちゃらやEZZZなんちゃら）、と紹介されてるサイトがありますが、LiteSpeed Cacheで全然いけるので僕はいらないと思います。
現在入れているプラグインの数は８個なのですが、そのくらいでも全然高速化は可能ですよ。
CLS関連の設定例
記事の上部でおぼ結論は出ているのですが笑、注意点というかいろいろ試行錯誤して思ったことを書いていきます。
CLSを改善するにはAdSenseとCocoon設定
Cocoon設定で、画像の長さをしっかりと固定させましょう。
あとはGoogle AdSenseのTOP表示をやめること。
この２点だけでおそらく目にみえて改善するはずです（以前記事にも書きました）↓
で、アンカー広告をつけているとCLSが悪くなるという記事を見たのですが、当サイトの場合あまり関係ないようでした（悪くなっていないというサイトも見かけたけど）。
思うに、CLSってサイトがガタついてる度合いだと思うんですけど、アンカー広告は関係ないと思うんですよね。
ただ自動広告は関係あると思います笑
僕はもともと手動広告と自動広告を半分ずつぐらい使っていたのですが、自動広告だと本文中やサイドバーにも表示されるし、手動広告に統一しました。
好みの問題や手間もあるでしょうが、手動広告に変えてみることをおすすめします。
シェアボタン削除
当サイトは常にメニューボタンを表示しているので、シェアボタンをまるっと撤去しました。
広告を貼るスペースも確保されますし、この方法もかなりおすすめですね。
…といった感じでいろいろ書いていきましたが、CLSの数字を減らすのはかなり苦労した覚えがあります笑
というのも、どうしても100点をとってしまいたくなるんですよねｗ
ただGoogleConsoleの数字がよければ問題ないわけで、超高速だったり100点を狙わないだけでかなり設定が楽になると思います。
まとめ
以上、モバイルページ エクスペリエンス改善方法を解説しました！
諦めずにやれば必ず改善するので、根気よくテストしながら臨んでいきましょう。
