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

WordPressサイトを高速化したいですか？サイトの読み込み時間を短縮するのに役立つWordPress最適化のヒントを知りたいですか？この記事では、List25サイトを最適化してパフォーマンスを向上させた方法を共有することで、WordPressを高速化する方法を説明します。

WordPressの速度がSEOにとって重要であることは、おそらく聞いたことがあるでしょう。サイトが高速であるほど、ユーザーエンゲージメント、ページビュー、売上が向上します。Strangeloopのケーススタディでは、1秒の遅延が売上の7％、ページビューの11％減、顧客満足度の16％減につながる可能性があることがわかりました。

では、具体的にWordPressを高速化するにはどうすればよいのでしょうか？

さて、単にスピードアップのヒントのリストを共有する代わりに、List25サイトの結果と、それをすべてどのように達成したかを示すための完全なケーススタディを行うことにしました。

概要

List25 は、当社の創設者である Syed Balkhi によって開始されたエンターテイメントブログです。このサイトには 150 万人以上の購読者がおり、YouTube チャンネルは 2.5 億回以上の再生回数を誇ります。

サイトのコンテンツは主に画像とビデオであり、帯域幅をテラバイト単位で消費するため、全体的な速度最適化はコストを削減し、ページ離脱を減らし、サイト滞在時間を改善するために非常に重要でした。

最適化を開始する前は、Pingdomによるとホームページの読み込みに2.21秒かかっていました。完了後、ページ読み込み時間は1.21秒に低下しました （約45%高速化）。

この最適化中に、サーバーの応答時間を短縮し、ページ速度パフォーマンススコアを改善し、総リクエスト数を削減し、全体的な読み込み時間を改善することができました。

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

WordPressホスティング

ウェブサイトの速度にとって、優れたウェブホストを持つことは非常に重要です。当サイトの人気が高まるにつれて、以前のホスティング会社（HostGator）の能力を超えてしまいました。

彼らのサーバーは、List25が数千万ものページビューを獲得しているこの規模のサイトを処理するには単純に能力不足でした。HostGatorは小規模サイトには最適ですが、この規模のものには向きません。

様々なマネージドWordPressホスティングオプションを検討しましたが、最終的にList25のホスティングにはSiteGroundを使用することにしました。このサイトにとって最高の全体的な価値を提供してくれたからです。

サーバー応答時間の改善はすぐに確認できます。最大442msから172msの応答時間になりました。これは256％の改善です。

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

ウェブホスティングを切り替えるべきタイミング（7つの重要な指標）について、7つの重要な指標について説明した記事を執筆しました。

ホストの切り替えを検討している場合は、ぜひSiteGroundを試してみてください。WPBeginnerユーザーは、ホスティングで60%オフ+無料ドメインの限定割引を受けられます。

キャッシュプラグイン

WordPressの高速化に関して言えば、キャッシュはウェブホスティングに次いで2番目に重要な要素です。

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

下の図はプロセスを強調しています。平易な言葉で言えば、キャッシュとは、ファイルに素早くアクセスするのに役立つデスクトップショートカットを作成することだと考えてください。

List25サイトでは、彼らが顧客専用に構築したプラグインであるSiteGround SuperCacherを使用しています。それに加えて、Varnish（パフォーマンスブースターの一部）を使用した高度な動的キャッシュオプションを追加しました。

Siteground を利用していない場合でも、心配ありません。W3 Total Cache や WP Super Cache のような多くのソリューションのいずれかを使用して、WordPress サイトにキャッシュを設定できます。

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

より多くのホスティング会社がWordPressに特化するにつれて、より多くのカスタムキャッシュソリューションが構築されるでしょう。PagelyやWPEngineも独自の組み込みキャッシュシステムを提供しています。

CDN

コンテンツデリバリーネットワーク（CDN）は、ウェブサイトの速度を向上させるのに役立ちます。List25の開始以来、MaxCDNを使用しており、この部分は変更されていません。

CDNとは何か、そしてなぜそれが必要なのかについて、インフォグラフィックとともに完全な記事を執筆しました。

CDNを使用すると、すべてのCSS、Javascript、および画像をコンテンツデリバリーネットワークから配信できます。これは、サイト訪問者の位置を特定し、訪問者に最も近いサーバーからコンテンツを配信することで機能します。

プレミアムCDNソリューションを検討していない場合は、Cloudflareを使用できます。

HTTPリクエストを削減するためのファイルの結合

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

これらのJavaScriptおよびCSSファイルをそれぞれ単一のファイルに結合して、リクエストを削減し、読み込み時間を短縮しました。これに関する詳細は、WordPressプラグインが読み込み時間にどのように影響するかで確認できます。

現在、特定のサイトセクションで必要ない可能性のある小さな機能をいくつかロードしていますが、このコードはCDNにキャッシュされており、ファイルのリクエスト数が少ない方が、複数の小さなJSファイルをロードするよりもパフォーマンスが良いという結果が出ています。

使用しているプラグインは時間とともに変化するため、これは定期的に行う必要があることです。

画像スプライト

複数のソーシャルアイコンとサイトアイコンを1つの画像にまとめた画像スプライトを活用しました。

特定のアイコンを表示する必要があるときは、CSSを使用して次のようにしました。

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

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

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

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

その結果、この画像ファイルに対する最初の要求のみが帯域幅を使用します。CDNから画像への後続の要求では、キャッシュされた（通常はローカルの）バージョンが読み込まれ、6つの異なるソーシャルアイコンではなく1つの画像のみを要求する必要があります。

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

コードのミニファイ

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

List25では、構文ベースのスタイルシートであるSCSS（Sass入門）を使用しています。これにより、開発のさまざまな領域にわたるCSSファイルを、読みやすいレイアウトで構造化することができます。

CodeKitを使用してSCSSファイルを単一のCSSファイルにコンパイルします。CodeKitは、ファイルを可能な限り小さくするために、空白と改行も削除します。

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

画像最適化

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

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

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

Javascriptフリーのソーシャルシェアリング

List25 のソーシャル共有は、他のどのウェブサイトにとっても同様に非常に重要です。しかし、ソーシャル共有プラグインはサイトを著しく遅くする可能性があります。

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

この問題に対処するために、(ほぼ) JavaScript を使用しないソリューションに移行しました。各ソーシャルネットワークの共有ボタンはカスタム WordPress プラグインによってレンダリングされ、テーマの JavaScript はユーザーがボタンをクリックしたときに Web ブラウザウィンドウを開くためにのみ使用されます。

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

Sharre のような API を使用するか、カスタマイズのために Floating Social Bar を解析することができます。

PingdomのRUM（リアルユーザーモニタリング）を使用したところ、この新しい共有プラグインにより、「真の」ページ読み込み時間が6秒から2秒強に短縮されました。また、サードパーティスクリプトに対して行われるリクエストの数を削減することもできました。

結果

サイトの速度が大幅に向上しました。読み込み時間は2.2秒から1.22秒になりました。

サーバーの応答時間を大幅に短縮することができました。

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

サイトの読み込みが速くなったため、全体の直帰率が7%低下し、ホストを切り替えることでサーバーエラーを減らすことができました。

低い直帰率から想像できるように、サイト滞在時間も30秒以上増加しました。

結論

ご覧のように、読み込みの速いウェブサイトは訪問者のエンゲージメントを向上させることができます。ここで説明したテクニックは、WordPressサイトを最適化するために実装できる基本的な改善と中級の改善の範囲をカバーしています。

この記事がWordPressサイトの高速化に役立ったことを願っています。また、2015年の必須WordPressプラグイン20選に関する記事もご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでもフォローできます。