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

WebPagetest in 5 minutes

Koji Ishimoto
October 30, 2013
Design
12
2.5k

WebPagetest in 5 minutes

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

Koji Ishimoto

October 30, 2013
Tweet

More Decks by Koji Ishimoto

See All by Koji Ishimoto
スタンドアロンAMPのすゝめ
t32k
3
12k
Evaluating your stylesheets
t32k
0
740
Evaluating CSS
t32k
10
2.1k
Modern Development Workflow with Grunt
t32k
22
36k
Introduction to Sass Compass for Sencha Touch
t32k
6
1.8k
var Gurator = Gist + Curator;
t32k
0
330
Sublime Text and Grunt for Titanium Development
t32k
5
3.3k
3 secrets for optimizing Web application
t32k
6
180
Mobile Front-end Optimization Standard:2012
t32k
7
910

Other Decks in Design

See All in Design
デザインスプリントを活かすチームの在り方
mixi_design
PRO
2
790
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
410
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
190
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
300
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
360
知を活かせるチームづくりとは？-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
700
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
610
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.1k

Featured

See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Documentation Writing (for coders)
carmenintech
65
4.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Teambox: Starting and Learning
jrom
133
8.8k
Speed Design
sergeychernyshev
24
610
Fireside Chat
paigeccino
34
3k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Navigating Team Friction
lara
183
14k
GitHub's CSS Performance
jonrohan
1030
460k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k

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