WordPress 高速化 Pro Tips: フロントエンドの最適化

Optimization of the front-end
Pro Tips for Speeding Up WordPress
WordPress 高速化 Pro Tips: フロントエンドの最適化

2012.09.15.
WordCamp Tokyo 2012
こもりまさあき

簡単ですが、自己紹介から

こもりまさあき

1972年生まれのフリーランス。90年代前半から都内のDTP系
デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正
社員に。入出力業務、デザイン業務、ネットワーク関連業務に
並行して従事後、2001年会社を退職しフリーランスの道へ。
業務内容や立ち位置が異なるので、職域的な肩書きはなし

近著に『レスポンシブ・ウェブデザイン標準ガイド』『Webデ
ザイナーのためのHTML5移行ガイド』、など

Twitter: @cipher / @proteanbm
Instagram: @cipher

高速化といえば、あの青い本も書いてます

今日お話しすること

•高速化をはじめる前に
•ツールを使って問題点を探そう
•どこを対処するべきか見極めよう
•できることから高速化の施策をしましょう

仕組みを知らなきゃ始まらない高速化

Optimization of the front-end: Pro Tips for Speeding Up WordPress

何？WordPressが遅い？ホントに？

WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki


WordPressを疑う前に。
まずは、仕組みをおさらい



アドレス解決、接続、リクエスト、レスポンス



意外と知らない人が多い、
Webページの表示までの流れ



アドレス解決、接続、リクエスト、レスポンス

1.接続先のドメインをIPアドレスに変換

2.そしてサーバに接続

3.サーバに欲しいファイルをリクエスト

4.サーバはそれにあわせてレスポンス



繋がったあとは…

1.リクエストにあわせて、WordPressが処理を開始

2.HTMLが生成されて、クライアントのブラウザへ

3.HTML内に記述された内容をブラウザが読んで、
ページの形成に必要な要素を順番にリクエスト

4.リクエストされたファイルを順番に送り返す



それが必要な数だけ繰り返される



ここまでが仕組みのおさらい


計測、そして原因を突き詰める


接続からページが表示されるまでを視覚化



ツールやサービスを使ってみよう

1.ChromeやSafariのWebインスペクタ

2.FirefoxにFirebugをいれて

3.Webpage Test（http://webpagetest.org）

4.Pingdom Tools（http://tools.pingdom.com/fpt/）



みえる、みえるぞ…



では、ちょっと覗いてみましょう



まず、どこに原因があるかを突き止める



いったい何が原因で遅くなっているのか？

1.DNSによる名前解決？

2.最初のHTMLが出てくるまでが遅い？

3.ページの構成要素が
いつまでもダウンロードされてる？

4.外部のサービスで止まってるみたい？



ページ表示が遅い原因の9割はフロントエンド



つまるところ、作り方と配信の仕方が悪い



WordPressあんまり関係ない



心当たりはありませんか？

1.便利だからプラグインいっぱい使ってる

2.制作効率のためにCSSを分割してる

3.そういえば、JavaScriptもいっぱいだー

4.見た目の装飾のために画像も多いな…

5.ソーシャル系のボタンも貼付けてるわ



アウト。



では、改善しましょう


どこから攻めるか、自分にできることを


なにができるか、人によって異なります



先ほどのこれ、思い出してください

1.便利だからプラグインいっぱい使ってる

2.制作効率のためにCSSを分割してる

3.そういえば、JavaScriptもいっぱいだー

4.見た目の装飾のために画像も多いな…

5.ソーシャル系のボタンも貼付けてるわ



それぞれがこんな問題を引き起こす

1.最初のHTMLの生成が遅くなってしまう

2.ページのレイアウトがなかなかできない

3.リクエストが増えると次に進めない

4.画像が落ちてこなくてページが完成しない

5.途中で一瞬止まったような感じになる



ページの生成が遅いなら…

•プラグインの多用をひかえる
•テーマ、テンプレートの設計を疑ってみる
•静的なHTMLとしてキャッシュしてみる



静的なHTMLとしてキャッシュする

•WP Super Cache
•Hyper Cache Extend
•W3 Total Cache
•DB Cache Reloaded Fix



CSSやJavaScriptにも目を向ける

•CSSやJavaScriptは、できるだけ数を少なく
•データサイズを減らすなら、
ファイルから余分な改行やコメントを削除

•ロードする順番は、
CSSが先、JavaScriptが後の方がベター

•変更がないならブラウザにキャッシュ



CSSやJavaScriptの矮小化、結合に

•Head Cleaner
•JS & CSS Script Optimizer
•W3 Total Cache



外部サービスへの接続が含まれると、
ホストごとにDNSの名前解決が必要に



最近ではソーシャル系のボタンが人気



結構いろんなデータを拾いにいく



外部サービスのJavaScriptを非同期にする

•コードはできるだけ最新のものに置換
•Socialite.js
•WPSocialite



Facebook ©



そもそもの原因は、HTTPリクエストが多すぎ



減らしましょう



いまどき、スマフォなどで見ることも多いし



そういえば、画像…



減らすに減らせない画像…



サイズ削減、ブラウザにキャッシュ、サーバ分散

•PhotoshopやFireworksで書き出し、
それをさらにツールで最適化して軽量化

•面倒だったら、WP Smush.it で
•有効期限を設定してブラウザにキャッシュ
•配信するサーバを分割する



えー、面倒くさい


もっと簡単に効果が出る方法はないのか？


確実に効果がでる良い方法がひとつ



CDNを使いましょう



CDN？



ここから先は、現場の宮内さんを呼びましょう



続きは宮内さんのスライドで
http://www.slideshare.net/miyauchi/wordcamp-tokyo-2012-wordpress-pro-tips


WordPress 高速化 Pro Tips: フロントエンドの最適化

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WordPress 高速化 Pro Tips: フロントエンドの最適化

Similar to WordPress 高速化 Pro Tips: フロントエンドの最適化 (20)

More from masaaki komori

More from masaaki komori (20)

Recently uploaded

Recently uploaded (10)

WordPress 高速化 Pro Tips: フロントエンドの最適化