search

Speed-Patterns / speed-patterns

A collection of design patterns for fast web sites
https://www.speedpatterns.com/
33 stars 2 forks source link

DRAFT New Pattern: See and Do #8

Open vanux opened 6 years ago

vanux commented 6 years ago

From the user point of view, it is assumed that once the page elements become visible (See), they should be able to interact with that page (do). However, due to the occurrence of JavaScript executing during the page render process, the page may become unresponsive. (long Tasks)

New metrics available in Chrome allow to measure the start and end times of the interactive periods.

Info on Long Tasks - https://www.w3.org/TR/longtasks/

Examples that follow this pattern https://www.webpagetest.org/video/compare.php?tests=171118_PF_31bac9800e705b7af7449fb2fc2a3810-r:1-c:0

Examples that don't follow this pattern https://www.webpagetest.org/video/compare.php?tests=171120_7E_5e237d75a03b977d9ddb3a7cf3691e99-r:1-c:0

sergeychernyshev commented 6 years ago

What's the best way to visualize this?

I feel that WebPageTest might not be doing great job here or we need to extract part of the report specifically. What is that part? CPU utilization? frame rate?

vanux commented 6 years ago

Agreed the reporting/visualization can be improved

Here is an idea.

Denote the percentage times in which the page is interactive or not interactive during a certain range of time - e.g from when the page elements are visible and the user may want to interact with it, to the time it is visually complete. Based on some very simple usability testing I have done shows that its difficult to determine when a user may want to interact with the page. Users may often not want to wait until the page is 75% complete to interact and may want to interact with the page much before then. This means it would be important to help make sure the page is interactive when desired.

So, if we came up with a number that says something like "the page was 22% interactive during this range." It would help dev and business understand this is not the best experience. FYI I have discovered that the actual times for interactive are available via JSON in WPT. Perhaps these metrics could be a bar graph or pie chart to show % interactive and % not interactive.

Another idea is to recommend that you should incorporate user testing to determine the times when a user may interact with the page. I can work on a chart to show the idea. The concept is to show that xx% of users want to interact with the page in these time ranges and compare to the interactive.

I've also attached a chart that incorporates the Webpagetest % Visual progress and overlayed the times in which the page is not interactive in red. This was created by calculating the times from the JSON file and creating the bars. chart2

From: Sergey Chernyshev notifications@github.com Sent: Tuesday, January 2, 2018 7:33 AM To: Speed-Patterns/speed-patterns Cc: vanux; Author Subject: Re: [Speed-Patterns/speed-patterns] DRAFT New Pattern: See and Do (#8)

What's the best way to visualize this?

I feel that WebPageTest might not be doing great job here or we need to extract part of the report specifically. What is that part? CPU utilization? frame rate?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FSpeed-Patterns%2Fspeed-patterns%2Fissues%2F8%23issuecomment-354767142&data=02%7C01%7C%7C0103d123501541be0f4308d551e562bf%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636504967993041373&sdata=AJgTfHiccyHddDPxOOgvgr2ndXuoRP0lVOOiEFJm8JA%3D&reserved=0, or mute the threadhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKtjYmfFD7dP-fZ6LAx26kGt5onFSbZUks5tGjAdgaJpZM4RN3RG&data=02%7C01%7C%7C0103d123501541be0f4308d551e562bf%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636504967993041373&sdata=YUwwtzRTUvgw4MOlFJ48R4tWsuHA00wGCt3M%2BUlpzGA%3D&reserved=0.