「Xserver」と「Cocoon」で快適なPageSpeed実現

「快適なPageSpeedのWebサイトを構築する方法」は2回シリーズで、この記事はその第2弾です。

快適なPageSpeedのWebサイトを構築する方法①
快適なPageSpeedのWebサイトを構築する方法②

第1回の記事では、PageSpeedが快適なWebサイトを構築のに、Webコンテンツ管理システム「WordPress」と「レンタル・サーバー」を使う理由を解説して、レンタル・サーバーを選ぶ際にレンタル・サーバーのハードウェアとソフトウェアの仕様で比較・検討すべきポイントをご紹介しました。

第２回のこの記事では、まず、システム構成の具体例を示して、次に、第1回の記事内容よりさらに一歩踏み込んで「レンタル・サーバー」の「Xserver」と「WordPress」用テーマ「Cocoon」を利用する理由をご説明します。

目次 (Table of Contents)

PageSpeedが良好なサイトのシステム構成
1. PageSpeedが良好なWebサイトのシステム構成の具体例
2. 「WordPress」プラグイン選択の方針（ご参考）
PageSpeedに影響を及ぼす要因の分類
レンタル・サーバーを選ぶ時の注意点
1. PageSpeedへの影響するサーバーのハードウェア
2. PageSpeedへの影響するサーバーのソフトウェア
WordPress用「テーマ」を選ぶ時の注意点
Webサイトの主要システム構成要素の選択理由
1. 「レンタル・サーバー」の「Xserver」の選択理由
2. 「WordPress」用テーマ「Cocoon」の選択理由
快適なページ表示速度を実現・維持するために
おわりに

PageSpeedが良好なサイトのシステム構成

「Google Search Console」の「ウェブに関する主な指標」テストに合格しているPageSpeedが良好なWebサイトのシステム例として、レンタルサーバーの「Xserver」と「WordPress」用の無料テーマ「Cocoon」を使ったサイトの構成をご紹介します。

PageSpeedが良好なWebサイトのシステム構成の具体例

下記は、Googleの「ウェブに関する主な指標」テストに合格（2020年9月現在）しているPageSpeedが良好なWebサイトのシステム構成例です。

当サイトはレンタル・サーバーの「Xserver」、Webコンテンツ管理システムの「WordPress」、「WordPress」用の無料テーマ「Cocoon」を使用しています。

また、「Xserver」で利用可能なプロセッサやメモリをはじめとするハードウェアとプログラミング言語「PHP」とデータベース管理システム「MySQL」は、すべて最新バージョンに更新しています。

下記のリストにある「WordPress」用プラグインを最新バージョンを利用することで、機能、セキュリティ、利便性を向上させています。

PageSpeedが良好なWebサイトのシステム構成例

レンタル・サーバー：「Xserver」
- PHP：バージョン7.4（Xserverでの最新バージョンを使用）
- MySQL：バージョン5.7 (または、Maria DB 10.5)
「WordPress」：バージョン5.9（最新バージョンを使用）
WordPress テーマ：「Cocoon」（最新バージョンを使用）
使用しているWordPress用の主要プラグイン：
- 画像最適化対応
  - 「EWWW Image Optimizer」（画像サイズの最適化）
  - 「Regenerate Thumbnails」（画像サムネイルの再生成）
- 検索エンジン最適化(SEO)対応
  - 「Google XML Sitemaps」（検索エンジン向けサイトマップ通知）
  - 「WordPress Ping Optimizer」（記事の新規・更新の通知）
  - 「WebSub/PubSubHubbub」（検索エンジン向けの記事の通知）
  - 「Asset CleanUp」（ページ表示速度の向上）
- 多言語対応
  - 「WP Multibyte Patch」（「WordPress」の日本語表記対応）
  - 「Polylang」（多言語化）
  - 「Hrelang Tags Lite」（言語タグ作成）
  - 「GDPR Cookie Consent」（EU一般データ保護規則対応）
- セキュリティ向上
  - 「Invisible reCaptcha」（スパム防止対策）
  - 「SiteGuard WP Plugin」（不正ログイン防止対策）
  - 「Edit Author Slug」（ユーザー名漏洩防止対策）
