ワードプレスを使って自分のサイトやブログを作成する際、最初に訪問者が目にする「フロントページ（トップページ）」の設定はとても重要です。フロントページの設定次第で、サイト全体の印象や回遊率、SEO効果までも左右します。この記事では、初心者の方でも迷わずにできる「ワードプレス フロントページの設定方法」を、実際の手順とともにわかりやすく解説していきます。

ワードプレスのフロントページとは？

ワードプレスにおける「フロントページ」とは、サイトのトップページ、つまり訪問者が最初にアクセスするページのことです。デフォルト設定では、新着記事が一覧で表示されるブログ形式になっていますが、企業サイトやポートフォリオ、サービス紹介ページなどでは、静的ページをトップに表示したい場合もあります。

そのため、目的に応じて「固定ページをフロントページに設定する」か、「最新の投稿をフロントページにする」かを選択できるようになっています。

フロントページ設定を行う前に準備しておくこと

フロントページを設定する前に、次の準備をしておくとスムーズに作業が進みます。

1. トップページ用の固定ページを作成しておく
   「ホーム」「トップページ」などのタイトルで固定ページを新規作成します。内容は一旦仮のテキストでも構いません。
2. 投稿一覧ページを作成しておく（ブログ機能を使う場合）
   投稿記事一覧を別ページに表示したい場合、「ブログ」や「お知らせ」などの固定ページも作成しておきます。
3. テーマの構造を理解しておく
   一部のテーマでは独自のフロントページテンプレートが用意されていることがあります。テーマの説明書（ドキュメント）も確認しておくと安心です。

フロントページの設定手順

固定ページをフロントページに設定する方法

1. 管理画面から「設定」→「表示設定」を開く
   ワードプレスの管理画面左側メニューから「設定」＞「表示設定」に進みます。
2. 「ホームページの表示」を変更する
   「ホームページの表示」で「固定ページ」を選択します。
3. フロントページと投稿ページを指定する
   「ホームページ」には先ほど作成した固定ページ（例：ホーム）を設定し、「投稿ページ」にはブログ一覧ページを指定します。
4. 変更を保存
   最後に「変更を保存」をクリックすれば、設定完了です。

これで、サイトのトップページが固定ページに変更され、任意の内容を表示できるようになります。

最新の投稿をフロントページに設定する方法

ブログ形式のサイトを運営したい場合は、「最新の投稿」をフロントページに設定しておくと便利です。

1. 「設定」→「表示設定」を開きます。
2. 「ホームページの表示」で「最新の投稿」を選択します。
3. 「変更を保存」をクリックして完了です。

これで、トップページに最新記事の一覧が自動的に表示されます。ブログ中心のサイトに最適です。

固定ページ型フロントページの魅力

固定ページをフロントページにすることで、以下のようなメリットがあります。

• デザインを自由にカスタマイズできる
  企業の公式サイトのように、トップページをブランドイメージに合わせたデザインに変更できます。
• 重要な情報を常に上部に表示できる
  新着投稿に関係なく、常に特定のメッセージやCTA（行動喚起ボタン）を表示可能です。
• SEOに有利
  構造化データを設定したり、特定のキーワードで最適化したりできるため、検索上位を狙いやすくなります。

フロントページをカスタマイズする方法

カスタマイザーを使う

「外観」→「カスタマイズ」から、ヘッダー、フッター、背景画像、ウィジェットなどを簡単に編集できます。リアルタイムでプレビューを確認しながら変更できるのが利点です。

ブロックエディター（Gutenberg）を使う

ブロックエディターを利用すれば、画像・見出し・ボタンなどを自由に配置し、コードを書かずにプロ並みのデザインを実現できます。

ページビルダープラグインを使う

「Elementor」「Divi Builder」「SiteOrigin」などのページビルダーを使えば、ドラッグ＆ドロップで直感的にデザインできます。

テーマによるフロントページの違い

テーマによっては、独自の「フロントページテンプレート」が用意されている場合があります。例えば：

• Cocoon：シンプルなブログ型に最適。トップページにおすすめ記事を表示可能。
• SWELL：ブロックエディター対応でデザイン性が高く、トップページを自由に構成できる。
• Lightning：企業サイト向け。トップにスライダーやお知らせ欄を簡単に追加可能。

フロントページ設定後に確認すべきポイント

1. スマホ表示の最適化
   レスポンシブ対応を確認し、スマホでもレイアウトが崩れないかをチェック。
2. ナビゲーションの整備
   メニューリンクが正しく設定されているか確認。
3. メタディスクリプションとタイトルタグ
   SEO対策として、トップページのタイトルやメタ説明文も必ず最適化しましょう。
4. キャッシュの削除
   変更が反映されない場合はキャッシュプラグインをクリアしてください。

トップページにおすすめのコンテンツ構成

トップページでは、訪問者が知りたい情報に素早くアクセスできるようにすることが重要です。以下のような構成が効果的です。

SEOに強いフロントページの作り方

• タイトルタグに主要キーワードを入れる
  例：「ワードプレス フロントページの設定方法｜初心者でも簡単！」
• h1・h2タグを適切に使う
  見出しタグを構造的に使うことで、検索エンジンにページ内容を伝えやすくします。
