【コアサーバー】PageSpeed Insights でモバイルでも90超えのCocoonの設定

「【コアサーバー】ブログ改装時はクローンのサブドメインでお試しするのがオススメ」でブログの改装をやってましたが、今はかなりベストなスコアが出るようになったので、設定について記載しておきます。

そもそも PageSpeed Insights のパフォーマンスが高い理由は コアサーバーv2 が LiteSpeed であることが一番の要因ですが、ブログを大幅に改装したところ、パフォーマンスのスコアがおよそ 75 ⇒ 95 に改善しました。

改装前と改装後の比較

測定環境

今回 PageSpeed Insight で測定した環境は以下です。

測定結果

トップページと写真多めのブログ記事の2つについて、PageSpeed Insights のモバイル(携帯電話)、デスクトップのそれぞれのスコアを測定しました。

現在、サブドメインのtest2に以前のブログのクローンを作ってるので、サブドメインで改めて情報を取得してます。ちなみにtest2はインデックスされない設定にしているため SEOが少し低くなってます。

改装前はモバイルが70台と遅いのがネックでしたが、改装したことで全てグリーンになりました。

以下に改装前後のブログのイメージと、改装後のモバイルの測定値の画像を載せておきます。
改装後のトップページはサイト型風にしました。

改装前トップページ

改装前ブログ記事

改装後トップページ

改装後ブログ記事

改装後トップページのモバイルの測定値

改装後ブログ記事のモバイルの測定値

改装後の設定

以前からの設定を含めて現在の設定で必要そうな箇所を記載しておきます。

Cocoon「スキン」

• スキン：SILK

Cocoon「全体」

• サイトフォント：小杉丸ゴシック（WEBフォント）、18px
• モバイルサイトフォント：15px
• 文字の太さ：400
• サイトアイコンフォント：Font Awesome 5
• サイドバーの位置：サイドバー左
• サイドバーの表示状態：フロントページで非表示

Cocoon「ヘッダー」

• ヘッダーレイアウト：トップメニュー（右寄せ）
• ヘッダーの固定：ヘッダーを固定する
• ヘッダーロゴ：273x60 の png で作成（不適切なアスペクト比対策）
• ヘッダー背景画像：なし
• グローバルナビメニュー幅：メニュー幅をテキストに合わせる

Cocoon「広告」

• 広告の表示位置：インデックスページでトップ、サイドバートップを削除

Cocoon「カラム」

• コンテンツ幅：800
• コンテンツ余白幅：10
• コンテンツ枠線幅：1
• サイドバー幅：300
• サイドバー余白幅：5
• サイドバー枠線幅：1
• カラム間の幅：20

Cocoon「インデックス」

• フロントページタイプ：カテゴリーごと（2カラム）
  • 表示カテゴリー：6つの親カテゴリーを選択
  • 「カテゴリーごと」表示でカード表示数を変更する場合
    新着エントリーカード表示数：6個
    カテゴリーエントリーカード表示数：3個
• カードタイプ：縦型カード3列

Cocoon「カルーセル」

• カルーセルの表示：表示しない

Cocoon「モバイル」

• モバイルメニュー：ヘッダー・フッターモバイルボタン
• モバイルボタン：[v] モバイルボタンの固定表示
  　　　　　　　　[ ] サイトヘッダーロゴを表示する
  　　　　　　　　[ ] モバイルボタン時コンテンツ下のサイドバーを表示

Cocoon - 高速化

• ブラウザキャッシュ：[v] ブラウザキャッシュの有効化
• HTML縮小化：[v] HTMLを縮小化する
• CSS縮小化：[v] CSSを縮小化する
• JavaScript縮小化：[v] JavaScriptを縮小化する
• 遅延読み込み：[ ] Lazy Load を有効にする（WordPressで対応したので無し）
• Googleフォント：[v] Googleフォントの非同期読み込みを有効にする

外観 - ウィジット