- Webサイト維持管理の向上
  - 「Broken Link Checker」（リンク切れチェック）
  - 「Contact Form7」 (お問い合わせフォーム）
  - 「UpDraft Plus」 (バックアップ)
- Webサイトの利便性の向上
  - 「Advanced Editor Tools」（記事入力ユーティリティ）
    - Ver. 5.5.1で「TinyMCE Advanced」から名称が変更されました。
  - 「PS Auto Sitemap」（ウェブ訪問者用サイトマップの作成）

「WordPress」プラグイン選択の方針（ご参考）

サイトの表示スピードのことを考えると、使用するプラグイン数を減らして、機能を最小限にとどめるのが有利です。

では、なぜ、15以上の「WordPress」のプラグインが使用されているのでしょうか？

それは、当サイトが次のような方針に基づいて、最低限必要な機能と考えているからです。

Webサイト訪問者が快適に記事や写真を楽しみながら閲覧できる
- Web訪問者にとってPageSpeedが快適で当サイトの閲覧が気持ちがいい
- パソコンだけでなくスマホなどのモバイル端末で、異なるディスプレイ解像度やサイズに対応（レスポンシブ）
無料のオープン・ソースを使って、サイト構築・運用・維持ににできるだけコストをかけない。
最新バージョンを積極的に活用することで、オープン・ソースのセキュリティの脆弱性に対処する
多言語対応（日本語だけでなく英語にも対応）
Google Adsenseをはじめとするネット・ビジネスに対応
- 検索エンジン最適化対策を必要に応じて実施

それぞれのWebサイト・オーナーや管理者の意向や方針によって、「WordPress」のプラグインの必要性は異なります。このリストをあなたのWebサイトのシステム構成のご参考にご利用ください。

PageSpeedに影響を及ぼす要因の分類

PageSpeed改善に影響を及ぼす要因を、改善に必要な人的な労力の負荷（ワークロード）によって、次のように2つに分類してみました。

改善のためのワークロードが大きい要因（例）

ブログ・サービスからコンテンツ管理システム「WordPress」を使ったWebサイトに移行
レンタル・サーバー会社の変更
基幹ソフトウェアのバージョンアップによる高速化
- WordPressのバージョン・アップによる高速化
- プログラミング言語「PHP」のバージョン・アップによる高速化
- データベース・システム「MySQL」または「MariaDB」のバージョン・アップによる高速化
WordPress用「テーマ」の選定

改善のためのワークロードが小さい要因（例）

「WordPress」プラグインの追加・削除
「WordPress」、「テーマ」、「プラグイン」の設定変更
- 記事のフォーマット変更
「プラグイン」の追加/削除

ページ表示スピード改善のために人的な労力の負荷が大きい要因は、後から変更するのが大変なので重要度が高く、この要因に着目して解説していきます。

レンタル・サーバーを選ぶ時の注意点

レンタル・サーバーの利用は、一定期間の契約とコストがかかわってきます。したがって、コストに見合う仕様やサービスを市場から比較検討して選ばなければなりません。だから、特に仕様に関連してPageSpeedへの影響を及ぼすハードウェアとソフトウェアに着目しています。

レンタル・サーバーと契約する前に、第１回記事で解説しているレンタル・サーバー選択のための仕様比較を参考に、サーバー仕様の注目ポイントなどを事前にチェックして、できる限り「お試し期間」等を利用して動作の確認する事をおススメします。

以下に、チェック・ポイントをリストアップしましたので、レンタル・サーバー選択の参考にご利用ください。

PageSpeedへの影響するサーバーのハードウェア

サーバーのハードウェアでPageSpeedに影響を及ぼすのは主にプロセッサー、メモリ、通信周辺機器です。次の技術情報をサーバー仕様で数社から収集・比較して検討しましょう。

プロセッサ
- プロセッサの世代
- コア数/スレッド数
- クロック周波数
- キャッシュ（Cache）メモリ
  - メモリ容量
RAMメモリ
- メモリ世代
- 容量
- アクセス速度
ストレージ・メモリ
- メモリ媒体のタイプ
  - 例）
    - SSD: Solid State Drive: 半導体メモリ
    - HDD: Hard Disk Drive: 磁気メモリ
- 接続インターフェース規格およびその世代
  - 例）
    - NVMe: Non-Volatile Memory Express (PCI Expressベース)
    - AHCI: Advanced Host Controller Interface (SATAベース)
- 独立ディスクの冗長並列化の方法(RAID: Redundant Array of Independent Disks)
  - 例）RAID10
ネットワーク・コントローラー

PageSpeedへの影響するサーバーのソフトウェア

サーバーのソフトウェアでPageSpeedに影響を及ぼすのは、「WordPress」が利用するプログラミング言語の「PHP」、データベース管理システムの「MySQL」または「MariaDB」のバージョンで、これらはレンタル・サーバー会社の事情によって差異があります。

また、「WordPress」の各バージョンで、「PHP」、「MySQL」/「MariaDB」の推奨環境があります。

一般的に、新しいバージョンほどページ表示速度が速くなるので、「WordPress」、「PHP」、「MySQL」/「MariaDB」のそれぞれの互換性を確認しながらアップデートする必要があります。

WordPress	PHP	MySQL	MariaDB
Version	Version	Version	Version
5.9 ～	> 7.4	> 5.7	> 10.2
5.5 ～ 5.8	> 7.4	> 5.6	> 10.1
5.3 ～ 5.4	> 7.3	> 5.6	> 10.1
5.2	> 7.3	> 5.6	> 10.1
5.0 ～ 5.1	> 7.3	> 5.6	> 10.0
4.9.5 ～ 4.9.12	> 7.2	> 5.6	> 10.0

WordPressバージョンごとの推奨環境

レンタル・サーバー会社は、旧バージョンの「WordPress」利用顧客に対応するため、古いバージョンの「PHP」や「MySQL」/「MariaDB」と互換性を確認しながら、新しいバージョンを導入しているので、最新のバージョンが利用できるとは限りません。また、時間と共に、サポートするバージョンは変わっていっています。

WordPress用「テーマ」を選ぶ時の注意点

「WordPress」用の「テーマ」を選ぶ時に機能、コスト、性能、保守管理のバランスを考慮します。

WordPress用「テーマ」の機能

WordPress用「テーマ」とは、「WordPress」を使ったWebサイトでブログ記事のテンプレートや表示のフォーマットなどの基本機能を提供するパッケージです。

WordPress用「テーマ」でおススメの機能は次のようなものです。

検索エンジン最適化のための機能
- ページ高速化機能
  - 端末表示していない画像を後から読み込む画像遅延読み込み(Lazy Load)
  - Googelが推進するモバイルWebサイトの閲覧を高速化するデータ形式のAMP(Accelerated Mobile Pages)のサポート
  - プログラムのデータ圧縮
  - よく使用するデータをメモリに保持するキャッシュ機能
- Web訪問者や検索エンジン登録がカテゴリやタグなどで記事構成を容易に読み取れる構造（パンくずリスト）
レスポンシブ・デザインに対応
- 1つのサイトのデータで、パソコン、タブレット、スマホといったインターネット端末のデバイスサイズやディスプレイ解像度に依存ぜず、見えやすい表示に自動で切り替わる設計の事。
保守管理が容易にできるように「親テーマ」「子テーマ」の2段構成になっている

WordPress用「テーマ」にかかるコスト

WordPress用「テーマ」が「有料」、または、「無料」は大きな選択の要因です。

一般的に、有料の「テーマ」は、機能が多く、サポートの責任が明確になっています。中には、一度購入すると、その「テーマ」のアップデートや複数の所有サイトへの適応が無料という「テーマ」も存在します。

はじめて「WordPress」や「テーマ」をご使用になる時は、テーマの良い悪いの判断基準がわからず、価値がわからないものに対価を支払うのは難しいと思うので、「無料」テーマから始める事をおススメします。

「WordPress」テーマの性能

また、「WordPress」のプラグインやアフィリエイト広告などをWebサイトに入れたりすると、一般的に機能が増えて表示のための負荷が重くなり、PageSpeed性能が低下していきます。

そのためにも、プラグインを入れる必要が少なくて済むように「テーマ」自体の機能が充実していて、なおかつ、「テーマ」単独でもPageSpeedが速いものがおススメです。

また、「テーマ」自身のPageSpeedが遅いと、それ以上のパフォーマンスは望めません。そこで、使用を検討している「テーマ」のデモ・サイトなど実在するサイトのページ（URL)をGoogleの無料Webツールである「PageSpeed Insight」で試してみて、どれぐらいのパフォーマンスが得られるのか最新の状況を確認してみましょう。