• 内部リンクを設置
  フロントページから各主要ページ（サービス紹介・ブログ・問い合わせ）へのリンクを設置します。
• ページスピードを改善
  画像の最適化やキャッシュプラグイン活用で、表示速度を上げましょう。

よくある質問（FAQ）

Q1. フロントページを設定しても反映されません。どうすればいいですか？
A. キャッシュプラグインを使っている場合、キャッシュを削除して再読み込みしてください。また、テーマのテンプレートに固定ページが反映されない仕様の場合もあります。

Q2. 投稿ページを作らずにフロントページを設定できますか？
A. はい、ブログ機能を使わない場合は「投稿ページ」を空欄のままで構いません。

Q3. トップページのURLを変更できますか？
A. 「固定ページ」編集画面からスラッグを編集すればURLを変更できます。ただし、SEO上は変更しすぎない方が良いです。

Q4. フロントページを複数作ることはできますか？
A. ワードプレスでは1サイトにつき1つのフロントページ設定が可能です。複数作りたい場合は、マルチサイト機能を利用します。

Q5. フロントページでスライダーを表示したいです。
A. 「Smart Slider 3」などのプラグインを使うと、簡単にスライダーを設置できます。

Q6. 固定ページを削除するとどうなりますか？
A. 設定していたフロントページが削除された場合、ワードプレスは自動的に「最新の投稿」ページをトップに切り替えます。

まとめ

フロントページの設定は、ワードプレスサイト構築の中でも特に重要なステップです。固定ページを使うか、最新投稿を表示するかでサイトの印象は大きく変わります。自分の目的に合わせて最適な方法を選び、デザインやコンテンツを整えることで、ユーザーにとって魅力的なトップページを作り上げましょう。

あなたのサイトの第一印象を決めるのは、この「フロントページ」からです。正しい設定と工夫で、より多くの訪問者を惹きつけるページを構築していきましょう。

https://tacademy.jp/cocoon-change/

タイトル前moreタグ前に広告を入れる

1. cocoon設定
2. 広告
3. 本文中のみ（オート、先頭から-１のみ）

アドセンス審査のhead(ヘッド)挿入どこ？

https://wp-cocoon.com/google-adsense-authentication-code/

アイコン一括変更

https://tacademy.jp/icon/

ページスピードアップ関係

https://tacademy.jp/pagespeed/

https://tacademy.jp/preload/

https://tacademy.jp/slow/

https://tacademy.jp/mobile-site-kousoku-cocoon/

https://tacademy.jp/cocoonkousokuka/

サーチコンソール

https://tacademy.jp/search-console/

https://tacademy.jp/googlesearchconsole/

エディター

https://tacademy.jp/style/

https://tacademy.jp/button/

最終的にこのプラグインは不要になりました。
コクーンで対応可能になったため。

カルーセル設定

https://tacademy.jp/karu-seru/

ツールからSearchRegexを選択してクリック

SearchRegexが起動します。

検索に置き換えたい画像のアドレス

置き換えに変えたい画像のアドレス

WordPressでブログを運営すると、どうしてもサイトのスピードが遅くなってしまいます。

サイトのスピードについてはGoogle「PageSpeed Insights」で問題点を解消していきましょう。

ブログが遅い原因の一つに、「キーリクエストのプリロード」というのがあります。

そもそもプリロードって？

プリロードとは「Preload」、つまり「Pre（前に）」「load（読む）」ということ。

WordPressはHTMLやCSS、JavaScriptなど、たくさんのファイルを使って作られていて、ページを読み込むため順序が決まっています。

その中で、後に読み込まれている関係で、表示速度が遅くなっているものがあります。

それを先に読み込むことでサイト表示の高速化がはかれるというものです。

漠然と意味がわかったところで、実際にキーリクエストのプリロードを改善していきます。

改善方法

表示されたURLを右クリックし、「リンクのアドレスをコピー」を押して下さい。

Twitterの埋め込みは絶対に遅くなる！

下のような埋め込みをトップに持ってくると必ず遅くなる

たっくって誰やねん？

どんなやつやねん？

って人のために

サイトのまとめ記事作ってみました。

読んでもらったら

どんな感じのやつかは

わかるかと思います✨

興味ある方はどうぞ

よろしくお願いします‼️

コメントとかもらえると嬉しいです😊https://t.co/GlPD9EHFQ6

— たっく✨@人生楽しむ”学び”を提供 (@TacAcademy) March 29, 2020

スマホでのカルーセル表示

これは若干ですが低下の要因になります

サイト高速化の事前読み込みの以下の部分が不要？

削除することで若干のページスピードが改善

ブログを運営する上でアクセス数は非常に重要

一つの目安となるのがドメインパワー

https://www.ispr.net/

このサイトで一つの目安として測定が可能です！

今日はドメインパワーをあげる方法をご紹介！

ドメインパワーを上げる6つの方法

前述したサイトでドメインパワーがある程度把握できます。

では、ドメインパワーを向上させるにはどうすればいいのでしょうか？

検索エンジンの信頼度を上げるには、様々な方法があります。

中でも有効な施策を6つご紹介。

