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
730
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
320
Sublime Text and Grunt for Titanium Development
t32k
5
3.3k
3 secrets for optimizing Web application
t32k
6
170
Mobile Front-end Optimization Standard:2012
t32k
7
900

Other Decks in Design

See All in Design
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
9
7.8k
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
330
新しいemoji😄のアイデアを Unicodeが募集中‼️🏃‍♀️💨💨💨 傾向を学んでみんな提案しよう💪
oguemon
2
660
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
110
太田博三(@usagisan2020)
otanet
0
180
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
790
Haruki_Konaka_Portforio.pdf
haruki556
0
550
我做了一個詐騙網站...嗎？
crboy
1
140
Fleet Gas Station
joshtang
0
130
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
230
Test Revisionista
olgastoryboard
0
110
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
300

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Become a Pro
speakerdeck
PRO
24
5k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Automating Front-end Workflow
addyosmani
1365
200k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Writing Fast Ruby
sferik
626
61k
GraphQLとの向き合い方2022年版
quramy
43
13k

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