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を使用していた:
- 画像を背景画像として読み込む
- アイコンが必要な要素の幅と高さを定義する。
- 必要なアイコンを読み込むために、画像の背景位置を設定する。
例えば、サイドバーのソーシャルメディア・アイコンを読み込むには、次のようにします:
[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でもご覧いただけます。
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Peter says
I love Performance Guides so much
Thanks for Sharing with us. In Germany there not so many WordPress Blogs. But we have Great Guides too.
But don’t forget HTTP/2 this will change a lot. I mean combine fiels no longer good for optimize and priority are comes in the game
Gabe Livan says
To further reduce the number of HTTP requests I recommend “WP Asset Clean Up” plugin as it removes all unnecessary styles and scripts that are not needed on the home page and other posts/pages.
Patrick Evans says
I’m using Rosehosting to host my WordPress websites and I’m very pleased with the speed and reliability of my VPS.
From your tutorials, I learned how to make use of image sprites and how to save images optimized for web and my websites are faster now.
Thanks!
Miro says
Switched to site ground recently and I am really happy with them. I also followed steps in this article and got quite good results except one thing. I failed in Combining Files to Reduce HTTP Requests. Plugins that are out there to do so don’t work well, moreover, they either break my site or make it extremely slow. Do you have an article / a tutorial on how to manually Combine Files to Reduce HTTP Requests? Would you suggest anyone who provides such a service (combining js and css files to reduce http requests). Thank you
Jane says
Thanks for the article guys.
We deffo needed something to optimize our speed due to large number of high res images
We use Wp Cache on our free photo site, but we also noticed that even though this helps, we still need to compress (resize) images cause it takes a lot of time to laod 20 images (on home page).
So, basically, resize everything and keep high resolution images in the background (for downloads)
Have a great weekend
Jane
Piet says
For the images you use a sprite you say, but the images you’re using can easily be replaced with a font icon such as FontAwesome. Depending how you install that (I would use Bower), it’s not even an outgoing http request, so you could save yourself the loading of that image file (and all the calculating to make it right of course).
Jay Castillo says
Wow! Your numbers for List25 with Siteground are awesome! Did you use the GoGeek plan or is there a bigger plan not listed on their website?
One more thing, what tool did you use to get server response times (the graph just above Google bot crawl rate)?
Editorial Staff says
We are using their Dedicated server plan with the WordPress Booster package. We used Pingdom for the server response time graph.
管理者
Jay Castillo says
Got it, thanks!
Alberto Serrano says
Hello , I hosted my site on site ground but didn’t knew they had a cache plugin already installed so I installed WP supercache , should I disable one and which one would be better ?
Thanks
Editorial Staff says
Yup you probably don’t need SuperCache. I would confirm with SiteGround support just to make sure though
管理者
Lawrence says
Thanks for this very helpful guide!
Please, did you setup Maxcdn together with Siteground’s SuperCacher?
I recently moved to siteground and will love to know how to setup Maxcdn, given that the supercacher plugin is already active on my account
WPBeginner Support says
Hi Lawrence,
When you cache content on your website, it is still served by the same server. MaxCDN, on the other hand serves your content using their content delivery network which improves your website’s performance. As for compatibility concerns, you may want to contact your hosting provider.
Ian Douglas says
Please consider letting loose your custom social sharing plugin into the wild (i.e., free to download for the public). Social sharing has always been a drain on pages, so it would be great to get a sleek and fast option.