日常的にインターネットを使っていると、ページの読み込みが速いウェブサイトの方が遅いウェブサイトよりも好ましく思えてきます。WordPressで作成したウェブサイトでオンラインビジネスを運営している皆さんは、ウェブサイトの高速化を目指して試行錯誤しているかもしれません。
【非開発者向け】WordPressでのウェブサイト作成方法
HubSpotのウェブサイトエキスパートが、WordPressでのウェブサイト作成を成功に導くための22のステップをまとめました。サイトの最適化やメンテナンスについても詳しく解説しています。
こちらのチェックリスト付きの無料ガイドをダウンロードして、WordPressでのウェブサイト作成を始めましょう。
確かにWordPressの高速化には、さまざまな面でのメリットが期待できます。訪問者の満足度、検索順位、何といっても収益に好影響を与えます。しかし、WordPressで高速なページを簡単に構築できずに困っている方もいらっしゃるでしょう。
実は、WordPressで作成したウェブサイト(英語)のパフォーマンスを向上させる方法は数多く存在し、中にはすぐに実行できるものもあります。ちょっとした対策を行うことで、高速化を達成できるのです。この記事では、WordPressサイトの高速化がもたらすメリットを考察し、ページ読み込み時間を最適化する25の方法をご紹介します。
新しいウェブサイトを見て回っていて、なかなかページが表示されないときほど[戻る]ボタンを押したくなることはありません。そう思うのは、私だけではないでしょう。ウェブサイトのパフォーマンスはユーザーエクスペリエンスに大きな影響を及ぼし、訪問者が貴社のオンラインビジネスの良し悪しを判断する決め手になります。
ページの読み込み速度は、訪問者の忍耐の限界を超えてはいけません。Googleによると許容されるのは2秒以内(英語)で、それ以上かかると訪問者の興味は薄れてしまいます。ページのパフォーマンスは、Googleなどの検索エンジンでランキングを左右する要素の1つでもあります。高速なウェブサイトほど、検索結果ページで上部の目立つ場所に表示されやすくなります。
しかし残念ながら、WordPressそのものは速度面で特に優れているとは言えません。主な原因は、WordPressの仕組みにあります。WordPressは誰かがウェブサイトを訪問すると、動的にページが構築されるように作られています。データベースやテーマファイルなどさまざまなソースからデータを取得し、それらを組み合わせてHTMLファイルを作成して訪問者のブラウザーへ送信するのです。このように動的にページを構築するのは、パフォーマンス面で必ずしも理想的ではありません。
しかもこの方法では、ウェブサイトが表示されていない間も、WordPressのテーマやプラグインによって貴重なサーバーリソースが消費されてしまいます。そのため、ウェブサーバー上で多くの処理を同時に実行するとリソースが使い果たされ、ページ表示速度が低下し、コンバージョンに悪影響を及ぼす可能性があります。
これから見ていく通り、WordPress高速化の手法の多くは技術的な専門知識をほとんど必要としません。一部、プラグインのインストールやコードの書き換えを伴うものもありますので、お分かりになる場合にはトライしてみてください。まずはいくつかの方法を試すだけでも改善が期待できると思います。
それでは、早速見ていきましょう。
はじめに、ウェブサイトのパフォーマンスを把握しましょう。パフォーマンスは、訪問者の地域、インターネット回線の速度、ブラウザーでウェブサイトのキャッシュが保存されているかどうかによって変動するため、全てを網羅した包括的な測定指標はありません。
同じウェブサイト内のページ間でも、コンテンツの量や種類によって読み込み速度は異なります。一般的には、ウェブサイトのホームページで測定した読み込み速度が基準となりますが、トラフィックが特に多いページが他にあれば、そちらもテストすべきです。
できるだけ具体的な結果が得られるよう、Website Graderなどの無料のパフォーマンス測定ツールを利用しましょう。ホームページのURLを貼り付けるだけで、ウェブサイトのパフォーマンスが表示されます。こうしたツールでは多くの場合、速度改善のためのアドバイスも表示されるので、それらを適用してから再テストするのもお勧めです。
パフォーマンスの測定は定期的に実施することが重要です。特に新機能を追加した後には、ページの表示速度が更新前と変わらず高水準を保てているかどうか確認しましょう。
高速なWordPressサイトの基盤となるのは、質の高いウェブホスティングです。自社サイトの帯域幅とパフォーマンスの要件に合った、ホスティングプロバイダーとプランを選択することが重要です。多くのWordPressホスティングプロバイダーは、共有ホスティング、専用ホスティング、仮想専用サーバー(VPS)ホスティング、マネージドホスティングなど、複数のWordPress用ホスティングプランを提供しています。
WordPressのホスティングプランの内容は、通常、価格に応じて異なります。最も安価な共有ホスティングのプランでは、他の複数のウェブサイトと同じサーバー上でホスティングされます。最も安価なこの共有ホスティングプランでWordPressの利用を開始し、後に必要に応じてアップグレードすることもできます。ただし、共有ホスティングでは他サイトとリソースを共有するため、同じサーバー上の別サイトでアクセスが増えると、自サイトのパフォーマンスも低下してしまいます。
コンテンツが豊富で高水準のトラフィックを常時獲得しているウェブサイトの場合は、共有プランではなく、信頼の置けるプロバイダーが提供する専用プラン、VPSプラン、マネージドプランのいずれかを選択すべきでしょう。これらのプランでは十分なサーバーリソースが割り当てられ、トラフィックが増えても読み込み時間に影響を及ぼすことなく対応できます。
WordPressの管理においては、日常的にアップデートが発生します。ウェブサイトをできる限り効率的に運営するための方法はいくつかありますが、WordPressコア、テーマ、プラグインの全てをアップデートすることもその1つです。常に最新バージョンに更新しておくことで、パフォーマンスを最適化し、安全性を保ち、不具合を修正し、機能やツールを適正に動作させることができます。
全てのWordPressウェブサイトでは、PHPというスクリプト言語が使用されています。PHPはサーバーサイド言語であり、ファイルの保存と実行はウェブサイトをホスティングしているウェブサーバー上で行われます。テーマやプラグインと同様に、PHPアップデートも随時リリースされます。これらのアップデートは効率化を促し、ページ読み込みの高速化につながります。
最新の安定版は、2015年にリリースされたPHP 7です。PHP 6に比べてパフォーマンスが大幅に向上している最新版PHP 7のご利用をお勧めします。
PHPバージョンを確認したい場合、他にも、ホスティングサイトのドキュメントをチェックする方法や、サポートに問い合わせて確認する方法があります。現在PHP 7をご利用でない場合は、ホスティングプロバイダーに依頼して、自社サイトのPHPのバージョンをアップデートしてもらいましょう。
WordPressのプラグインにおいて大切なのは、量よりも質です。それぞれのプラグインは、ウェブサイト上の小さなソフトウェアのようなものです。そのため、あまりにも多くを同時に実行していると、サイトの読み込み時間に悪影響が出る可能性があります。たとえプラグインを使用していなくても、バックグラウンドで不必要な処理が行われ、インストールされているだけでリソースを消耗してしまうかもしれません。これを機に削除しましょう。
まずは、もう使わないと分かっているプラグインを無効化します。1つ無効化するたびにウェブサイトをテストし、全てが問題なく動作していることを確認してからプラグインを削除します。次に残ったプラグインを1つずつ無効化してみて、ページ表示速度に影響を及ぼしているものを突き止めましょう。場合によっては、代替えとして別の軽量なプラグインを探すことをお勧めします。
不要なプラグインを削除して量を減らした後は、使い続けるプラグインの質が高いことを確認しましょう。WordPress用の優れたプラグインは、実行に必要なサーバーリソースを必要なときにだけ消費するように作られています。コード自体も軽量で、サーバーのストレージ容量を過剰に占有することはありません。また、WordPressコアのアップデートに合わせてこれらのプラグインも定期的に更新されます。
パフォーマンスに優れたプラグインを見分けるには、おすすめのプラグイン一覧をチェックするとよいでしょう。HubSpotも数多くの関連記事を公開しています。まずはこちらの記事(英語)からご参照ください。主に、プラグインの作りが良質であること、また適切なメンテナンスが行われていることが評価のポイントになります。新しいプラグインをインストールする前に、パフォーマンスの不備を指摘するレビューやフィードバックがないかどうか確認しましょう。プラグインを有効化したら、ウェブサイトの速度に大きな影響が出ていないか、再度パフォーマンステストを行ってください。
プラグインと同じく、ご利用中のWordPressテーマがウェブサーバーに余計な負荷をかけている可能性があります。高画質の画像やエフェクトを含むテーマは、見た目こそ魅力的とはいえ、その代償が伴います。複雑なエフェクトには大量のコードが必要であり、多くのテーマが非効率的にプログラミングされているため、ファイルサイズが肥大化し、ページのパフォーマンスも低下します。
代わりに、自社のページで必要とする機能だけを備えた、シンプルなテーマを選びましょう。エフェクトが必要な場合は、プラグインやカスタムCSSを通して後からいつでも追加できます。テーマを探すときには、おすすめのWordPressテーマをまとめたHubSpotブログの記事もご参照ください。
大きいサイズの画像を使用することも、WordPressウェブサイトの速度低下につながります。ウェブサイトのパフォーマンスを向上させるために、見た目に影響のない範囲でできる限り画像ファイルのサイズを縮小しましょう。ただし、あくまでも容量を節約することが目的で、見づらくなってしまうのは望ましくありません。
画像ファイルの縮小は、Photoshopなどの画像編集ソフトウェアを利用して行います。もしくは、SmushやEWWW Image Optimizerなどの、WordPressの画像圧縮プラグインをご利用ください。
WordPressサイトに多数の画像を挿入している場合、遅延読み込みを実装するのも一案でしょう。遅延読み込みとは、ユーザーがページを開いた時点でページ内にある全ての画像を一度に読み込むのではなく、まずはユーザーのブラウザーウィンドウに表示される画像のみを読み込み、ユーザーが画面をスクロールしてから他の画像を読み込むという方法です。
この方法ではコンテンツが次々に読み込まれるため、一度に全てを読み込む場合と比べて、速いページ表示速度である印象を与えることができます。また、画像だけでなく、埋め込み動画などのメディア素材や、テキストやコメントなどのページコンテンツにも遅延読み込みを適用できます。詳しくはおすすめの画像遅延読み込みプラグインを紹介したこちらの記事(英語)をご覧ください。
先ほど「動画」ではなく、あえて「埋め込み動画」と書いたことにお気づきでしょうか。ウェブ ホスティング サーバーに保存できるあらゆるファイル種類の中で、動画は最もリソースを消耗し、読み込む際にページの表示速度を大幅に遅れさせる恐れがあります。1件の動画をサーバーに保存するだけでも、パフォーマンスが低下しかねません。
とはいえ、動画は訪問者を惹きつける効果が大いに期待できるため、全く活用しないわけにはいかないでしょう。自社サイトのメディアライブラリーに動画を格納する代わりに、サードパーティーの動画ホスティングサービスを利用しましょう。YouTube、Vimeo、Wistiaなどのサービスがストレージの管理を行ってくれるので、あとは埋め込みコードでページに動画を配置するだけです。同じ動画が表示されるため、訪問者に違いを感じさせることなく、その裏でユーザーエクスペリエンスを大きく向上させることができます。
CSSとJavaScriptはサイトの基本要素であり、これらを使うことでシンプルなHTMLから脱却し、ワンランク上のページを作成できます。ただし、これらのファイルは、訪問者がページを開くたびにウェブサーバーからウェブブラウザーへ送信されなければなりません。従って、サイトの見た目や機能性に影響を及ぼすことなくCSSとJavaScriptのファイルを縮小することにより、ページの読み込みを高速化できるのです。
ファイルサイズの縮小には、Autoptimize(英語)などの無料のWordPressプラグインを利用できます。Autoptimizeは、CSSファイルとJavaScriptファイルをスキャンして不要なコード(空白やコメントなど)を削除し、遅延なく読み込めるようにファイルを縮小します。
JavaScriptファイルとCSSファイルの最適化の詳細については、Ahrefsのチュートリアルが大変参考になるのでご覧ください(WordPressの高速化について、他にも信頼できるアドバイスが紹介されています)。
WordPressのパフォーマンス問題は多くの場合、WordPressがサーバー側でウェブページを組み立てる方法に起因しています。
WordPressサーバー上のPHPは、キャッシュが保存されていないウェブサイト内のページが要求されると、そのたびにWordPressデータベースから全ての関連コンテンツを取得し、HTMLファイルを組み立て、それをクライアントへ送信します。この方法にはサーバー容量を節約でき、動的にウェブサイトのコンテンツを表示できるメリットがあります。しかし、あらかじめ構築されたウェブページ全体を送信する方法に比べて多くの時間とエネルギーが必要となります。
このプロセス全体を簡素化するのが、キャッシュプラグインです。キャッシュプラグインとは、サイト内の全てのHTMLページをPHPであらかじめ構築して保存しておき、訪問者の要求に応じて該当するHTMLページ全体を送信する方法です。ページを組み立てるプロセスを省略できるため、コンテンツを素早く訪問者に届けられるというわけです。
おすすめは、W3 Total Cache(英語)とWP Super Cache(英語)です。両方とも人気が高く、アップデートも頻繁に行われています。
これはあらゆるウェブサイトに適用できるアドバイスですが、読み込み時間を短縮するためには、ブラウザーが読み込むコンテンツを少なくしましょう。つまり、デザインをシンプルにするということです。
この10年ほどで、ミニマルなウェブデザインが定着してきました。これはいくつもの点で理にかなっています。その1つとして、ページがシンプルであるほど消費するリソースが少なく、ブラウザーに速く読み込まれるというメリットが挙げられます。
ミニマルなウェブページは、かつて流行したにぎやかなデザインに比べて見やすいため、ユーザーエクスペリエンスの面でも優れています。また、レスポンシブ化しやすいのも特長です。レスポンシブデザインとは、デスクトップPCからスマートフォンまで、スクリーンのサイズに応じて適切に表示されるデザインを意味します。
ホームページをはじめとする各ページのコンテンツについて少し時間をかけて吟味し、本当に必要なもの以外は取り除くようにしましょう。現在のデザインに多大な投資を行っている場合は特に、簡単ではないことかもしれません。しかし、簡素化によってパフォーマンスの飛躍的な向上が期待できるでしょう。
WordPressサイトを開設してからある程度の時間が経過している場合、使っていない古いファイルがデータベースに蓄積されているかもしれません。それは例えば、大量のコメント、使用していないテーマやプラグインのデータ残骸、古いユーザー情報、公開されなかったコンテンツ、古いメディアなどのファイルを指します。これらのファイルがサーバー上で貴重なストレージ容量を占領し、不要な負荷をかけている可能性があります。
WP Optimize(英語)やAdvanced Database Cleaner(英語)などのプラグインは、ファイルを精査して不要なものがあれば削除してくれます。サーバーから自力でファイルを削除するよりも、はるかに迅速で安全な方法です。また、WordPressのメディアライブラリーから、使用していないメディアファイルを手動で削除するのも安全な方法です。
WordPressで投稿を変更した場合、元のバージョンが削除されるのではなく、投稿は上書きされ、加えられた変更が自動的にデータベースに保存されます。これが「リビジョン」機能です。この機能は、投稿を任意の旧バージョンに戻したいときに役立ちます。
投稿のリビジョンは便利な機能ですが、データベースに蓄積されると、徐々にサイト全体のパフォーマンスに影響を及ぼす恐れがあります。WordPressのデフォルト設定では、投稿のリビジョンは無制限に保存されるようになっています。しかし、ちょっとした変更により、投稿1件あたりの保存できるリビジョン数を制限したり、リビジョンを完全に無効化したりできます。
保存できるリビジョン件数の制限を設定するには、自社サイトのwp-config.phpファイル(サイトのルートフォルダ内)を開き、一番下に次のコードを追加します。
このコードは、保存するリビジョン件数を投稿1件あたり4件までに制限するものです。数値は自由に変更でき、0に設定すればリビジョンをオフにできます。ただし、これ以外の方法で投稿の変更履歴を管理していない限り、この機能をオンにしておくことをお勧めします。
もちろんリダイレクトは重要です。投稿を削除したり移動したり、ウェブサイトの構造自体を変える必要に迫られることもあります。そのような場合に404エラーを回避するには、301リダイレクトを設定するのが最善でしょう。
とはいえ、WordPressサイト上のリダイレクト数は少なく抑えるべきです。リダイレクトのたびに読み込み時間が長くなるので、リダイレクト先からさらにリダイレクトされるような状況は特に望ましくありません。リダイレクトは回避できない場合が多いとはいえ、初期の段階でサイト構造を最適化することで最低限に抑え、複雑な連続リダイレクトを回避するように心がけてください。
ピンバックとトラックバックは両方とも、自社サイト上のコンテンツに外部ウェブサイトへのリンクを張った際に、リンク先の相手に通知するWordPressの機能です。
例えば、貴社のブログ記事にhubspot.comへのリンクを張る場合、リンクを張ったことをhubspot.comの担当者に通知するようにWordPressを設定できます。逆に、誰かが貴社サイトへのリンクを張った場合にも、貴社の担当者へ通知が送信されるように設定できます。
ピンバックとトラックバックは、マーケティングに役立ちます。リンクを張ったことを通知すれば、相手サイトのコンテンツを高く評価していると知らせることができ、お返しに被リンク(バックリンク)を張ってもらえる可能性が生まれます。
しかし、WordPressのエキスパートの多くは、デメリットがメリットを上回ると言います。具体的なデメリットはサーバーリソースを無駄に消費することや、スパムやDDoS攻撃を受けやすくなることです。被リンクを追跡したい場合は外部の分析ツールを利用できます。また、被リンクを増やす効果的な方法は他にも多数あります。
従って、ピンバックやトラックバックは無効化することをお勧めします。手順としては、管理画面の[設定]>[ディスカッション]を開き、上から2番目までのオプション([投稿中からリンクしたすべてのブログへの通知を試みる]と[他のブログからのリンク通知を許可する(ピンバックとトラックバック)])をオフにします。
ページ表示速度が遅くなる、ありがちな原因でもう1つ挙げておきたいのが、物理的な距離です。多くの場合、ウェブサーバーの所在地から離れた場所のデバイスで、ウェブページが読み込まれます。ユーザーが海外や遠隔地にいる場合は、特に影響が大きくなります。この課題の解消に役立つのが、コンテンツ配信ネットワーク(CDN)です。
CDNは、世界各地の複数のウェブサーバーが接続された集合体です。自社のウェブサイトのJavaScript、CSS、画像ファイルなどのコピーが各サーバーに保存されます。ユーザーがページを要求すると、最寄りのサーバーからファイルが送信されます。CDNにより、ウェブサイトを全世界に配信できるようになり、訪問者が近くにいても遠くにいても、読み込み速度を一定に保つことが可能です。
WordPressサイト上のCDNの設定と管理は簡単です。ホスティングプロバイダーによってはCDNサービスがプランに含まれている場合や、有料で連携できる場合もあります。コンテンツ配信は、全てCDNに任せましょう。よく利用されるCDNには、CloudflareやStackPath(英語)などがあります。
GZIPは、インターネットでのファイル送信に広く使用されている可逆圧縮プログラムです。GZIPではファイルサイズを最大70%削減できます。また、他の圧縮方法に比べて、ファイル圧縮にかかる時間がかなり短く、少ない処理能力で実行できます。GZIP圧縮されたウェブサイトでは、圧縮されていないファイルに比べてユーザーへの送信に必要な帯域幅がはるかに少なく、送信速度は速まります。
サイトのGZIP圧縮を可能にするプラグインは多数あります。速度最適化プラグインに含まれていることも多く、その場合はチェックボックスをオンにするだけで簡単にGZIPが使えます。多くのウェブサイトがApacheサーバーでホスティングされていますが、その場合、.htaccessファイルに以下のコードをマニュアルで追加するだけでGZIP圧縮を有効にできます。
外部スクリプトとは、自社サイトに使用しているコードファイルのうち、別のウェブサーバーに保存されているファイルのことです。サードパーティーのアナリティクスツールやプラグイン(Google AnalyticsやCrazy Eggなど)、広告ネットワーク(Google AdSense)、SNSの埋め込み(ツイートボタン)などがよく見られます。また、WordPressテーマの多くは、JavaScriptファイルやCSSファイル、あるいはその他のメディアを読み込むために外部スクリプトを使用しています。
外部スクリプトが常に問題というわけではありません。自社サイトが必要とするツールを使うために不可欠なスクリプトもいくつかあるでしょう。今後外部スクリプトを使用したプラグインやツールを追加導入する場合は、どの程度のデメリットがあるのか、またパフォーマンスに悪影響が出たとしても導入に見合う価値があるかどうかを、必ず検討してください。
このページで紹介しているアドバイスの多くは、自社のウェブサイトで行えるWordPressのパフォーマンスの最適化です。しかし直リンクは、自社の努力だけで完全に防げるものではありません。
直リンクとは、あるウェブサイトでホスティングされているリソースを別のウェブサイトで使用することです。自社サイト内のリソースが他のサイトから直リンクされた場合、そのリソースが相手サイトで参照されるたびに、自社のサーバーに費用やパフォーマンスの負担がかかります。
例えば、他のウェブサイトで見栄えの良いインフォグラフィックを見つけて、それを自社のブログ記事に載せたくなったとします。そのような場合、その画像をダウンロードして自社のサーバーにアップロードし、出典元を明記して自社サイトに表示させるのが適切な方法です。一方の直リンクでは、インフォグラフィックを表示しているサイトのURLを自社サイトに埋め込み、ユーザーが画像を表示するたびに参照されたサーバー側から読み込ませるようにします。これではマナー違反です。
バックグラウンドタスクの実行スケジュールを事前に設定しておけば、日中の作業時間を大量に費やすことなくウェブサイトを健全な状態に保つことができます。バックアップ、アップデート、セキュリティースキャンなどを自動化して、定期的に実行できます。
バックグラウンドタスクの実行スケジュールを決める際には、トラフィックの少ない時期や時間帯を選びましょう。そうすることで、増加する訪問者の対応で忙しいサーバーに余計な負荷をかけることを防ぎます。お使いのトラフィック分析ツールで、タスクの実行に適したタイミングを調べましょう。
それでもパフォーマンスに影響がありそうな場合は、バックグラウンドタスクの実行頻度を調整することもご検討ください。例えば、毎日実行しているバックアップを、隔日や週1回に変更するのもよいかもしれません。
ここまでのアドバイスを実践したのに、まだ一部のページの読み込み時間を短縮できない場合、そのページのコンテンツが多すぎる可能性があります。1件のページに画像や動的情報が多く含まれていると処理に長い時間がかかるため、複数ページに分割することをご検討ください。通常は分割してもユーザーエクスペリエンスが損なわれることはほとんどありません。
長いコンテンツを個別のページに分割する代わりに、ページネーション(ページ送り)を使用できます。ページネーションとは、例えば章ごとに1ページ目、2ページ目と分ける方法です。処理を小分けにできるためパフォーマンスが高まるとともに、読みやすさも向上します。
この方法は、メディアが多く含まれていて、目標の読み込み速度に達していない長めのコンテンツに適しています。それ以外の場合は、クリックによるページ間移動を最小限に収めるため、コンテンツを1ページに収まる長さに調整することをお勧めします。章ごとにページを設ける場合は、読みやすさを考慮して、各章へのリンクを載せた目次を追加しましょう。
厳密にはウェブサイトのコンテンツとは言えないかもしれませんが、WordPressではメインコンテンツと同様、コメント欄もページに読み込む必要があります。コメントが頻繁に寄せられるウェブサイトでは、1ページごとのコメント件数を制限し複数ページに分割することで、ページごとの読み込み時間を短縮できます。コメント欄を別のページに分ければ、メインコンテンツのページで読み込む量が少なくなり、訪問者が読みたい場合だけコメント欄を読み込むようにできます。
WordPressでは簡単にコメント欄のページネーションを行えます。[設定]>[ディスカッション]を開き、[1ページあたり○○件のコメントを含む複数ページに分割し、…]のチェックボックスをオンにし、1ページあたりのコメント数を設定します(デフォルトは50件)。
また、同じ画面で[新しい投稿へのコメントを許可]のチェックボックスをオフにすれば、コメントを無効にできます。
WordPressサイトの運営にはさまざまな作業が必要で、表示速度の最適化もその1つです。今回ご紹介してきたように、読み込み時間を改善して質の高いユーザーエクスペリエンスを提供するために実践できる方法はいくつもあります。訪問者の時間を大幅に節約できることを考えれば、ウェブサイトの高速化に多少の時間を割くだけの価値はあるはずです。
編集メモ:この記事は、2020年10月に投稿した内容を包括性の観点から加筆・訂正したものです。
HubSpotのWordPressプラグインを無料でダウンロードできますので、ぜひご利用ください。