これらは当たり前の方法ですが、ドメインパワーの向上には地道にやるしかないです。

1. 記事数を増やす

1つ目は、サイトの記事数を増やすこと。

キーワードと関連性の高い記事が多いサイトは、検索エンジンから信頼を得やすく、ドメインパワー向上につながります。

しかし、闇雲に記事数を増やすだけでは効果がありません。

質の低いコンテンツの量産は、サイト全体の評価を下げることになります。

高品質な記事を増やすことが重要なのです。

ここで大事になって来るのがリライトですね。

リライトする場合はこちらのツールを活用しても良いと思います。

私は実際にこのsmartASPを利用しています。

利用の際の難しかった点は下記の記事にまとめました。

https://tacademy.jp/smartasp/

2. 文字数を増やす

2つ目は、記事の文字数を増やすことです。

検索エンジンからの評価が高いのは、ユーザに価値のある情報を発信している記事です。

文字数が少ない記事は、情報が薄い場合が多い。

情報量を多くすれば自然に文字数が増え、それだけユーザのニーズに応えやすくなります。

すると記事の「滞在時間」や「直帰率」も改善し、検索エンジンの評価が上がることにつながります。

3. 記事のクオリティを上げる

3つ目は、記事のクオリティを上げることです。

これは２にも通じることですが、

最近、検索エンジンのロジックが変化して記事の質がより評価されるようになりました。

文字数の増加は重要ですが、ただ増やしても意味がありません。

また、検索キーワードの出現率や回数など、小手先のテクニックでは通用しなくなってきました。

ユーザに必要な情報を多く提供した結果字数が増え、テクニックよりもユーザが喜ぶ内容を熟考し発信することが大事です。

4. 更新頻度を上げる

4つ目は、記事の更新頻度を上げること。

ドメインパワーはサイト設立の年数が長いほど強い傾向があります。

ですが、更新されないとドメインパワーは上がりません。

たとえ質の高いコンテンツを発信していても、更新頻度があまりに少ないと評価されないのです。

ホームページの更新頻度を上げ、少しでも記事を増やすことが重要です。

サーチコンソールなどを活用するとインデックスが早くなりやすいので活用しない手はないでしょう。

https://tacademy.jp/googlesearchconsole/

5. 被リンクを集める

5つ目は、被リンクを集めること。

被リンクは、自分のサイトが他のサイトにリンクされること。

コンテンツが、ドメインパワーの大きいメディアに被リンクされると、サイトの信頼度が高まります。

被リンクは”信頼の証”と考えられますね。

被リンクはドメインパワー向上に大きく役立ちますが、自分でコントロールすることが難しいのも確かです。

質の高いコンテンツを頻繁に発信することが被リンクの近道とも言えます。

6. サイトそのものをSEOに強く改造する（SEOに強いテンプレートを使う）

6つ目は、サイトそのものをSEOに強く改造すること。

言い換えると、SEOに強いテンプレートデザインを使うことです。

例えばサイトのUIやデザインが悪いと、記事の質が高くても読者が離脱する場合があります。

スクロールのスムーズさ、ページの読み込み速度、文字の読みやすさ等に気を配ることで、滞在時間や直帰率が改善し、ドメインパワーの向上につながるのです。

別サイトですがこちらを参考にしてもいいかもしれません。

ちなみに私は「無料で行けるとこまで！」という考えでやっているのでcocoonを採用しています。

これは、初心者がブログってはじめやすいし楽しいと思って貰えるように低コストで、できるだけやった実績を残すためでもあります。

同じテーマだとアドバイスもしやすいですからね！

投稿画面のビジュアルでスタイルドロップダウンリストが表示されない時の対処方法。

原因はAdvanced Editor Tools (旧名 TinyMCE Advanced)

下記のフォーラムでも記載が有りますが、原因はプラグインです。

参考

https://wp-cocoon.com/community/cocoon-theme/スタイルドロップダウンリストが表示されない/#post-3043

テーブル（表）などは使いたい

純正のコクーン のではテーブール（表）が使いづらいので、

なんとか利用できないか調べてみました。

設定方法

ここでは、TinyMCE Advancedを使ってビジュアルエディタでの編集ボタンの追加方法を見ていく。

エディター設定画面で「Classic Editor(TinyMCE)」をクリックした後、下図のように、追加したい編集ボタンを選んで、上のツールバーにドラッグ&ドロップしよう。

バズ部や弊社クライアント様のサイトでは以下のボタンを使用している。あなたも、これらのボタンを追加しておけば問題ないだろう。

