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
2.9k
スタンドアロンAMPのすゝめ
Avatar for t32k t32k
3
13k
Evaluating your stylesheets
Avatar for t32k t32k
0
830
Evaluating CSS
Avatar for t32k t32k
10
2.3k
Modern Development Workflow with Grunt
Avatar for t32k t32k
22
37k
Introduction to Sass Compass for Sencha Touch
Avatar for t32k t32k
6
2k
var Gurator = Gist + Curator;
Avatar for t32k t32k
0
390
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
230

Other Decks in Design

See All in Design
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
3
2.4k
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
470
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
290
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
3k
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
200
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
PRO
0
260
デザインするために「多様性」について考える
Avatar for なつ iflection
0
180
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
1
410
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
300
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
200

Featured

See All Featured
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
250
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
51
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
80
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k

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