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
180
スタンドアロンAMPのすゝめ
Avatar for t32k t32k
3
13k
Evaluating your stylesheets
Avatar for t32k t32k
0
780
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
350
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
200

Other Decks in Design

See All in Design
20241204_UI/UXデザイナーLT会 - vol.10_DMM
Avatar for Motoko Ishida motokoishida
0
410
今日から意識できるアクセシビリティ
Avatar for fumiko fumiko
0
220
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP！】
Avatar for viviON Design vivion
0
540
aya_murakami_portfolio
Avatar for aya ayakaimi1101
0
1.6k
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.5k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
Avatar for Yu Morita securecat
1
190
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
Avatar for Masahiko Sakakibara rdlabo
1
120
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
170
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
Avatar for Aokashi aokashi
1
250
株式会社デイトラ様│コーポレートサイト│コンセプトシート
Avatar for Haruka_CAPEO haruka_capeo
0
1.6k
デザイナーのマネジメント職、 身構えずにやっていこう
Avatar for fumink fumink7
0
890
Flow, Not Stock 知識触媒としてのIA
Avatar for Takehisa Gokaichi 5kaichi
1
250

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
0
32
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
187
11k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.6k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k

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