「WordPress」用の「テーマ」の保守管理

「WordPress」自体が数年に一度程度、機能や反応速度の向上のためメジャー・アップデートされます。それに伴い、ソフトウェアのアプリケーション・インターフェースが変更される場合があります。そのため、「テーマ」のアップデートも必要となります。

有料の「テーマ」の場合、一回の支払いで将来のアップデートやサポートを保証しているものもあります。

一般的に「テーマ」を更新すると、過去に「テーマ」に入れた機能の追加・変更点は初期化され、無効になってしまいます。

この問題に対応できるように「テーマ」の中には、「親テーマ」、「子テーマ」の2段構成になっているのがあります。これは、「子テーマ」に機能の追加・変更などのカスタマイズしても、「親テーマ」のみの更新で基本機能のアップグレードができ、カスタマイズ内容が初期化を防止するものです。

このように、「テーマ」のアップデートや保守管理を考えると、「親テーマ」、「子テーマ」の2段構成になっているものをおススメします。

Webサイトの主要システム構成要素の選択理由

「レンタル・サーバー」の「Xserver」の選択理由

レンタル・サーバー「Xserver」を使用している主な理由は、次の通りです。

「Xserver」のハードウェアとソフトウェアをアップデートする事で、市場競争力のあるPage Speedを実現できる。
- ハードウェアのアップグレードの具体例は次の記事をご覧ください。
  - 「エックスサーバー」最新ハードウェアにアップグレードする方法
