WordPressの高速化：List25のパフォーマンスを256%最適化した方法

WordPressサイトを高速化したいですか？サイトのロード時間を短縮するWordPress最適化のトリックを知りたいですか？この投稿では、WordPressを高速化する方法を、List25のサイトを最適化してパフォーマンスを向上させた方法を紹介します。

WordPressの速度はSEOにとって重要だと聞いたことがあるでしょう。高速なサイトはユーザーエンゲージメントを高め、ページビューを増やし、売上を向上させます。strangeloopのケーススタディでは、1秒の遅れが売上を7％、ページビューを11％減少させ、カスタマイザーの満足度を16％低下させることがわかりました。

では、実際にWordPressを高速化するにはどうすればいいのでしょうか？

今回は、単に高速化のヒントを紹介するのではなく、List25のサイトでどのように高速化を実現したかをケーススタディとして紹介します。

概要

List25は、創設者のSyed Balkhiが立ち上げたエンターテインメント・ブログです。サイトの購読者は150万人を超え、YouTubeチャンネルの表示回数は25億回を超える。

サイトのコンテンツはほとんどが画像と動画で、テラバイト単位の帯域幅を消費するため、全体的なスピードの最適化は、コストを抑え、ページ放棄を減らし、サイト滞在時間を改善するために非常に重要でした。

最適化を始める前、Pingdomによると、ホームページの読み込みに2.21秒かかっていました。最適化後、ページのロード時間は1.21秒までドロップしました（～45%高速化）。

この最適化により、サーバーのレスポンシブ時間を短縮し、ページ速度のパフォーマンススコアを向上させ、総リクエスト数を減らし、全体的なロード時間を改善することができました。

WordPressサイトの高速化に役立った最適化テクニックを見てみましょう。

WordPress ホスティングサービス

良いホスティングサービスを利用することは、サイトのスピードにとって非常に重要です。私たちのサイトの人気が高まるにつれ、以前のホスティングサービス会社（HostGator）が手狭になりました。

List25は何千万ものページビューがあるため、サーバーがこの規模のサイトを処理できなかったのです。HostGatorは小規模サイトには最適ですが、このような大規模サイトには向いていません。

様々なマネージドWordPressホスティングオプションを検討し、最終的にList25のホスティングにSiteGroundを使用することにしました。

サーバーのレスポンシブが改善されたことはすぐにお分かりいただけると思います。最大442msだったレスポンシブが172msになりました。これは256%の改善です。

Sitegroundは、WordPress、Joomla、Magentoのような特定のプラットフォーム用のパフォーマンスブースターをビルトインしています。サイトのプラットフォームに基づいて、彼らは特別に全体的なパフォーマンスを向上させる結果、サーバーを最適化します。

ウェブホスティングサービスを切り替えるべき時についての投稿では、7つの重要な指標について説明しています。

ホスティングサービスを変更したい場合は、ぜひSiteGroundをお試しください。WPBeginnerユーザーは、ホスティングサービスを60%割引でご利用いただけます。

キャッシュプラグイン

WordPressの高速化に関しては、キャッシュはホスティングサービスに次いで重要な要素です。

通常、訪問者がWordPressサイトにアクセスすると、サーバーはPHPリクエストをMySQLデータベースに渡し、リクエストされたページを見つけ、その場で生成し、訪問者に表示します。これは多くのリソースを消費します。キャッシュがあれば、時間とリソースを節約できます。

下図はそのプロセスを示しています。平たく言えば、キャッシングはデスクトップにショートカットを作成し、より速くファイルにアクセスできるようにするものだと考えてください。

List25サイトでは、SiteGround SuperCacherを使用しています。SiteGround SuperCacherは、カスタマイザーのために特別に作られたプラグインです。さらに、Varnish（パフォーマンスブースターの一部）を使用した高度な動的キャッシュオプションを追加しました。

もしあなたがSitegroundを利用していないなら、心配しないでください。W3 Total Cacheや WP Super Cacheのような多くの利用可能なソリューションのいずれかを使用して、WordPressサイトにキャッシュを設定することができます。

WPBeginnerでは、多くのページキャッシュ設定、データベースキャッシュ、オブジェクトキャッシュを提供するW3 Total Cacheを使用しています。

WordPressに特化したホスティングサービス会社が増えるにつれ、カスタマイザーによるキャッシュソリューションも増えていくでしょう。PagelyやWPEngineも独自のビルトインキャッシュシステムを提供しています。

CDN

コンテンツデリバリーネットワーク（CDN）は、サイトのスピードを上げるのに役立ちます。私たちはList25の初期からMaxCDNを使用しているので、この部分は変わっていません。

CDNとは何か、なぜCDNが必要なのかについては、インフォグラフィックとともに詳しく投稿しています。

CDNは、コンテンツデリバリーネットワークからすべてのCSS、Javascript、画像を提供することができます。これは、サイト訪問者の位置を決定し、訪問者に最も近いサーバーからコンテンツを提供することによって動作します。

プレミアムCDNソリューションの市場でない場合は、Cloudflareを使用することができます。

ファイルを組み合わせてHTTPリクエストを減らす

プラグインを追加すると、独自のJavaScriptやCSSファイルが追加されることがよくあります。ファイルを追加するたびに、新しいHTTPリクエストが発生します。