アイコン	ツール名	用途
	段落	<h2>や<h3>などの見出しタグを設定する時に使用する。インデックス効果を高めるWEBライティングのために必須。
	フォントサイズ	文字のフォントサイズを変更する時に使用する。
	太字	文字を太字にして目立たせたい時に使用する。
	テキスト色	文字色を変更したい時に使用する。
	テキスト背景色	文字の背景に色を付けたい時に使用する。
	イタリック	文字をイタリック体に変更したい時に使用する。
	下線	文字にアンダーラインを付けたい時に使用する。
	左寄せ	文字を左寄せにしたい時に使用する。
	中央揃え	文字をセンター寄せにしたい時に使用する。
	右寄せ	文字を右寄せにしたい時に使用する。
	両端揃え	文字の横幅を統一したい時に使用する。
	ツールバー切り替え	※このボタンは、これ以上の数のボタンを追加したい時に必須。
	「続きを読む」タグを挿入	モアタグを挿入したい時に使用する。
	番号なしリスト	リストタグを挿入したい時に使用する。
	番号付きリスト	ナンバータグを挿入したい時に使用する。
	引用	引用タグを挿入したい時に使用する。
	インデントを減らす	文章をアウトデントしたい時に使用する。
	インデントを増やす	文章をインデントしたい時に使用する。
	リンクの挿入/編集	文字にリンクを挿入したい時に使用する。
	リンクの削除	文字のリンクを外したい時に使用する。
	テーブル（表）	テーブルタグを作成したい時に使用する。
	画像の挿入/編集	画像の挿入、編集の時に使用する。実際には画像に余白を入れたり、画像サイズのピクセル数を入力して調整する時に便利。
	動画を挿入/編集	動画を挿入する時に使用する。実際にはYouTubeの動画コードを挿入する時に利用すると便利な機能。

 

WordPressをCocoonで運営していて、PageSpeed Insightsを確認したら「パソコンは速いのに、モバイルだけ30点台」。こんな数字を見せられると、サイトそのものが壊れているような気分になる。

私も以前、PCでは80点台なのにモバイルでは30点台まで落ちた経験がある。当時はいろいろ設定を変更し、モバイル61点、PC93点まで改善した。

ただし、2026年現在では高速化の考え方がかなり変わっている。

「PageSpeed Insightsを100点にしないとSEOで不利なのか？」

結論からいえば、100点を目指す必要はない。むしろ、点数だけを追いかけてJavaScriptを無理に変更したり、キャッシュ系プラグインを何個も入れたりするほうが危険だ。

現在重要なのは、PageSpeed Insightsの点数そのものより、実際のユーザーが快適にページを表示できているかである。

Cocoonには高速化機能が最初から用意されている。画像、PHP、サーバー、広告、プラグインまで順番に確認すれば、専門的なコードを書かなくても改善できる可能性は高い。

昔の高速化方法をそのまま使う必要はない。ここはかなり重要だ。

PageSpeed Insightsでモバイルだけ遅くなるのは珍しくない

PageSpeed InsightsはGoogleが提供しているWebページの速度測定ツールだ。

公式のPageSpeed Insightsはこちら。
PageSpeed Insightsを開く

URLを入力するだけで、モバイルとデスクトップの状態を確認できる。

ただし、ここで表示される「57点」「82点」「94点」といった数字だけを見て一喜一憂するのはおすすめしない。

モバイルはPCより厳しい条件で測定される

WordPressサイトでは、PCよりモバイルのPageSpeed Insightsスコアが低くなることが多い。

モバイルでは通信環境や端末性能の影響を受けやすく、画像やJavaScriptの読み込みも重く感じやすい。

そのため、

• PC：90点
• モバイル：60点

という結果でも、それだけで異常とはいえない。

私も昔は「PCが速いならモバイルも同じくらいになるはず」と考えていた。しかし、ここを同じ基準で見ると泥沼に入りやすい。

100点という数字は気持ちいい。

しかし、サイト運営では数字を眺めることより、読者が待たされないことのほうが重要だ。

「実際のユーザー」と「テスト結果」は分けて見る

現在のPageSpeed Insightsには、大きく分けて2種類のデータがある。

1つはChrome UX Report、通称CrUXによる実際のユーザーデータ。

もう1つはLighthouseによるテスト環境で測定したデータだ。

Google公式でも、CrUXは実際のユーザー環境を集計したフィールドデータ、Lighthouseは制御された環境で行うラボテストとして説明している。

アクセス数が少ないページでは実ユーザーデータが表示されず、Lighthouseだけ表示される場合もある。

つまり、1回測って50点だったからといって「このサイトは常に50点の速度」という意味ではない。

ここを勘違いすると、設定変更だけが無限に増えていく。

2026年はCore Web Vitalsを優先して確認する

Googleが現在重視している表示体験の指標が「Core Web Vitals」だ。

主に次の3つを見る。

• LCP：主なコンテンツが表示されるまでの速さ
• INP：クリックやタップに対する反応速度
• CLS：表示中にレイアウトがずれる量

Googleが示している「良好」の目安は次のとおりだ。

これらは実際のユーザーアクセスの75パーセンタイルを基準として評価される。

公式情報はこちら。
Google公式 Core Web Vitalsの解説

PageSpeed Insights100点よりCore Web Vitals良好を狙う

ここはかなり大事だ。

Google自身が、Core Web Vitalsはランキングシステムで利用されていると説明している。一方で、Core Web Vitalsが良好だから検索1位になるわけではない。

GoogleもSEO目的だけで満点を追いかけることが最適とは限らないとしている。

つまり、

PageSpeed Insights100点＝検索上位

ではない。

記事の内容が弱ければ、サイトだけ爆速でも上位表示は難しい。

