高速化TwitterFacebookGoogle+はてブPocketWordPressで運営しているブログの表示速度を早くしたいけど、何から始めたら良いか分からない!WordPressでブログを運営している人なら、1度くらいは意識したことがあるであろう「表示の高速化」。照らし合わせながら、本当に必要な高速化の方法は何か?ということを考えてみましょう。削除する10.非同期スクリプトを使用するWordPress高速化の14の方法1.画像の最適化2.テーマに沿った画像の選択をする3.画像の遅延読み込みの導入4.必要ないプラグインがないか確認5.必要の無いタグが出力されていないか確認6.CSS/JavaScriptのフッターへの移動7.ブラウザのキャッシュ設定8.生成されたページ(HTML)のキャッシュ設定9.CSS/JavaScriptの圧縮(Minify)10.データベースの最適化&キャッシュ設定11.WordPressの最適化(オブジェクトキャッシュ)12.PHPのバージョン変更やキャッシュ設定の導入13.サーバー独自の高速化について確認する14.サーバー移転を検討するWordPress高速化の10のルールと14の方法まとめWordPressは動的ページまず、WordPressを高速化するための重要なポイントが「WordPressはPHPで動的ページを生成するCMSである」ということ。静的ページと動的の仕組みについて確認しておきます。※高速化の方法だけ知りたいんだ!という人はこのセクションは飛ばしてもらってOKです。静的ページの読み込み(HTMLページ)静的ページとは、サーバー上に「index.html」といったHTMLファイルがあらかじめ用意されている状態のWebページのことをいいます。アクセスしてくれたユーザーの「ページのリクエスト」に対して、すぐにリクエストされたページをレスポンスするため、読み込みにかかる時間は非常に短くて済みます。動的ページの読み込み(WordPressなど)一方、動的ページとは、ユーザーから「このページが見たい」というリクエストが有って初めてプログラムが動き出し、必要なデータを揃えてから、「こんなページができました」と返答があるWebページです。静的ページに比べて、かなり多くの手順を踏まなければならないため、表示速度はその分遅くなります。WordPressにおいて高速化が注目されるのは、この表示の遅さを解決したいという想いがあるからでしょうね。照らし合わせましょう。リクエストとレスポンスの追加のサイクルを発生させ、往復による遅延がさらに増えるため、アプリケーションが行うリダイレクトの数は最小限に抑えることが重要です。リダイレクトを避けると、ユーザーがページの読み込みを待機する時間を減らすことができます。サイトの設計を慎重に検討して、サイトのパフォーマンスをどこで改善できるか確認するようおすすめします。「パソコン用のサイト」と「モバイル用のサイト」を別々に作っている場合、JavaScriptなどを利用して、アクセスしてくれたユーザーの端末(PC/スマホ)に合わせて、適切なコンテンツへ誘導する「リダイレクト」という手法を利用することがあります。このリダイレクト、1回まではOKですが、リンクで飛ばされた先のページでさらにリダイレクトしてしまうと、アラートが出現する、というわけです。こんなこと有りえるの?と思われるかもしれませんが、例えば、コンテンツを移転して別のブログを作った時、そのブログがパソコンとモバイルの振り分け設定をしていれば、「元のページ→新しいページ」で1回、「端末によるページ振り分け」で1回の計2回、リダイレクトがカウントされてしまいます。圧縮すると、ウェブサイトを表示するのに必要なリソースのダウンロードにかかる時間を削減できます。Webサーバー(Apacheなど)にはコンテンツを圧縮してからクライアントへ送信する機能が備わっています。このアラートは、その圧縮の設定がONになっているかどうか、を知らせてくれるものになります。やる方法としては「.htaccess」へキャッシュを利用する旨を記載、とかでしょうね。サーバー間のネットワーク遅延が差し引かれます。測定を実行するたびに差異がありますが、違いはそれほど大きくはなりません。サーバーの応答時間が大きく変動する場合は、根底にパフォーマンスの問題がある可能性があります。実は一番対処が難しいアラートが、この「サーバーの応答時間を改善する」です。基本的にサーバーのスペックによるところが非常に大きいので、このアラートが消えない場合は、サーバーを替えることすら検討する必要があるからです。実は、ロリポップ!やさくらインターネットからエックスサーバーに移転する場合、バックアップ系のWordPressプラグインが上手く動かずに、ものすごくめんどくさい作業をしなければならない可能性があります(実体験)。将来的な手間の多さを考えると、すこし月額料金は高くなりますが、最初からエックスサーバーを選んだ方が、ブログ運営そのものに集中することができるでしょう。人気のレンタルサーバー4社を比較した結果と、僕が1年間複数のレンタルサーバーを利用してきて感じたことをまとめてみました。2015-11-014.ブラウザのキャッシュを活用する静的なリソースをブラウザでキャッシュすると、ユーザーがサイトに複数回アクセスした場合に時間を節約できます。ヘッダーは小さなサブセット(画像など)だけでなく、キャッシュできる静的なリソースにすべて適用されます。過去にアクセスしたページにもう一回アクセスしたい、と思った時に、また最初から同じ時間をかけてページを生成するのはユーザーにとって不便です。一定期間ブラウザに保存してもらうキャッシュデータを準備しておき、初回アクセス時に配布、2回目以降のアクセス時には、このキャッシュに変更があるかを確認してからページ生成するかどうか判断することで、サーバーの負担も減り、ユーザーも高速表示を手に入れることができます。このブラウザのキャッシュ機能が設定されていない場合に発生するアラートです。5.リソースを圧縮するリソースの圧縮(ミニファイ)とは、余分なスペース、改行、インデントなどの不要なバイトを取り除くことです。圧縮すると、ダウンロード、解析、実行時の速度を向上させることができます。サイズをさらに削減できます。無くても動作に影響が無いものを徹底的に排除して、それぞれのリソースの容量を削減できるよ、という場合に発生するアラートです。WordPressにおいては、プラグインが独自のCSSやJavaScriptを出力することがあります。あまりにプラグインを入れ過ぎると、いざ圧縮した時に競合したり、うまく動かないことがあるので注意が必要です。6.画像を最適化するユーザーがリソースの読み込みを待機する時間を削減するには、画像のサイズを最小限にします。画像のフォーマットや圧縮を適切に行うと、データのバイト数を大幅に節約できます。プランに制限のあるユーザーにとっては費用の節約になります。Webページで公開している画像が見た目上、そこまで変化は無くてもサイズを小さくできる場合に発生するアラートです。デジカメで撮影した写真やインターネットからダウンロードできる素材集の画像を、そのままWordPressにアップロードしてしまうと、見かけ上は綺麗にコンテンツに収まっているように見えても、ページの読み込み時のファイルサイズは大きいままなので、かなりのデータ通信が必要になってしまうことも有ります。配信を最適化するブラウザでは外部CSSファイルのダウンロードと処理が完了するまでコンテンツを画面に描画するのをブロックします。これによって、外部CSSファイルが多いと、コンテンツを画面に表示するのにかかる時間が増えます。Webページは記載されている上から順番に読み込まれます。この際、外部CSSがページの上の方にあると、一旦CSSをすべて読み込んでから、次の記載内容を読み込もうとします。header部分にたくさんの外部CSSが存在すると、なかなかページの読み込みが始まらないため、このアラートが発生します。したCSSくらいなら、HTML内に記載するのも有りですが、WordPressでブログを運営するような場合、かなりのデータ量になってしまう可能性が高いので、フッターなどに移動してしまうのが一般的な対処法です。8.見える範囲のコンテンツを優先するリクエストされたデータの量が初期の輻輳ウィンドウを超える場合、サーバーとユーザーのブラウザ間で追加の往復が必要になります。ネットワークのような遅延の多いネットワークの場合、これによってページの読み込みが大幅に遅れる可能性があります。ファストビューの画面で表示されるコンテンツについて、メニューバーなどの読み込みが多い場合に発生するアラートです。基本的には、モバイルの評価で注意されることが多いです。削除するブラウザではページをユーザーに表示する前に解析する必要があります。ダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。これはCSSと同じですね。ファストビューに必要なJavaScriptはインライン化(HTMLに直接記載)、それ以外についてはフッターに配置するのが良さそうです。10.非同期スクリプトを使用する非同期スクリプトを使用すると、ページのレンダリングがより速くなります。ページのレンダリングの前にスクリプトのダウンロードが終了するまでユーザーを待たせる代わりに、スクリプトをバックグラウンドでダウンロードできます。ページの内容を生成する際、常にどこか別のサーバーと通信しながらでないと出力できないコンテンツがあると発生するアラートです。現在のWebサービスにおいて、同期系のタグを入れなければならないサービスをなかなか見なくなったので、ほとんど気にする必要はなさそうです。スポンサーリンクWordPress高速化の14の方法さて、お待たせしました。WordPressの高速化について、具体的な方法をご紹介します。基本的な方針としては、「読み込むデータはできるだけ小さく」「キャッシュを利用」「効率的なシステム稼働」といったところ。『ブログアップ前の画像圧縮って必要?』という記事でも書きましたが、Webサービスやプラグインを利用することで簡単に実現することができます。2016-02-102.テーマに沿った画像の選択をする[難易度:中]ブログのトップページやアーカイブページで、記事のアイキャッチ画像をサムネイルとして利用していることがあるかと思います。各テーマによって、設定は様々では有りますが、「フルサイズのアイキャッチ画像を利用してCSSで大きさを調整する」のではなくWordPressにメディアアップロードで最適な画像を作成して利用するという方法を利用することで、さらにWebページの容量を縮小することができます。WordPressテーマのテンプレートを修正する必要があるので、若干、難易度は上がります。ルールにおいて「見える範囲のコンテンツを優先する」というアラートに対応するための方法になります。Load(遅延読み込み)」を実現するためのJavaScriptを組み込むことで、Webページにアクセスした際、一気にすべての画像を読み込むのではなく、スクロールに合わせて徐々に画像を読み込むようになります。数値上の改善、というよりは、ユーザーの体感としての変化につながります。WordPressではプラグインで簡単に導入できますが、似たようなプラグインが複数ある分、「Celtispack」のような複数のプラグインが集まった統合プラグインでは思わぬトラブルに巻き込まれることもあるので注意しましょう。2015-12-194.必要ないプラグインがないか確認[難易度:低]「ブログを始めるために選んだオススメWordPressプラグイン15選」のように、こんなプラグインを利用すると便利だよ!という記事はたくさんあります。便利だからといってあれこれ導入すると、ブログの表示が遅くなってしまいます。リソースの圧縮をしようとして、思わぬ変数の競合などでWordPressの表示が崩れる、なんてことも有りえますので、定期的にこのプラグインは本当に使っているか?他の手段に変えることはできないか?ということを考えるようにしましょう。5.必要の無いタグが出力されていないか確認[難易度:中/バックアップ必須]WordPressは、初期設定のままだと、自動的に多くのタグやJavaScriptを読み込むようになっています。それぞれについてちゃんと確認して、必要ないタグについては出力するのを止める、という方法になります。そこまで劇的な速度の変化が起きる方法ではありませんが、同じようなJavaScriptを二重に読み込んでしまうなどのを避ける等、無駄を省くことで、プラグイン同士の競合も起きにくくなります。設定にはfunction.phpを利用するので、絶対にバックアップをとってから作業するようにしましょう。本来は、ファーストビューのコンテンツ(アクセス時に表示される一番上のコンテンツ)で利用しているJavaScriptやCSSはインライン化(HTMLに直接記載)したほうが良いのですが、動きのあるコンテンツをアピールしたい場合を除いて、あとからの読み込みでまったく問題は無いでしょう。これもWordPressテーマのテンプレートファイルを直接編集する必要があるので、必ずバックアップをとっておきましょう。子テーマを導入するのも有効ですよ。ブラウザのキャッシュを活用する対処する方法です。「.htaccess」を編集することで簡単に導入が可能です。FTPって何?という初心者の方にはちょっと難易度が高いかもしれません。上記の動的ページの読み込みにおける1必要なページのリクエストを高速化することができます。「圧縮を有効にする」というアラートに対処する方法です。WordPressが生成したHTMLWordPressページを圧縮するために、サーバー(Apacheなど)のキャッシュ機能を有効化します。言葉で書くと難しく感じますが、これも「.htaccess」を編集することで簡単に導入が可能です。動的ページの読み込みにおける6必要なページをレスポンスを高速化する方法、とも言うことができます。「リソースを圧縮する」に対処する方法です。普通、CSSのやJavaScriptは記載内容がわかりやすいように改行やTABでインデント(階段状に表示)することが多いですが、この「人間が見やすいように調整している改行やTABを削除することでファイルサイズの縮小を目指します。いったWebサービスを利用するか、プラグインを導入することで実現できます。導入しているプラグインによっては、CSSのclass名が競合するなどしてうまく圧縮できない、なんてことも起こる可能性がありますので、CSSなんて分からないよ?という方は、いったん導入は見送りましょう。動的ページの読み込みにおける4データを読み込みを高速化する方法でもあります。10.データベースの最適化&キャッシュ設定[難易度:高/バックアップ必須]WordPressは常にデータベースからデータを取得することでページを生成しています。そこでデータベース自体の構造の最適化、およびキャッシュ設定をすることで、データベースからデータを効率的に取得してページの表示速度UPを目指す方法です。動的ページの読み込みにおける3データベースへ問い合わせ(PHP)を高速化することができます。WordPressにおいてはプラグインの導入で簡単に設定できる(できてしまう)のですが、もしトラブルが発生した場合に復旧する自信が無ければ手を出さないようにしましょう。最低でも、「Duplicator」などのバックアップ系プラグインでWordPress全体をバックアップしたうえで、ローカル環境やサブドメインで事前にテストしてから、作業するようにしましょう。いう関数を使うことで、自身の動作(PHPの動作)をキャッシュすることができます。こちらも、もし失敗するとWordPress自体が動かなくなる可能性がありますので、バックアップをとった上でローカル環境などでテストし、最新の注意を払って作業しましょう。動的ページの読み込みにおける2WordPressがリクエストを変換(コンパイル)を高速化することができます。12.PHPのバージョン変更やキャッシュ設定の導入[難易度:中/サーバー環境に依存]これまで見てきたのがWordPressのカスタマイズで表示速度の高速化を目指す方法であるのに対し、ここからは完全にサーバー環境に関するお話です。Cache)」といったキャッシュ設定により、PHPの動作そのものを高速化する、という方法があります。動的ページの読み込みにおける3データベースへ問い合わせや5HTMLを生成の高速化、とも言い表すことが可能ですね。13.サーバー独自の高速化について確認する[難易度:中/サーバー環境に依存]Webサーバーの中には、独自の高速化設定が可能なものも有ります。エックスサーバーではmod_pagespeedというGoogleが開発・提供しているApacheモジュールを利用することができます。CSSやJavaScript)の縮小して転送量を削減、同種のファイルをひとまとめにして無駄な通信を削減、などの最適処理をしてくれます。14.サーバー移転を検討する[難易度:低/コストがかかる]ものすごく極論ですが、これまで見てきた方法をどれだけ頑張ったとしても、最終的にものを言うのはサーバーのスペックです。ある程度ブログにアクセスが集まるようになると、どうしてもネットワーク負荷にサーバーが耐え切れなくなります。あるならば、どこかのタイミングで、ご自身のサーバーを一新する、という選択肢も候補の1つとして考えるべきでは無いでしょうか?詳しいレンタルサーバーの比較は下記の記事をご確認ください。2015-11-01WordPress高速化の10のルールと14の方法まとめ今回の記事は、僕自身が本腰を入れてWordPressブログの高速化に取り組もう!と決意したため、まずは基本を抑えたいと調べた内容をまとめたものになります。残念ながらWordPressの高速化については、「Webサーバー」「WordPressテーマ」「導入中のプラグイン」など、様々な要素が影響するため、すべての人にとって正解の方法はなかなか有りません。それでも、今回の記事で書かれている内容を理解しておくことによって、今、対策しているのはWordPressでページを生成する流れのうちどこの部分なのか、自分のブログに足りないのはどこか?など、全体像を把握することができるようになるでしょう。ちなみに、いろいろ考えるのはめんどくさい!という方は、「エックスサーバー」を選んでください。Cache)」など、高速化についての設定が付いているので、初心者でも簡単に表示の高速化に取り組むことができるからです。詳しい機能や1年間利用してきてわかったメリットについては、以下の記事をご確認ください。介護系の会社のたった1人のWeb担当。2015年の夏に、かわいい息子が生まれたことをきっかけにブログを開設しました。Plusの初心者向け使い方講座、WordPressで雑多ブログを運営する人向けのアクセスアップについてお届けします。コメントをキャンセルメールアドレスは公開されることはありません。