1. HOME
  2. 開発・ブログ運営
  3. WEB パフォーマンス
  4. WordPress がもっさりだったから高速化してみた
2014年08月08日
Chrome で WEB レスポンスヘッダ と リクエストヘッ ...
2016年07月21日
Nginx のプロキシキャッシュが効いているかどうか確認してみ ...
2016年07月29日
AMP ページに Google Analytics のトラッキ ...
2014年09月25日
WordPress で簡単にスマホ対応出来るプラグイン WPt ...
2016年07月27日
WEB サーバーを Apache 2 コンテナから Nginx ...
2014年08月21日
エックスサーバーでブラウザキャッシュ(mod_expires) ...

WordPress がもっさりだったから高速化してみた

まだまだ課題はありますが、もっさりしていた WordPress が概ね 3秒以内で、キャッシュが効いてるページでは2秒以内で表示されるようになったので、その覚書。

結論から言えば、WP Super Cash プラグインの導入と Facebook 関連のブログパーツ(「いいね」ボタンとFacebook コメント)を外しただけです。

ただ、そこに至るまでの試行錯誤の中で、今後 HTML やら CSS やらを修正していく上で、ページの表示速度を意識したサイト作りが出来るようになったり、WEB の仕組みがより把握できた気がします。

だから何なの?と言ってしまえばそれまでで、理屈は所詮理屈な訳ですが、こと技術的な分野では理屈がなければ始らない。

ってことで、高速化の過程の中で考えたことや理解したことなどをつらつらとまとめてみます。

はじめに

WEB サイトを高速化する方法として、Google とかで検索すれば様々な手法が出てくるわけですが、サイトの規模や環境などによって、効果があるものや効果の低いもの、また、逆にパフォーマンスが劣化してしまうものなど、どこからどうやって手をつけてよいのやら。

ということでまずは、そもそも自分のブログがどんな状況なのかを把握してみました。

コネクション数の把握。 読み込み時間の把握。 どのファイルの読み込みが遅いのかの把握。

WEB ページが表示されるまでの流れ

WEB ページが表示される流れをザックリ整理してみました。

  1. ブラウザでアクセスする。
  2. WEB サーバーが反応し WordPress が反応する。
  3. WordPress がデータベース(MySQL)にアクセスしてページを組み立てる。
  4. WEB サーバーが WordPress が組み立てたページをブラウザへ返す。
  5. ブラウザは受け取ったページを読み込む
  6. ページに必用な部品(CSS や画像や Javascriptなど)を WEB サーバーへ要求する。
  7. WEB サーバーは要求された部品をブラウザへ返す。
  8. ブラウザは受け取った部品を読み込む。

といった感じでしょうか。

全体像が整理できたところで、それぞれのプロセスに対してどんな対処法があるのかをしらべなきゃ。

でもでもでもでも・・。

すべてのプロセスに対処できるわけじゃない

レンタルサーバーを借りて WEB サイトやブログを運営している人が多いと思いますが、レンタルサーバーはサーバー知識などがなくても手軽に運用できる反面、自分で設定を変えたりする範囲が制限されてます。(だから手軽なんだけど。)

そうすると、上記ページが表示されるまでの流れの中で、

  1. ブラウザでアクセスする。
  2. WEB サーバーが反応し WordPress が反応する。

    ここまでは、クライアントPCの性能、ネット回線の速度、WEB サーバーの処理速度に依存するため、レンタルサーバーを使っている人はほとんど何もできない。

  3. WordPress がデータベース(MySQL)にアクセスしてページを組み立てる。
  4. WEB サーバーが WordPress が組み立てたページをブラウザへ返す。

    ここ(3 & 4)が表示速度をアップするためのポイントその1。

  5. ブラウザは受け取ったページを読み込む
  6. ページに必用な部品(CSS や画像や Javascriptなど)を WEB サーバーへ要求する。

    ここ(6)もクライアントPCの性能などに依存のため、ほぼ何もできない。

  7. WEB サーバーは要求された部品をブラウザへ返す。

    ここが表示速度をアップするためのポイント2。

  8. ブラウザは受け取った部品を読み込む。

    これもどうしようもありません。

という訳で、高速化ポイントは、

1. WordPress がデータベース(MySQL)にアクセスしてページを組み立てる。
2. WEB サーバーが WordPress が組み立てたページをブラウザへ返す。
3. WEB サーバーは要求された部品をブラウザへ返す。

となります。

さらに、1 は、WordPress の処理とデータベース(MySQL)の処理に分解できますが、WordPress の処理速度っていうのは、PHP の処理速度なわけで、PHP の処理速度と MySQL の処理速度を改善することになります。

2 と 3 は、ともに WEB サーバーがブラウザから要求されたものを返すプロセスですが、そもそもブラウザが WEB サーバーにリソースの要求をしないようにすれば良い訳です。つまりキャッシュの活用です。

なので、上記3ポイントを言い換えると、

  1. PHP の処理速度を改善する。
  2. MySQL の処理速度を改善する。
  3. 最大限キャッシュを活用する。

ということになります。

ここまでがベースの考え方。

高速化のカギはキャッシュ

高速化のポイントはいかに上手にキャッシュを利用するか?ということ。

キャッシュを利用することによって、上記の流れ自体を変えることが出来ます。







この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.