高速化は重要だ。しかし高速化だけでSEOが完成するほど、Googleも単純ではない。

Cocoonの高速化設定を最初に確認する

Cocoonを使っているなら、いきなり高速化プラグインを探す必要はない。

まずCocoon自身の機能を使う。

Cocoon公式でも高速化設定が案内されている。
Cocoon公式「おすすめのサイト高速化設定」

Cocoon設定から高速化を確認する

WordPress管理画面からCocoonの高速化設定を確認する。

特に確認したいのは、

• ブラウザキャッシュ
• CSSの縮小
• JavaScriptの縮小

などだ。

Cocoon公式でも、テーマ標準の高速化機能を利用する方法が案内されている。

設定したら、一度サイトを表示して崩れていないか確認する。

CSSやJavaScriptの縮小では、使用しているプラグインや独自カスタマイズとの相性によって表示が崩れる場合がある。

全部ONにして終わり、ではない。

高速化設定→サイト確認→PageSpeed Insights確認

この順番で進めるべきだ。

不具合が出たら一気に変更しない

高速化で一番面倒なのは、「何を変更したせいで壊れたのかわからなくなる」ことだ。

CSS縮小、JavaScript縮小、キャッシュプラグイン、画像Lazy Load、CDNを同時に変更する。

そして表示が崩れる。

人間はこういうとき、なぜか全部一度に触りたくなる。後から原因探しという罰ゲームが始まるだけだ。

変更は1つずつ行う。

これだけでもトラブルはかなり減らせる。

モバイル高速化では画像を最優先で軽くする

ブログでは画像がページ容量の大部分を占めることがある。

特に、

• アイキャッチ画像
• 大きな写真
• PNG画像
• 商品画像
• スクリーンショット

が大量にある記事は重くなりやすい。

以前の私の記事でも、画像最適化はかなり重要な対策だった。

これは2026年でも変わらない。

WebPのためにfunctions.phpを書き換える必要はない

昔はWordPressでWebPを扱うため、functions.phpにコードを追加する方法も使われていた。

しかし、現在これをわざわざ行う必要はない。

WordPressは5.8からWebP画像を正式にサポートしている。対応サーバーならJPEGやPNGと同じようにメディアライブラリへアップロードできる。

昔の記事にあるような、

「WebPを使うためfunctions.phpへコードを追加する」

という方法は、現在なら優先する理由がほぼない。

コードを追加すればするほど管理も面倒になる。

使わなくていいコードは使わない。

これでいい。

画像サイズそのものを小さくする

WebPに変換するだけでは不十分な場合もある。

たとえば本文幅が800px程度なのに、4000pxの写真をそのままアップロードする必要はない。

画像を投稿する前に、

• 必要以上に大きな画像を縮小
• JPEG・WebPなど適切な形式を利用
• 圧縮する
• 同じ画像を何枚も読み込ませない

といった基本対策をしたほうが効く。

高性能な画像最適化プラグインも便利だが、元画像が無駄に巨大なら仕事を増やしているだけだ。

まず画像を軽くする。

ここは地味だが強い。

Lazy Load専用プラグインは慎重に使う

昔は画像の遅延読み込みを行うために「a3 Lazy Load」のような専用プラグインを使う方法もあった。

現在は事情が違う。

WordPressは5.5から画像のネイティブLazy Loadに対応しており、5.7からiframeにも対応している。

そのため、Lazy Loadだけを目的にプラグインを追加する必要性は昔よりかなり低い。

最初に表示される画像を遅延させない

注意したいのが、画面上部の画像だ。

記事を開いてすぐ表示される大きな画像がLCPの対象になっている場合、その画像まで遅延読み込みすると逆にLCPが悪化することがある。

WordPressでも、この問題を避けるためLazy Loadの仕組みは改善されてきた。

「画像は全部Lazy Loadにすれば速くなる」

とは限らない。

画面下の画像には有効でも、最初に見せる画像まで遅らせれば本末転倒だ。

PHPは古いバージョンを使わない

以前の記事では「PHP5からPHP7へ変更すると高速化できる」と書いていた。

これは当時なら意味があった。

しかし2026年にPHP7をおすすめする記事を書いたら、さすがに時間が止まりすぎている。

WordPress公式では現在、PHP8.3以上を推奨している。

公式要件はこちら。
WordPress公式 必須要件

PHP更新前にはテーマとプラグインを確認する

PHPは新しくすれば無条件でいい、という話でもない。

古いプラグインや独自コードが残っていると、新しいPHPでエラーが出る可能性がある。

そのため、

1. WordPressを更新
2. Cocoonを更新
3. プラグインを更新
4. バックアップ
5. PHPを更新
6. サイト表示を確認

という順番が安全だ。

古いPHPを使い続ける理由は薄いが、何も確認せず変更する必要もない。

速さと安全性の両方を見るべきだ。

エックスサーバーならサーバー側の高速化も確認する

私が使用してきたエックスサーバーには、サーバー側にも高速化機能が用意されている。

Cocoonだけ変更してもTTFB、つまりサーバーが応答を開始するまでの時間が遅いなら改善には限界がある。

Xアクセラレータを確認する

エックスサーバーには「Xアクセラレータ」がある。