「WordPress」と「Xserver」の組み合わせの技術情報がネット上で豊富
- ネット・ビジネスで参考になる記事や動画が多く、自己対応が容易。
  - 「WordPress」簡単インストール/簡単移行
運用コストの節約
- 独自ドメイン永久無料などのキャンペーンの利用（Xserverを使う限り、独自ドメインの使用継続が永久無料）
- 通信を暗号化してセキュリティを向上させるSSL化でhttpsに無料で対応可能

「WordPress」用テーマ「Cocoon」の選択理由

「Cocoon」を使用している主な理由は、次の通りです。

「WordPress」用の無料テーマ（アップデートも無料）
アイキャッチ画像など画像を多用できる構成にもかかわらず、Googleの「PageSpeed Insights」でのパフォーマンス・スコアをCocoonのWebページ上で公開しており、快適なPageSpeedが実現可能。
1つのサイトのデータで、パソコン、タブレット、スマホといったインターネット端末のデバイスサイズやディスプレイ解像度に依存ぜず、見えやすい表示に自動で切り替わる設計（レスポンシブ・デザイン）に対応
検索エンジン最適化などネット・ビジネスに必要な機能が豊富
「Cocoon 」使用者の問い合わせなどに対応して、テーマ開発者が機能向上やアップデートを頻繁に行っており、その内容や状況をCocoonのWebページで公開して「Cocoon」使用者本位のサポートしている。
- 「親テーマ」「子テーマ」の2段構成になっており、アップデートが容易

快適なページ表示速度を実現・維持するために

快適なページ表示速度を実現維持するためには、バックアップを取って、問題が発生した場合に問題発生前の状態に戻せるようにバックアップを取っておき、最新バージョンをせっきゅおく的に使用することです。
プログラムのカスタマイズは最小限にとどめ、アップデート対応が容易にできるように心がけましょう。

おわりに

2回シリーズの記事「快適なPageSpeedのWebサイトを構築する方法」で、レンタル・サーバーとWebコンテンツ管理システムの「WordPress」を利用する理由、「Xserver」と「WordPress」用の無料テーマ「Cocoon」、および、サイト管理者の方針に基づいて必要最小限のプラグインを使用することで、Googleの「ウェブに関する主な指標」テストに合格（第1回の記事で合格ページ例を表示）するほどPageSpeedが良好なWebサイトを実現できることを解説しました。

快適なPageSpeedを持ったあなたのWebサイトを構築するのに参考になり、この記事がお役に立てれば幸いです。

PageSpeedを良好に保ち、市場競争力を維持するのは継続的な努力が必要な業務です。改善点を検討して、より良いWeb環境をサイト訪問者に提供できるように、今後も共に心がけていきましょう。

「Google Search Console」「ウェブに関する主な指標」で、ページ表示速度の問題を指摘されてお困りの方は次の記事をご覧ください。