訪問者はすばやくスムーズな閲覧環境を期待しているため、サイトの速度は最も重要な要素のひとつです。このガイドでは、サイトの速度に関わる要素や測定に使用できるツール、それらのツールから得られる情報、実際のサイトの速度を向上させる例について説明します。
このガイド内
サイトの速度を低下させる最も一般的な要因として、次のものが挙げられます。
- 高解像度の画像や最適化されていない画像。
- インストールされているプラグインの数や品質。
- 遅いサードパーティのテーマ。
- 1ページのコンテンツ量 (特に画像やメディアファイル)。
- サイト訪問者の端末のインターネット接続速度。
WordPress.com では、サイトの速度の技術的な側面を管理することで、ユーザーに負担をかけないようにしています。複数のキャッシュレイヤーを備え、バックエンドを最適化したシステムを構築することで、世界中でサイトを高速で読み込めるようにし、2021年の最速のホスティングサービスに選出されました。また、ホスティングサービス環境の最適化にとどまらず、次のことを実践しています。
- 最適化されたサイトテーマを提供する。
- コンテンツ配信ネットワーク (CDN) を使用し、訪問者がどこからでもサイトのコンテンツにすばやくアクセスできるようにする。
- サイトの速度を最適化するため、以下で説明するようなツールやリソースを提供する。
サイトの速度に関わる主な要因は、サードパーティのプラグインやテーマです。これは無料サイト、パーソナルサイト、プレミアムサイトにはインストールできないため、これらのサイトで速度の問題が発生することはあまりありません。
プラグイン以外では、サイトの速度を低下させる最大の要因は、サイトやブログの1ページに含まれる画像のサイズと数です。最高品質の画像を訪問者と共有することは魅力的かもしれませんが、そのために画像のファイルサイズが必要以上に大きくなってしまうことがよくあります。
画像の最適化のサポートガイドを参照して、画像が Web 閲覧向けに最適化されていることを確認してください。
サイトの読み込みができるだけ速くなるよう努力するのが理想的ではありますが、訪問者にサービスを提供するために必要な機能と、達成可能な実際の速度とのバランスを取ることが必要です。
平均して、サイトが Web 全体で読み込まれるまでに最大で4～5秒かかります。ただし、サイト速度はいくつかの要因によって異なります。最も一般的な要因は次のとおりです。
プラグインの数が多すぎるサイトは、プラグインの数が少ないサイトよりも読み込みに時間を要することがあります。これは訪問者に表示するページをレンダリングするために、サイトがより多くのコードを処理していることが原因です。
プラグイン対応のプランをご利用の場合に、サイトの最適化に役立つオプションをいくつか追加しました。
- ページ最適化プラグイン: このプラグインには CSS と JavaScript の連結、重要でないスクリプトの遅延実行に役立つオプションが含まれています。ブラウザーの WordPress.com サイトの読み込み時間を短縮したい場合に、このオプションが役に立つことがあります。
- Jetpack の CDN: Jetpack にはサーバーの負荷を分散し、帯域を節約する上で役立つコンテンツ配信ネットワーク (CDN) の機能が組み込まれています。この設定は「設定」→「パフォーマンス」→ 「パフォーマンスおよびスピード」で確認できます。
一部のプラグインは必要かもしれませんが、サイトのパフォーマンスに影響するのであれば、サイトにとって「必要なもの」を再評価するよい機会になります。
大まかなルールとして、使用するプラグインは最小限にとどめましょう。WordPress.com のサイトでは、次のカテゴリーに属するプラグインは必要ありません。
- セキュリティと SSL
- バックアップ
- キャッシュ処理
- サイトの速度と最適化
- データベース管理
- ステージング
- スパム対策
- サイトの初期化
これらの機能はすべて WordPress.com のプランによって処理されます。これらのプラグインをインストールすると、サイトに組み込まれたパフォーマンス機能の妨げになる可能性があります。
こちらの互換性のないプラグインの一覧を参照してください。
YouTube、Vimeo、Soundcloud、TripAdvisor、Google AdSense、Twitter、Facebook などのサービスから動画やウィジェットをストリーミングすることも、読み込み時間に影響する可能性があります。これは、サイトやコンテンツを構成する各部分が外部ソースから取り込まれるため、サイトの読み込みが完了する前に、該当するサービスの読み込みが終わるのを待つ必要があるためです。
ここでの待機は通常わずかな時間ですが、素材が大量に埋め込まれたページでは遅延が特に目立ちます。
大きい画像ファイルの読み込みは時間を要するため、アップロード前に最適化されていない画像は、サイトの読み込み速度に悪影響を及ぼす可能性があります。
しかし、画像をアップロードする前に最適化することは可能です。このガイドでは、画像の読み込み時間を可能な限り短縮するための詳しい情報を説明しています。
選択したテーマによってサイトのレイアウトやデザインが制御されます。WordPress.com のプラグイン対応プランでは、WordPress.com テーマのショーケースにある高速なテーマだけでなく、任意の作成者による任意のテーマをアップロードできます。そのため、テーマの選択肢は数多く存在しますが、他のテーマは速度を考慮せずに開発されている場合があります。
テーマを選択すると、各テーマのレビュー、有効インストール数、最終更新日時、互換性を確認できます。テーマを選択する際はこれらの情報を考慮することが重要です。
外観が優れているものの必要のない機能が多く、サイトの速度に多大な悪影響を及ぼすテーマもあります。そのため、テーマを選択する時は、不要なオプションがなく必要な機能のみを備えたテーマを慎重に検討することをおすすめします。
従事している業界も、サイトのパフォーマンスと読み込みに影響する可能性があります。従来、自動車、旅行、小売、エンターテイメント業界のサイトは読み込みに時間を要する傾向にありますが、これは主にサイトのサイズが大きく、読み込むリソース (メディア、スタイル、スクリプト) が多いことが原因です。
Web 上で見つかるサイト速度の測定ツールはさまざまですが、例として次のようなツールがあります。
自動化されたサイトパフォーマンスツールでは、一般的な推奨事項が提示されます。これはサイトの速度を向上させるためのベストプラクティスや機会の特定にも役立ちます。
しかし、多くの場合、WordPress.com など特定のソフトウェアプラットフォームや、サイトの外観と動作を良好に保つために必要なツールについては考慮されていません。
たとえば、Google PageSpeed Insights ではレンダリングをブロックする JavaScript と CSS の削除を推奨されることが多くあります。しかし、この対応では速度を上げる効果は小さく、サイトの適切な表示や機能が妨げられます。
たとえば、Google 自体のサイトにも、自社の PageSpeed Insights ツールを使用していてもスコアが非常に低いものもあります。
https://developers.google.com/speed/pagespeed/insights/?url=fonts.google.com
これはサイトが「低品質」であるということではありません。ただ、自動化されたパフォーマンステストツールの厳格なチェック基準と一致していないということです。
GTmetrix でサイトの速度を測定するには、https://gtmetrix.com/ でサイトの URL をボックスに入力して「Analyze」をクリックします。
システムで解析が終了すると、サイトの PageSpeed と YSlow のスコアが次のように表示されます。
「Page Details」欄の「Fully loaded time」 には、サイトを完全に読み込むために必要な秒数が表示されます。たとえば、サイトの読み込みが1～3秒で完了すれば高速とみなすことができます。
GTmetrix で使用されている PageSpeed と YSlow のツールの詳細については、公式ドキュメントを確認してください。
💡
組み込み型のカスタムプラグインとデフォルトテーマが有効化された WordPress.com のベースラインサイトは、約1秒で読み込みが完了します。これは2021年に最速の WordPress ホスティングサービスと評価されました。
「Total Page Size」は、すべての画像、動画、スクリプト、その他のファイルを含めたページの合計サイズを示します。ページサイズが小さいほど、サイトの読み込みが速くなります。
ページの「Requests」の数についても同様です。リクエストの数は、サイトを完全に表示するために読み込むさまざまなファイルの数を表します。数値が低いほど、読み込むファイルが少なく、速度が向上します。
⚠️
多くの場合、大半の HTTP ページリクエストはさまざまなプラグインから発行されます。それぞれのプラグインにより、サイトに若干の負荷がかかります。使用していないプラグインは必ず削除しましょう。
上述の指標はすべてサイトの概要を表示しますが、読み込みに時間がかかっている要因や、最適化できるポイントを判断するために不可欠な詳細情報は表示されません。それを表示するには、GTmetrix で「Waterfall」タブをクリックします。
「Waterfall」タブはファイルの読み込み元、ファイルのサイズ、読み込みに必要な時間を確認する上で役立ちます。たとえば、すべての列の見出しは、クリックすると読み込んだアイテムを時間やサイズごとに並べ替えることができます。
このタブは、サイトの速度を低下させる原因を突き止めるために活用できます。サイトを遅くしているカスタムプラグインを経由するファイルが複数あり、厳密に必要ではない場合は、プラグインの無効化を検討してください。その上で速度テストを再度実行し、サイトのパフォーマンスにどのような影響があったかを確認します。
この短い概要が、サイトをよりよい状態に最適化する上でのアドバイスやヒント、手段となることを願っています。ご不明な点はお気軽にお問い合わせください。
日本語サポート 