現在のXアクセラレータ Ver.2では、

• 静的ファイルの高速化
• PHPプログラムの高速化

が提供されている。

公式はこちら。
エックスサーバー公式 Xアクセラレータ

エックスサーバーを使っていて表示速度に悩んでいるなら、一度設定を確認する価値は高い。

サーバーキャッシュも利用できる

エックスサーバーにはサーバーキャッシュ機能もある。

サーバー側にキャッシュを作ることで、表示速度や大量アクセス時の処理能力を向上させる仕組みだ。

公式はこちら。
エックスサーバー公式 サーバーキャッシュ設定

ただし、キャッシュを有効にした後はサイト表示を確認する。

更新した記事が反映されない場合などは、キャッシュ削除が必要になることもある。

キャッシュ系プラグインは最後に試す

以前は「WP Fastest Cache」などのキャッシュ系プラグインも利用していた。

効果が出る環境はある。

ただ、2026年現在なら私は最初から入れる方法はすすめない。

Cocoonにも高速化機能があり、レンタルサーバー側にもキャッシュ機能があるからだ。

そこへさらにキャッシュプラグインを追加すると、

• Cocoon
• サーバー
• プラグイン

の3か所で高速化処理が重なる場合がある。

設定が増えるほど原因切り分けも難しくなる。

まずテーマとサーバー。

それでも改善しない場合にプラグインを検討する。

この順番が扱いやすい。

広告・アクセス解析・SNS埋め込みは速度を落としやすい

Cocoon公式でも、AdSense、Analytics、SNSなど外部サービスを読み込むとPageSpeed Insightsの点数が大きく下がる場合があると説明されている。

これはテーマを変更しても完全には避けられない。

AdSenseを使うなら多少の低下は受け入れる

ブログを収益化しているなら広告を全部消して100点を取っても意味がない。

速くなった。

収益は消えた。

これでは何をしているのかわからない。

広告数が多すぎるなら減らすべきだが、収益とのバランスを見る必要がある。

PageSpeed Insightsで警告されたからといって、外部JavaScriptを全部消す必要はない。

不要なプラグインは削除する

長期間WordPressを使っていると、

「これ何のために入れたんだ？」

というプラグインが増えてくる。

私も以前、高速化を行ったタイミングで不要なプラグインやテーマを整理した。

停止しているだけでも管理対象は増える。

現在使っていないものは整理したほうがいい。

ただし、削除前には本当に不要か確認する。

勢いだけで消すと別の意味でサイトが軽くなる。機能まで消える。

PageSpeed Insightsの警告はLCP・INP・CLSに分けて考える

PageSpeed Insightsには大量の改善項目が表示される。

全部を同時に直そうとするとわけがわからなくなる。

問題を3つに分けると見やすい。

LCPが悪い場合

LCPが遅いなら、まずページ上部を見る。

特に、

• アイキャッチ画像が重い
• サーバー応答が遅い
• CSS読み込みが多い
• Webフォントが重い
• 大きな画像を読み込んでいる

といった原因を確認する。

ブログではファーストビューの大きな画像がLCPになることも多い。

まずそこを軽くする。

INPが悪い場合

INPは操作したときの反応速度だ。

悪い場合は、

• JavaScriptが多い
• 広告スクリプトが多い
• 重いプラグイン
• SNSや外部ウィジェット

などを疑う。

記事を表示するだけなら問題なくても、メニューを押した瞬間に固まるサイトは使いにくい。

人間は待たされるのが嫌いだ。特にボタンを押した直後は驚くほど短気になる。

ここは軽視できない。

CLSが悪い場合

ページを読んでいたら突然文章が下へずれる。

かなり不快だ。

CLSが悪い場合は、

• 画像のwidth・height
• 広告表示スペース
• 遅れて表示されるパーツ
• Webフォント
• 埋め込みコンテンツ

などを確認する。

特に広告が後から入り込んで文章を押し下げる場合は注意したい。

昔の高速化方法をそのまま使わない

今回2本の記事を統合するうえで、昔は有効だったものの、現在は積極的におすすめしにくい方法もかなり整理した。

JavaScriptをfunctions.phpで強制的にasync化しない

昔の記事では、レンダリングを妨げるJavaScriptへの対策としてfunctions.phpへコードを追加していた。

しかし、JavaScriptを強制的にasync化すると、読み込み順序が変わって機能が壊れる可能性がある。

仕組みがよくわからないコードをPageSpeed Insightsの数点のためだけにfunctions.phpへ貼る。

これは現在ならおすすめしない。

Cocoonや高速化プラグインなど、管理できる機能から調整したほうが安全だ。

AMP化を高速化の第一候補にしない

以前はAMP化も高速化手段として使っていた。

実際、私も試したことがあるが、表示崩れの影響が大きく停止した。

2026年現在、通常のWordPressサイトを高速化する目的だけでAMPを最優先にする必要はない。

通常ページのCore Web Vitalsを改善するほうが素直だ。

高速化のために別形式のページまで管理するのは、個人ブログでは負担が大きすぎる場合がある。

Cocoonのモバイル高速化はこの順番で進める

私なら現在は次の順番で確認する。