私たちは、リクエストを減らしロード時間を短縮するために、これらのJavaScriptとCSSファイルをそれぞれ個別ファイルにまとめました。詳しくは、WordPressプラグインがロード時間に与える影響についてをご覧ください。

現在、サイトの特定のセクションで必要ないかもしれない小さな機能をロードしていますが、このコードはCDNにキャッシュされ、その結果、ファイルへのリクエストを減らすことで、複数の小さなJSファイルをロードするよりもパフォーマンスが向上することがわかりました。

使用するプラグインは時間と共に変化するため、これは定期的に行わなければならないことです。

Imagelyスプライト

複数のソーシャルアイコンやサイトアイコンを個別画像にまとめたイメージスプライトを使用した：

特定のアイコンを表示する必要があるときはいつでも、CSSを使用していた：

1. 画像を背景画像として読み込む
2. アイコンが必要な要素の幅と高さを定義する。
3. 必要なアイコンを読み込むために、画像の背景位置を設定する。

例えば、サイドバーのソーシャルメディア・アイコンを読み込むには、次のようにします：

[cbk1］

background-position、width、heightのCSSプロパティは、出力したい画像の特定のセクションをターゲットにするのに役立ちます：

その結果、この画像ファイルに対する最初のリクエストだけが帯域幅を使用します。その結果、この画像ファイルに対する最初のリクエストだけが帯域幅を使用することになります。その後、CDNに画像をリクエストすると、キャッシュされた（通常はローカルの）バージョンが読み込まれます。

JavaScript、CSS、画像を組み合わせることで、リクエストの数を大幅に減らすことができました。

コードの最小化

コード・ミニフィケーションは、空白や改行を削除してファイル・サイズを小さくし、リクエストされたときに素早く読み込めるようにすることです。

List25では、構文ベースのスタイルシートであるSCSSを使用しています（Sass入門）。これにより、開発者のいくつかのエリアにまたがるCSSファイルを、読みやすいレイアウトで構成することができます：

CodeKitを使用して、SCSSファイルを個別CSSファイルにコンパイルします。また、CodeKitは空白や改行を削除して、ファイルができるだけ小さくなるようにしています：

その結果、CSSファイルのサイズを28%削減することができました。

画像の最適化

WordPressテーマとアップロードコンテンツの2つのエリアで画像を最適化しました。

WordPressテーマでは、CodeKitを使用して、すべての画像が可逆圧縮されるようにしました。これにより、品質を損なうことなく、ファイルサイズを可能な限り小さくすることができます。

また、ウェブ用に最適化された画像を保存することの重要性について、すべてのライターを教育しました。ウェブ用に最適化された画像を保存する方法については、こちらのガイドをご覧ください。

Javascriptを使わないソーシャル共有

List25のソーシャルシェアリングは、他のサイトと同様にとても重要です。しかし、ソーシャル共有プラグインはサイトを著しく遅くします。

これらの4つのソーシャルネットワークのスクリプトを統合しても、私たちのテストではページのロード時間に影響はありませんでしたが、モバイル端末で表示すると目に見えてサイトが遅くなりました。ソーシャル共有ボタンは、スクリプトが非同期で読み込まれるにもかかわらず、表示されるまでに数秒かかり、その結果、ボタンが表示されるまでに投稿コンテンツが移動しました。

この問題に取り組むため、私たちは（ほとんど）Javascriptを使わないソリューションに移行しました。各ソーシャルネットワークの共有ボタンはカスタムWordPressプラグインによってレンダリングされ、テーマのJavascriptはユーザーがボタンをクリックしたときにウェブブラウザーのウィンドウを開くためだけに使用されます。

しかし、投稿がすべてのソーシャルネットワークでシェアされた合計数を表示したいと考えました。これを実現するために、私たちは各ソーシャルネットワークからソーシャルシェアカウントを取得し、投稿メタテーブルにキャッシュする小さなカスタマイザーWordPressプラグインを作成しました。これらのカウントは24時間ごとに更新されるため、時間のかかるクエリーが定数実行されることはありません。

SharreのようなAPIを使用するか、カスタマイズのためにフローティングソーシャルバーを分解することができます。

PingdomのRUM（Real User Monitoring）を使って、この新しいシェアプラグインは「真の」ページのロード時間を6秒から2秒強に短縮した。また、サードパーティのスクリプトへのリクエスト数を確実に減らすことができました。

結果

サイトスピードが大幅に向上しました。ロード時間は2.2秒から1.22秒に短縮されました。

サーバーのレスポンスタイムを大幅に短縮することができました。

これにより、Googleボットによるページのダウンロード時間が短縮され、クロール率が向上しました。

サイトの読み込みが速くなったため、全体の直帰率が7%ドロップし、ホスティングサービスを変更することで、サーバーエラーを減らすことができました。

直帰率が下がったことで、サイト滞在時間も30秒以上伸びたことはご想像の通りです。

結論

ご覧のとおり、ウェブサイトの読み込みを高速化することで、訪問者のエンゲージメントを向上させることができます。今回ご紹介したテクニックは、WordPressサイトを最適化するために実施できる、基本的な改善から中級者向けの改善までを網羅しています。

この投稿がWordPressサイトの高速化にお役に立てば幸いです。また、2015年必見のWordPressプラグイン20選の投稿もご覧ください。

この投稿を気に入っていただけたなら、WordPress動画チュートリアルのYouTubeチャンネルをぜひご購読ください。Twitterや Facebookでもご覧いただけます。