レスポンシブデザイン前提のWordPressの表示速度高速化の考え方
9 likes10,768 views
スマートフォンが普及するに伴い、マルチデバイス対応のWebサイトが求められています。その要望に応えるために、レスポンシブデザインを前提にWordPressでサイト構築することが一般的になっています。しかし、デスクトップサイトで使用するファイルをそのままに利用するレスポンシブデザインでは、その容量の大きさが、携帯網を経由して配信する際に大きな遅延要因となります。 今回のセッションでは、高速化の重要性と、正しい計測や分析のやり方、民法改正に関係するWebサイトの品質にも言及しつつ、WordPressで高速化できる限界と注意点について解説しています。
レスポンシブデザイン前提のWordPressの表示速度高速化の考え方
- 2. 自己紹介 株式会社Spelldata 代表取締役社長 ACM(Association for Computing Machinery)会員 CMG(Computer Measurement Group)会員 ISACA(Information Systems Audit and Control Association)会員 日本統計学会賛助会員 html5j パフォーマンス部部長 統計学を基礎から学ぶ! 中西塾主催 Webサイトパフォーマンスに関係する仕事を始めて、もう13年目 やってきた事 VMware … 日本人初のVCPトレーナー Akamai … プロフェッショナルサービス Verizon Business … プリンシパルコンサルタント Keynote Systems … 日本代表 Catchpoint Systems … 日本代表
- 3. 今日、お話する内容 現在の表示速度の基準値 「速さ」はなぜ、重要なのか? 法律での品質の瑕疵担保責任追及の変化 Web表示速度高速化の考え方 レスポンシブデザイン前提のWordPressの高速化 WordPress高速化検証 まとめ
- 6. 現在の世界基準 表示開始時間 … 0.5秒以内 Webブラウザ上に最初の1ピクセル目が表示された時間 表示完了時間 … 2秒以内 DOM Complete DOM処理が終わって、ユーザが操作可能になった時間 エラー率 … 3%未満
- 7. え、500msですか?
- 14. Webサイトに期待するもの Webサイトに期待すること 1 2 3 4 サンプ ル数 平均レート コンテンツの新しさや更新頻度 39% 400 29% 295 19% 191 13% 127 1,013 2.04 パフォーマンス （バッファリングなしで、動画再生、 ページの読み込みが速い等） 52% 523 26% 266 9% 87 14% 137 1,013 1.84 モバイルサイトとデスクトップサイト の体験が同一であること 20% 205 27% 274 35% 356 17% 177 1,012 2.50 パーソナライズされたコンテンツ 12% 117 18% 182 26% 259 44% 447 1,005 3.03 Limelight Networks http://img03.en25.com/Web/LLNW/%7Bb97f8e45-2370-4f4b-8c8e-fa4141051c72%7D_2014StateoftheUserExperience.pdf
- 18. 直帰率の改善
- 24. 「仕様の実現」から「目的の実現」へ 民法の条文に「品質」という言葉が入る 従来の瑕疵担保責任 … 発注者側が指示した「仕様」を実現している かどうか 新しい民法での瑕疵担保責任 … 発注者側が意図している「目的」を 実現しているかどうか 非機能要件に対する責任が、これからは契約上入っていなくても、 自動的に責任を負う
- 32. 事象例：画像が重い 計測してみたら、画像が重いと出た ベストプラクティス： 画像を軽量化しなさい→速くならない 過去の事例 Windowsのサーバを使っており、NTFSでフォーマットされたディスクパーティ ションを80%以上使っていた NFSでNASをマウントして使っていた HTMLの生成と、画像の配信を同じディスク上で行って、ディスクのアクセス 競合が発生していた __d_lookup関数がCPUを使いまくる
- 36. カバー率（経路）の問題
- 37. カバー率（時間）の問題
- 40. 平均の罠 1秒 2秒 3秒 4秒 5秒 6秒 7秒
- 44. 治療＝改善作業
- 45. エンジニアは「医師」であるべき
- 46. データに基づく分析をしましょう!
- 48. 表示速度改善手法 ベストプラクティス系 「Webの表示速度を高速化する10の手法」 部分最適化系 ハードディスクをSSDにしよう！ JavaScriptを高速化しよう！ 「非同期処理」 PHP高速化 MySQL高速化 キャッシュ 画像圧縮 CDNの導入
- 49. Weakest Linkという考え “A chain is only as strong as its weakest link.” Webサイト配信においては、ネットワークが一番「弱い」
- 52. 携帯網は、時間単位での配信容量が 物理的に増やせない ― 観覧車と同じ London Eye ― 定員25人
- 54. 熊本市 ― スマートフォンサイト
- 55. ページ容量 … 162KB
- 56. ウォーターフォール図
- 57. Yahoo! Japan ― スマートフォンサイト
- 58. ページ容量 ― 434KB
- 61. ページ容量 ― 318KB
- 62. ウォーターフォール図
- 63. WordPress高速化比較検証
- 70. 高速化の考え方のパラダイムシフト 「どこまで高速化するか」から「どこまで遅延を許せるか」へ 3秒以内に配信し切るための容量制限 3G通信 … 100KB LTE … 200KB 容量上の制限が、物理法則上定まっているため、携帯網経由でス マートフォンサイトを表示させるには、この容量以下にしなければい けない Webサイトを構築するときの、会話が変わる 「200KBを超えると、絶対、3秒以内の表示は出来ないです。それでも、この 画像を入れますか?」
- 71. Third-partyコンテンツとの付き合い方 現在の遅延の主たる原因は、Third-partyコンテンツにある Google Analytics 広告配信 効果測定 SNS きちんと計測して、遅延が見られた場合には対処が必要 Third-partyと高速化について交渉する 外す 代替サービスに変える ビジネスモデルを見直す
- 72. まとめ 表示速度は、今や、表示開始0.5秒、表示完了2秒が世界標準です。 表示速度の高速化は、お仕事ですから、きちんと保証できるように しましょう。 保証するためには、計測しないといけません。 きちんと改善するためにはデータに基づいた分析が必要です。 200KBを超えると、LTE網で3秒以内に配信しきれません。
- 73. Q&A