1. PageSpeed Insightsでモバイルを測定
2. Core Web VitalsのLCP・INP・CLSを確認
3. WordPress・Cocoon・プラグインを更新
4. バックアップを取る
5. Cocoonの高速化設定を確認
6. 画像を圧縮しWebPなどを利用
7. PHPを推奨バージョンへ更新
8. Xアクセラレータやサーバーキャッシュを確認
9. 不要なプラグインを整理
10. 広告や外部JavaScriptを確認
11. 再度PageSpeed Insightsで測定する

いきなりfunctions.phpを書き換える必要はない。

キャッシュプラグインを3つ試す必要もない。

基本的な部分から順番に潰したほうが安全で、原因も見つけやすい。

PageSpeed Insightsが低いだけでSEOが終わるわけではない

表示速度はSEOと無関係ではない。

GoogleはCore Web Vitalsをランキングシステムで利用していると明言している。

しかし、もっと重要な点がある。

速度だけで順位が決まるわけではない。

内容が検索意図に合っているか。

読者が知りたい情報があるか。

スマートフォンでも読みやすいか。

広告が邪魔をしていないか。

サイトが安全か。

こうした要素を含めたページ体験全体を見る必要がある。

PageSpeed Insightsが90点から95点になったから検索順位が急上昇する、という単純な世界ではない。

だったら、その5点を取るために何時間も使うより、記事を改善したほうがいい場合もある。

この判断はかなり重要だ。

まとめ｜Cocoonのモバイル高速化は100点ではなく「読者が快適か」で判断する

CocoonでPageSpeed Insightsのモバイルスコアが低くても、慌てて大量の高速化プラグインを入れる必要はない。

まず確認したいのは、

• Core Web Vitals
• Cocoonの高速化設定
• 画像サイズとWebP
• PHP
• サーバーキャッシュ
• Xアクセラレータ
• 不要なプラグイン
• 広告や外部JavaScript

だ。

以前はPHP7への変更、Lazy Loadプラグイン、functions.phpへのWebP対応コード、AMPなども高速化策として使っていた。

しかしWordPressは進化した。

昔必要だった作業が、今ではWordPress本体やCocoonに標準搭載されているものも多い。

だからこそ、古い高速化記事を見てコードを片っ端から貼るのはおすすめしない。

私自身、モバイル30点台を見て設定を何度も触った経験があるからこそ思う。

PageSpeed Insightsの点数は改善の入口であって、ゴールではない。

GoogleもCore Web Vitalsだけで検索順位が決まるとはしていない。まず読者がスマートフォンで普通に開けて、普通に読めて、操作しても待たされない状態を作る。

そこまで改善できたら、残った数点のためにサイトを壊す必要はない。

速いサイトは大切だ。

だが、「100点のサイト」より「読みたい情報がすぐ読めるサイト」のほうが強い。2026年のWordPress高速化では、この基準で判断するべきだ。

ボタンテキストの挿入

コクーン は、ビジュアルエディターからリンク用のボタンを挿入できます。

ボックスも同じところからできます。

リンクは自前で

上記のように、このボタン拡張スタイル機能は、href属性やtarget属性を持ちません。

ですので、テキストエディター側で以下のように属性を入力する必要があります。

<a class="btn btn-red btn-l" href="リンク" target="_blank">タイトル</a>

これを実際に表示させると、以下のようになります。

投稿画面のビジュアルでスタイルドロップダウンリストが表示されない

画像を見ると、ビジュアルエディターの機能を強化するプラグインが邪魔している？

とりあえずそれを無効にした。

原因プラグインはTinyMCE Advancedでした！

以下のインストール・設定画面と圧縮比較には旧版の内容が含まれます。現行版では設定項目が異なります。

画像の最適な大きさについても解説していきます。

なお、圧縮率は「EWWW Image Optimizer」よりも高め。。なので変更しました。

また、オンライン上で画像を圧縮してくれるサービスはありますが、画像を都度圧縮しに行くことが手間でした。

「imagify」を使えば、WordPressに画像をアップすれば自動的に圧縮してくれるので大変便利です。

ちなみに今まで使っていたのは

EWWW Image Optimizer

EWWW Image Optimizer

Speed up your website to better connect with your visitors. Properly compress and size/scale images. Includes lazy load and WebP convert.

ja.wordpress.org

画像をロスレス圧縮することで、サイズを縮小しページ表示する上で最適化するためのプラグインです。

ただし、強力な圧縮を行うには有料ライセンスを購入する必要があります。

imagifyでできること

imagifyは画像最適化のためのプラグインです。

画像最適化とは、画像の読み込み速度を速くするためにファイルサイズを小さくすることを言います。

単に「圧縮」とも言います。

サイトのファイルに画像の占める割合は半分以上にもなると言われています。

そのため、サイトの表示速度を上げるには、画像の最適化が不可欠ということになります。

また、表示速度速度を上げることは、ユーザーの利便性が向上し、SEO対策にもなります。

imagifyのインストール方法

WordPressに「imagify」をインストールしていきます。

「Imagify – WebP & Image Compression」を見つけたら、右上の「今すぐインストール」をクリックします。