• サイドバー：カテゴリ、アーカイブ
• サイドバースクロール追従：[C] 目次
• インデックスリストトップ：画像(トップ画像)
  ※表示設定「チェック・入力したページで表示」で「ページ」：「トップページのみ」
• フッター左：検索、カテゴリー、アーカイブ
• フッター中：タグクラウド
• フッター右：テキスト: プロフィール
• フッター（モバイル用）：カテゴリー、アーカイブ、タグクラウド

外観 - メニュー

• メニュー：カテゴリー、サブカテゴリ―のメニュー
  　メニュー設定：[v] ヘッダーメニュー
  　　　　　　　　[v] モバイルスライドインメニュー
• フッターモバイルボタン：share、home、top、toc のメニュー
  　メニュー設定：[v] フッターモバイルボタン

プラグイン

• Ad Invalid Click Protector
• All in One SEO
• Cocoon Custom BlogCard
• Code Block Pro
• Kattene
• LiteSpeed Cache
• Pretty Links
• Site Kit by Google
• SiteGuard WP Plugin
• UpdraftPlus
• WebSub (FKA. PubSubHubbub）

改装前→改装後の主な改善ポイント

改装をしたきっかけ

以前から自分のブログのトップページは情報が多くて『なんかウルさいなぁ』と感じてて、ここ最近の wordpress の人気のテーマは SWELL ですが、実際に綺麗なページが多いので『いいなぁ』と思ってました。

そんな中、Cocoon でSWELL風のサイト型のトップページを作るという Turicco さんの記事を見て『うわ、これやってみたい！でもメインページで試すのは怖いので、まずはテスト環境を作って試してみよう！』と思ったのがきっかけでした。

• DEMO｜サイト型（１カラム・広い） | Turicco
• 【Cocoon】CSSコピペで作るサイト型トップページ（カスタマイズ向け） | Turicco

改装前のブログの課題や変更したいポイント

改装前のブログでは以下のようなことが課題だと考えてました。

• カルーセルや新着記事など画像が小さいと文字が読めない
• トップページのサイドバーは情報が多すぎて邪魔
• ブログ記事を読むのにサイドバーの新着記事やカテゴリは不要
• ブログ記事を読んでる途中で目次でジャンプできると便利
• 目次は右側より左側にある方が感覚的に見やすい

また、Turicco さんの記事を見て以下のようにしたいと思いました。

• トップページはサイト型風にサイドバー無しにしたい
• ページの上についてくるメニューがやりたい
• SWELLのようにトップページに大きな画像があるものを真似したい
• サイドバーの情報は必要なものだけフッターに入れる
• できるだけ通常の設定だけで css まではイジリたくない

改善ポイント

現在(2023.4)は以下のような形式としました。

• トップページ
  • サイドバー無し
    　⇒ Cocoon「全体」の「サイドバーの表示状態」で「フロントページで非表示」
  • カルーセル削除
    　⇒ Cocoon「カルーセル」の「カルーセルの表示」を「表示しない」
  • トップページに大きな画像
    　⇒ 外観 - ウィジット の「インデックスリストトップ」に「画像」を設置
    ※表示設定「チェック・入力したページで表示」で「ページ」：「トップページのみ」
• ブログ記事
  • サイドバーを左
    　⇒ Cocoon「全体」の「サイドバーの位置」
  • サイドバーに目次を表示
    　⇒ 外観 - ウィジット の「サイドバー」「サイドバースクロール追従」
• 全体
  • サイドバーの情報は必要なものだけフッターに入れる
    　⇒ 外観 - ウィジット の「フッター左」「フッター中」「フッター右」
  • ページの上についてくるメニュー
    　⇒ 外観 - メニュー でカテゴリー、サブカテゴリ―のメニューを作成、「メニュー設定」で「ヘッダーメニュー」にチェック
    　⇒ Coccon「ヘッダー」の「ヘッダーレイアウト」を「トップメニュー（右寄せ）」、「ヘッダーの固定」を設定
• モバイル向けの調整
  • モバイルメニューを表示
    　⇒ Cocoon「モバイル」の「モバイルメニュー」を「ヘッダー・フッターモバイルボタン」、「モバイルボタン」で「モバイルボタンの固定表示」を設定
  • 右上のカテゴリメニューが出ないのでスライドメニューにする
    　⇒ 外観 - メニュー でカテゴリー、サブカテゴリ―のメニューの「メニュー設定」で「モバイルスライドインメニュー」にチェック
  • フッターメニューを追加
    　⇒ 外観 - メニュー でフッターモバイルボタンのメニューを作って「メニュー設定」で「フッターモバイルボタン」にチェック
  • モバイル用のフッター
    　⇒ 外観 - ウィジット の「フッター（モバイル用）」

パフォーマンスに影響が大きかった設定

確認方法

結局、どの設定変更がパフォーマンスに大きく影響したのかを以下の手順で調べてみました。

1. 以前のブログのバックアップから test3 のサブドメインを作成。
2. PageSpeed Insights で事前のスコアの確認と、改善できる項目を確認。
3. 改善できる項目や影響がありそうな変更。
4. LightSpeed Cache で「すべてをパージする」でキャッシュをクリア。
   ※最初はこれに気付かずスコアが変わらないと勘違いしてました。
5. wordpress の「外観」-「カスタマイズ」の左下で、PC、タブレット、携帯を表示させてキャッシュさせる。
6. PageSpeed Insights でスコアの変化を確認。
7. 3項～6項を繰り返し。

確認内容

test3 のサブドメインを作成、スコアの確認と改善項目を確認

test3 のサブドメインに以前のブログをUpdraftPlusのバックアップから復活

PageSpeed も以前のブログとだいたい同じ数値

時間を確認、Largest Contentful Paint が問題の模様

改善できる項目を見ると「適切なサイズの画像」と「次世代フォーマットでの画像の配信」に問題がある模様

「次世代フォーマットでの画像の配信」の問題について

最初に原因がわかったのは「次世代フォーマットでの画像の配信」の方でした。

ここ最近は 1200x675 の webp で画像はアップしているので、古い投稿だろうと思ったところ、ヘッダーの画像が jpeg でサイズが1MBもある！？

確認すると、ブログを最初に作成した時に適当に画像編集もせずにアップしてたので、2560x1920 の jpeg でサイズがたしかに1MBありました。。なんと頭の山の部分を出すために全ページで無駄に大きな画像を読み込んでたと判明。。

1200x675 の webp で90kbくらいの画像に差し替えてみたところ、モバイルのパフォーマンスが10も上がりました！

「次世代フォーマットでの画像の配信」の右をクリックすると詳細が表示される

1MBのヘッダー画像の頭の部分をヘッダーで利用しているため、全てのページで問題だった模様

試しに軽い画像に置換して、LiteSpeedのキャッシュをパージ

パフォーマンスが73⇒84にアップしました！

ちなみに古い記事のアイキャッチは 1200x675 の jpeg ですが、とりあえずそのままにしました。

「適切なサイズの画像」の問題について

「適切なサイズの画像」については、正直原因が良くわかりませんでした。

カルーセルと新着記事の画像に 768x432 の画像が使われてて、サイズが大きいので適正なサイズにすれば画像ファイルのサイズが削減できると言ってるんだろうと思いますが、Cocoon は 320x180 や 376x212 の画像ファイルも作成しているので、なぜ 768x432 を出そうとしてしまっているのかがわかりませんでした。

「適切なサイズの画像」の右をクリックすると詳細が表示される

カルーセルと新着記事の画像が小さいのに768x432の画像が使われている？

上記の理由はわかりませんでしたが、カルーセルを非表示にすると、パフォーマンスは上がりました。

とりあえず、カルーセルは非表示にしました

パフォーマンスは84⇒93になりました

上記でも、新着記事の画像は「適切なサイズの画像」の警告が出てましたが、応答時間が短くなったことでスコアが上がったようです。

ちなみに改装後の PageSpeed Insight では、インデックスページの表示を変えたせいか「適切なサイズの画像」の警告は出なくなりました。