Page Phase Time Chao (Ray) Feng [email protected] @crazychao.
-
Upload
susana-tebay -
Category
Documents
-
view
214 -
download
0
Transcript of Page Phase Time Chao (Ray) Feng [email protected] @crazychao.
![Page 2: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/2.jpg)
Problems to Solve
Tells when a user, in his/her mind, considers a web page is “done”.- Not relying on Browser Events (e.g. Onload), Network Timing (e.g. TTLB), Above Fold Time (a.k.a. AFT), any pre-defined thresholds of
pixel changes on the screen, or pre-defined UI element injection/tracking
Measures PLT for modern web pages that are being dynamic in rendering.
Platform/Browser/Device independent performance measurement method that can be universally applied
![Page 3: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/3.jpg)
Amazon Product Page
Onload: 4.7 second
http://ppt.msn-dev.com/report/#/MetrixDetail/16085/
0 second 1.7 second 1.8 second 2.2 second 4.1 second
![Page 4: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/4.jpg)
A more dynamic web page
Page Phase Time 4
Phase 0
Phase 1
Phase 2
Phase 3
Phase 4
![Page 5: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/5.jpg)
Demo
http://ppt.msn-dev.com
Note: Page Phase Time is a Microsoft research project and this web site will be available until mid of Nov 2013.
![Page 6: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/6.jpg)
Demo OReilly.com
http://ppt.msn-dev.com/report/#/MetrixDetail/68853/
![Page 7: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/7.jpg)
Page Phase Time (PPT)
A performance measurement methodology that measures performance based on user perception, by intelligently categorizing a whole page load cycle into major phases, that represent meaningful rendering changes.
How: analyze screenshots or video captures
![Page 8: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/8.jpg)
Algorithm – Categorizing Phases Principle: To detect visual changes that are substantial enough by checking the rendering
transformation acceleration’s deviation
1. Record page load cycle into N screenshots (10 frames per second)
2. Calculate pixel changing velocity
- V1, V2, V3, … Vn-1 (where Vi = Pixel change ratio of Screenshot i+1 and screenshot i)
3. Calculate pixel changing acceleration
- a1, a2, a3, … an-2 (where ai = Vi+1 – Vi; if ai < 0, then ai = 0)
4. Scatter Plot acceleration numbers, and find outliers beyond 1 standard deviation
- {A} = {a∀ i > [avg + σ(a)]}
5. Filtering out adjacent outliers
![Page 9: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/9.jpg)
Algorithm – Categorizing Phases
![Page 10: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/10.jpg)
What If We Only Need ONE Number?
Key Phase Time
-- the first time that golden section (or similar area*) has most substantial content rendered among all phases.
*Similar area includes center, center top, center right, etc.
![Page 11: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/11.jpg)
Algorithm – Finding “Key Phase” and “Key Phase Time” Principle: Get pixel changing velocity of golden section areas among all phase, and find the 1st
outlier.
Golden Section
Why choose Golden Section? Web page or any UI design is an art. Artist will always follow this rule of beauty which has impact on human beings for at least 2,400 years.See http://en.wikipedia.org/wiki/Golden_ratio
![Page 12: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/12.jpg)
Algorithm – Finding “Key Phase” and “Key Phase Time”
1 2 3 4 50
20
40
60
80
Phase Pixel Changing Velocity
VelocityAvg + Std
Phase
Ve
loc
ity
(%
)
Key Phase
1. Get tagging areas of all detected phases (use Golden Section as default)
2. Calculate *phase* pixel changing velocity- V1, V2, V3, … Vn-1 (where Vi = Pixel change ratio of tag i and tag i-1; for i=1, use first phase’s tagging area to compare with a blank image)
3. Find first outliers beyond 1 standard deviation. The corresponding image is called “image tag”. The corresponding phase will be “Key Phase” and corresponding timing will be “Key Phase Time”
- Image Tag = First {ai > [avg + σ(a)]}
4. If the “image tag” found is a blank image (or with only 1 color), loop step 1~3 with other potential tagging area like center, center top, center left, center right, etc.
![Page 13: Page Phase Time Chao (Ray) Feng rayfeng@Microsoft.com @crazychao.](https://reader035.fdocuments.in/reader035/viewer/2022062515/56649c745503460f94927374/html5/thumbnails/13.jpg)
Summary Page Phase Time is a Platform/Browser/Device independent algorithm, and solves the
dynamic web page PLT measurement issue. You may try it with any web page or even mobile apps.
Refer to PPT blog post on O’Reilly for more information.
@crazychao for any feedback.
Thank you!