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
750
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
930

Other Decks in Design

See All in Design
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
660
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
240
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
1.6k
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.1k
プロダクトデザインの「守破離」の「破」について
hayashirine
0
290
Dinosaur Mayhem
storyartist
0
120
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
810
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
510
Tableau曲線表現講座(2024.11.21)
cielo1985
0
220
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.7k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
320
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
230

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
Building an army of robots
kneath
302
45k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Code Reviewing Like a Champion
maltzj
521
39k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Building Your Own Lightsaber
phodgson
104
6.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
A better future with KSS
kneath
238
17k
Embracing the Ebb and Flow
colly
84
4.5k

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