WordPress高速化の方法【まとめ:メモ】


.
方法効果手間
無駄なプラグインを検知中~大中~大

コンテンツを圧縮する
・画像を圧縮
・JS/cssを小さく
・コンテンツを圧縮して送信

中~大小~中
読み込む回数を減らす
・イメージのスプライト表示方法
・css/jsをまとめる
・クライアント側で読込回数を減らす
中~大小~大
体感速度を上げる小~中小~中

キャッシュは、更新反映が見えないデメリットも多く、仕組みも複雑になりがちなため、個人的にはおすすめしません。キャッシュは、更新や変化のなく大量にアクセスが来るサイト向けです。ワードプレスは表示の切り口を柔軟に変えられる仕組みを持っているので、大抵の場合ワードプレスとキャッシュは相性が悪いと思います。

無駄なプラグインを検知

不要な処理を減らす

無駄なプラグインを削除したり、遅いプラグインは、停止や入れ替えを検討します。やりかたはP3で確認する方法がおすすめです。

P3プラグインでパフォーマンスチェックする

 

Screenshot of ja.wordpress.org

僅かですが、記事の読込効率が多少上がります。消したり書いたり、追加した量が 数万行くと、効果があるかもしれません。

コンテンツを圧縮する

画像を小さく

以下のプラグインを導入したり、Webサービスのページで画像を小さくします。

Screenshot of ja.wordpress.org



Screenshot of optimizilla.com

JSやCSSを圧縮

管理が手間なので、あまり使いませんが変更が落ち着いた cssやjs を minimize し、アップロードします。

実際は、実行に不要なスペースや改行を省いたり、変数等をなるべく短くし容量を減らします。

Gruntを使ったCSS編集(Sass)コンパイラに圧縮機能があったりするのでそれを使ったりします。

Screenshot of refresh-sf.com

Head Cleaner のcss/jsキャッシュもそれに当たります。

コンテンツ全体を圧縮

基本的にはWebサーバの設定で http プロトコルの圧縮機能を使います。 sslを導入する場合は更に大変ですが、単純な誰にでも公開するコンテンツであれば  簡単に設定できます。

Apacheではdeflate設定を行います。

デメリットは、クライアントと(Webブラウザ)、Webサーバ双方で負荷が都度掛かります。クライアントが対応していないと働きません(ただ普通のhttp通信になるので動作はOK)。

(このページでは詳細設定は記載しません m(__ )m)

読み込む回数を減らす

css や JavaScriptをまとめたり、イメージを1ファイルにまとめスプライト表示方法があります。Webページでは、クエリ問い合わせに処理が 数百msかかります。また、cssは読み込むとブラウザの表示計算が止まりますので、体感速度にも多大な影響がかかります。

詳しくは以下の書籍が詳しいです。yahoo や my docomoなど大手でも考慮されています。

イメージのスプライト表示方法

小さいアイコンはまとめて、CSSで表示させる方法があります。全ページに出るような小さなアイコン(youtubeで言うと再生ボタンやサイトタイトルアイコン)であれば大きな効果が出ると思います。普通の個人サイトでは結構大変で、効果は薄いと思います。私はパフォーマンスよりも画像の数を減らしたい時に使うぐらいです。

CSSのやり方はこちら
CSSスプライトで、イメージ画像の一部のみ表示させる端的な方法

 

css/jsをまとめる

実際にファイルをまとめるか、ページに埋め込みます。ちなみに画像もページに埋め込めます(テキストフォーマットは大きくなるので通信ネックとの対比を考えると小さなアイコンのほうが効果あるでしょう)。

Screenshot of ja.wordpress.org


ただし最初の1画面文のCSSは ページ下部に書くととても表示が遅くなります。最初の1画面分のCSSは抜き出しhtmlに書くと速さが見込まれます。Googleも推奨している内容です。

クライアント側で読込回数を減らす

主にサーバ側の設定で行います。Webサーバを変えたり、キャッシュサーバやリバースプロキシを導入したりします。もっとお手頃では、Apacheサーバで キャッシュ期間を設定する方法です。(このページでは詳細設定は記載しません m(__ )m)

注意点としては、キャッシュが効いてしまうため編集画面で Ctrlキー+F5 など  強制読込をする必要があり面倒です。そうしないとブラウザが古いファイルを使い続け、新しいファイルを読みに行かないため、変更されないように見える。

 

体感速度を上げる

上記クライアントのキャッシュでも、ローカルにあるので実際の体感速度は上がります。

Head Cleaner

上記でも似たような話を書きましたが、1画面目に必要のないcssやjs(画面をロックする要素)でないものはヘッダではなく、フッタ側に移動させると、ページの下側は引き続き読みこんだり計算しているかもしれませんが表示(実質ページの上側)が速く出てきたように感じます。このような機能も Head Cleanerに、jsを選択しながら後ろに持ってこられます。jsの中でページ上部分を更新しているようなものは、後ろに持ってこられません。

  プラグイン作者によるちょっと解説: Head Cleaner を使用する場合の設定 | dogmap.jp

Lazy Load

仕組みはjsですが、 それを組み込んだ プラグインもあります。

imgタグの周りは、 Fancyboxでも使用しているため、最近は外しています。

Screenshot of ja.wordpress.org

WP Hyper Response

PHPでページを作成中でも適度に、クライアントへページを送ることによって、描画を始めてもらうツールです。実際は全体としてやや遅くなりますが、体感的には少しずつフィードバックが来る分早まったように感じます。

Screenshot of stocker.jp

その他

巨大なファイル等がある場合 CDNを利用し、そちらからユーザに見せるようにすると効果があるかもしれません。サーバ側の帯域が狭い場合も、 並列DLによる効果が上がるのでそういう場合も良いと思います。(FontAwesomeのcssをCDNから利用したり、googleの jsライブラリを取得(Head Cleanerプラグインでも可)など)

PHPのプラグインキャッシュを使う方法もありますが、管理が大変なので、基本使いません。一度くらい苦労を経験してもよいかもしれません。

CSS/html/jsのミニマイズなども あまり使いません。 更新の管理が大変だからです。 仕組みを作ればまあまあですが、ローカルでの管理も大変ですし更新するとき、しばらくたっていると、記憶がなくて開発環境の整理が面倒だったりもします。

css のhtml埋め込みも、もう1,2段階深くかなり細かい制御が必要になるため、管理コストがかなり上がるため、基本あまりやりません。

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

55 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です