Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebPagetest in 5 minutes

Avatar for t32k t32k
October 30, 2013
Design
12
2.6k

WebPagetest in 5 minutes

Introduction to "Speed Index" of awesome tool WebPagetest.
http://www.webpagetest.org/ #frontrend

Avatar for t32k

t32k

October 30, 2013
Tweet

More Decks by t32k

See All by t32k
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
620
スタンドアロンAMPのすゝめ
Avatar for t32k t32k
3
13k
Evaluating your stylesheets
Avatar for t32k t32k
0
790
Evaluating CSS
Avatar for t32k t32k
10
2.2k
Modern Development Workflow with Grunt
Avatar for t32k t32k
22
36k
Introduction to Sass Compass for Sencha Touch
Avatar for t32k t32k
6
1.9k
var Gurator = Gist + Curator;
Avatar for t32k t32k
0
360
Sublime Text and Grunt for Titanium Development
Avatar for t32k t32k
5
3.3k
3 secrets for optimizing Web application
Avatar for t32k t32k
6
210

Other Decks in Design

See All in Design
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
8
2.4k
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
160
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
160
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
770
タイミーでフィールドワークしたら、サービスデザインが始まった
Avatar for 太田賢一 kenichiota0711
2
3.2k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.6k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
6
2k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
490
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
150
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.5k
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
260

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
6k
The Language of Interfaces
Avatar for Des Traynor destraynor
160
25k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k

Transcript

  1. Frontrend x Chrome Tech Talk Night Extended, October 30, 2013

    5 WebPagetest minutes in

  2. +KojiIshimoto

  3. Web Performance Warrior I’m a... www.flickr.com/photos/soldiersmediacenter/5349439407

  4. PageSpeed Insights WebPagetest

  5. WebPagetest

  6. None
  7. None
  8. None

  9. First Byte Start Render DOM Elements Document Compete Fully Loaded

    Load Time Waterfall View Connection View Screen Shot Filmstrip View Watch Video Scripted Test Waterfall Opacity Export HTTP Archive
  10. None
  11. None

  12. Speed Index

  13. None
  14. None

  15. Speed Index = end 0 1 ― 100 VC ∫

    ― ― ― end = End time in milliseconds VC = % (Visually Complete)

  16. Let’s Improve Performance

  17. None

  18. Before 80 PageSpeed Insight Score

  19. Remove it!

  20. After 93 PageSpeed Insight Score

  21. None

  22. WebPagetest

  23. WebPagetest

  24. 3105 WebPagetest

  25. None

  26. ―@maccaw Speed is the second biggest engagement driver on the

    Internet. Just after perceived speed.

  27. Private Instance for Ameba

  28. None

  29. Under Development

  30. Thanks! +KojiIshimoto