インストールできたら、「有効化」をクリックします。

imagifyのAPIキーの取得方法

imagifyの使用には、アカウント登録とAPIキーの取得が必要です。

と言っても、下記の手順でメールアドレスの登録だけで簡単に取得できます。

imagifyの設定方法

では、imagifyの設定項目を順に説明します。

General Settings

① OPTIMIZATION LEVEL

旧版では画像の圧縮度合いを「NORMAL」「AGGRESSIVE」「ULTRA」の3段階から選びました。現行版はSmartが既定で、Losslessも選べます（2026年10月15日確認）。

参考に、約52kbの画像を3段階で圧縮してみました。

違いが分かりにくいかも知れませんが、拡大してみるとULTRAの劣化具合がよく分かると思います。

毎回、このように劣化するわけでは無く、元の画像の大きさや被写体などによって劣化具合は異なります。

② Auto-Optimize images on upload

チェックを入れると、アップロードした画像を自動で圧縮してくれます。

これは絶対やっておいたほうがいい設定ですね。

③ Backup original images

チェックを入れると元の画像を保存しておいてくれます。

元の画像があれば、圧縮のやり直しや圧縮率の変更が可能です。

圧縮率の変更は、「メディア」 > 「ライブラリ」で操作します。

④ Keep all EXIF data from your images

EXIFデータとは、カメラの機種や撮影場所など撮影時の情報です。

EXIFは画像に埋め込まれており、チェックマークを外すとEXIFは消去されます。

少しですがデータは軽くなり、個人情報の漏洩も防げます。

Optimizationの設定

① WEBP FORMAT

WebP（ウエッピー）はGoogleが開発した画像のファイル形式。データ容量を小さくできるのが特徴です。

Safariにも、Safari 14でWebP対応が導入されています。利用するブラウザとOSで表示を確認してください（2026年10月15日確認）。

WebPを使用しない方は、チェックを外してください。

② MEDIA LIBRARY

画像の横幅の上限を決めておくと、大きすぎる画像を小さくしてくれます。

横幅の上限は、テーマによって異なります。

たとえば、SANGOのメインカラムの横幅は700pxです。

なので、下のように700px以上の1000pxや1300pxの画像を貼り付けても、全て700pxで表示されます。

じゃあ上限は700pxかというと、そうでもありません。

ユーザーのパソコンモニターの大きさが違うことや拡大表示することも考えておかないといけないからです。

上の画像も拡大すると、600px、700pxの画像からぼやけてくるのが分かると思います。

個人的にはメインカラムが700pxなら、900～1000pxくらいが上限で良いと思います。

③ Files optimization

WordPressは画像をアップロードすると、サムネイルなど別サイズの画像を何種類か自動で作ります。

テーマもサムネイルを作るように設定されています。

ただし、無料版のimagifyの圧縮枠は毎月20MBで、サムネイルの圧縮も消費量に含まれます（2026年10月15日確認）。

たとえば100Kbの画像をアップロードしたとき、圧縮画像量の計算では130Kbとかになります。

そもそもサムネイルは画像サイズが小さいので、全て圧縮無しでも良いと思います。

Display Options

SHOW TOOLBAR MENU

チェックを入れると、画面上部にImagifyへのショートカットボタンを設置できます。

imagifyの使い方

上記の設定でアップロードごとに圧縮しない設定にしたとき、または、すでにアップロードした画像の圧縮するときは次の方法でおこなってください。

画像1枚ごとに圧縮

メディア > ライブラリ > 左上のアイコンを順にクリックすると、画像の一覧が圧縮状況とともに確認できます。

圧縮したい画像の右にある「Optimaize」をクリックすると、その画像だけを圧縮できます。

過去画像をまとめて圧縮

すでにWordPressにアップロードした画像も圧縮することが出来ます。

メディア > Bulk Optimizationの順にクリックします。

圧縮レベルを確認し、一番下にある「IMAGIF’EM ALL」ボタンをクリックすると別ウインドウに注意書きが表示されます。

注意書きには、画像サイズによっては時間がかかること、最適化中はページを閉じないことが書かれています。

問題なければ「START THE OPTIMIZATION」ボタンをクリックします。

その場合は、1ヶ月待つか有料版を検討してみてください。

有料版は月額のほか、単発のプランもあります。

「imagify」のよくある質問

プラグイン「imagify」を外したら、圧縮した画像はどうなりますか？

圧縮した画像はプラグインが無くても圧縮した状態のままです。なぜなら、圧縮は画像を元に戻せない不可逆圧縮（もとに戻せない圧縮）を行っているからです。ほとんどの画像最適化プラグインは不可逆圧縮なので、プラグインを外しても画像は元に戻りません。

他の画像最適化プラグインと圧縮率の違いは？

imagifyの各モードと「Compress JPEG & PNG images」「EWWW Image Optimizer」を比較してみました。画像のオリジナルサイズは145 KBです。

EWWWの圧縮率が低いのは、無料版EWWWが可逆圧縮（もとに戻せる圧縮）を行っているからです。有料版は不可逆圧縮も選べます。また、圧縮率は画像によって異なるので参考数値と捉えてください。

モード別の圧縮率