Performance from the Users Perspective Alois Reitbauer Disclaimer - - PowerPoint PPT Presentation

▶
performance from the user s
SMART_READER_LITE
LIVE PREVIEW

Performance from the Users Perspective Alois Reitbauer Disclaimer - - PowerPoint PPT Presentation

Feb 27, 2023 313 likes •766 views

Performance from the Users Perspective Alois Reitbauer Disclaimer We used to measure here We miss about 80% Your visibility ends here lets look at an example Web Application Delivery Chain Content Internet Server Browser

slide-1
SLIDE 1

Performance from the User‘s Perspective

Alois Reitbauer

slide-2
SLIDE 2

Disclaimer

slide-3
SLIDE 3

We used to measure here

slide-4
SLIDE 4

We miss about 80%

Your visibility ends here

slide-5
SLIDE 5

… let’s look at an example

slide-6
SLIDE 6

Web Application Delivery Chain

Browser 3rd Party Server Internet Content Processing

slide-7
SLIDE 7

Robots for Monitoring

slide-8
SLIDE 8

Monitor from Everywhere

slide-9
SLIDE 9

Robots are not humans

(even if they come close)

slide-10
SLIDE 10

Lack of standards In Browser Measurement Complex Most tools for development/troubleshooting

Challenges Today

slide-11
SLIDE 11

We need this …

slide-12
SLIDE 12

My

slide-13
SLIDE 13

Request Start Time Time-to-First-Byte OnLoad Time Business Event Time Resource Download Time Rendering Time DNS/Network Time JS Execution Time Rendering Time Bandwidth Latency (Geo)Location Browser Info

slide-14
SLIDE 14

… we want to get all this information non intrusively

(aka hacking)

slide-15
SLIDE 15

<html> <head> <script type="text/javascript"> var start = new Date().getTime(); function onLoad() { var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency); } </script> </head> <body onload="onLoad()"> ……

OnLoad Time Measurement

slide-16
SLIDE 16

…… <script type="text/javascript"> downloadStart(“myimg”); </script> <img src=“./myimg.jpg” onload=“downloadEnd(‘myimg’)” /> …..

Resource Time Measurement

slide-17
SLIDE 17

… browsers have all this information, so why not expose it

slide-18
SLIDE 18

W3C Performance Working Group

slide-19
SLIDE 19

Navigation Timing

Basic page navigation information

Resource Timing

Information about page resources (own & third party)

User Timing

Custom actions and high-res timer

Timeline

Unified Access to Performance Data

Web Performance Specs

slide-20
SLIDE 20

Understand Page Loading

slide-21
SLIDE 21

window.performance.timing.

Navigation Timing

slide-22
SLIDE 22

Navigation Timing in Chrome

slide-23
SLIDE 23

Navigation Timing on Windows Mobile

slide-24
SLIDE 24

Let’s try this ourselves ...

slide-25
SLIDE 25

The page is not enough

slide-26
SLIDE 26

window.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].

Resource Timing

slide-27
SLIDE 27

Custom Time Measurements

slide-28
SLIDE 28

mark (markName)

add a new mark with the current timestamp

getMarks (markName)

Retrieve all marks with the specified name. If none is specified all marks will be returned Result Structure:

{ <markName> : [<val1>, <val2>, …] ….. }

Marks

slide-29
SLIDE 29

measure ()

fetchStart -> now

measure (startTime)

startTime -> now

measure(startTime, endTime)

startTime -> endTime

Measures

slide-30
SLIDE 30

Performance Timeline

slide-31
SLIDE 31

1 s 2 s 3 s 4 s 5 s

slide-32
SLIDE 32

Browser Support

slide-33
SLIDE 33

How to send the data back to the server Rendering and JS Execution Implementing the backend services Full browser support More efficient bandwidth measurement Consistency

Open Issues

slide-34
SLIDE 34

if(isBrowserCloseEnabled) { var startTime = new Date().getTime(); while(((new Date().getTime()) - startTime) < 750) { }; }

Blocking data transfer

slide-35
SLIDE 35

Legacy Browsers

slide-36
SLIDE 36

Real world examples what’s possible today

slide-37
SLIDE 37

Identify Geo Hotspots

slide-38
SLIDE 38

Page Error Monitoring

slide-39
SLIDE 39

Third Party Content

slide-40
SLIDE 40

Performance Profiling

slide-41
SLIDE 41

Problem Analytics

slide-42
SLIDE 42

Performance Bookmarklet

http://blog.dynatrace.com/samples/bookmark.html

slide-43
SLIDE 43
slide-44
SLIDE 44

Alois Reitbauer

alois.reitbauer@dynaTrace.com @AloisReitbauer http://blog.dynatrace.com