6. Elements
Inspect the source of the page
●
Add/edit/delete HTML tags or text
●
Computed style menu → Where do the styles come from for the selected
element?
Styles
●
Enable/disable/add/edit/delete CSS rules
Metric
●
Box model of the element
9. Network
●
Loads all the resources used in the page
Status
●
Shows status code (200, 304, 404)
●
Not Modified = Resource is cached
Size
●
Size = Size of the response
●
Content = Size of the resource itself
Time
●
Time = Time for resource to load
●
Latency = Time between initial request and server's first response
Timeline
●
DNS Lookup : Time spent looking up for the website's IP
●
Connecting : Time spent connecting to that server's IP
●
Sending : Time taken to send the request to server
●
Waiting : Time spent waiting for response from server
●
Receiving : Time taken to receive the resource from server
10. Network
●
Loads all the resources used in the page
●
First element loaded is the document. It shows the initial request and the parsing time
Status
●
Shows status code (200, 304, 404)
●
Not Modified = Resource is cached
Size
●
Size = Size of the response
●
Content = Size of the resource itself
Time
●
Time = Time for resource to load
●
Latency = Time between initial request and server's first response
11. Network
Timeline
3 colors for timeline elements :
●
Blue : Document
●
Green : CSS
●
Violet : Images
●
Orange : Scripts
Timeline statuses and information
DNS Lookup : Time spent looking up for the website's IP
Connecting : Time spent connecting to that server's IP
Sending : Time taken to send the request to server
Waiting : Time spent waiting for response from server
Receiving : Time taken to receive the resource from server
Notice the blue and red lines
- Blue line shows when Document Ready event is triggered
- Red line shows when Windows.Load event is triggered
12. Network
Har Format (HTTP Archive 1.2)
Simple Json Schema, Wich contain all the
Metadata for reconstructing the network waterfall
Use Cases :
Attach to a bug report
Online Har viewer :
http://www.softwareishard.com/har/viewer/
Trend Analyser :
httparchive.org
http://www.httparchive.org/trends.php
Regression test :
log
creator
browser
pages
pageTimings
entries
request
response
cookies
headers
queryString
postData
params
content
cache
timings
Data Structure
13. Sources
●
Basically shows the source code of the page
●
For people who start crying when seeing a minified javascript source, know
that the Pretty Print button might make you smile. Just click here : { }
15. Performance Analysis Tools
The Timeline
Gives you a performance overview
● Memory usage
● Occuring Events
● Rendering
Highlights performance bottlenecks
● Javascript
● Paint time / Reflow
● Etc...
16. Performance Analysis Tools
The Timeline
● Events (shows all recorded events by event category)
● Frames (shows your page's rendering performance)
● Memory (shows your page's memory usage over time)
17. Performance Analysis Tools
The Timeline – Events view
● The Blue Line (domContentLoaded)
● The Red Line (Window load event)
● Events categories :
Loading
Script
Rendering
Painting
18. Performance Analysis Tools
The Timeline – Frame view
It's all about Rendering Performance
60hz = 60 frame per seconde = 1/60 sec = 16.66666 ms
16 ms per frame!!!
19. Performance Analysis Tools
The Timeline – Frame view
By the way...
RequestAnimationFrame = good
SetTimeOut / interval = bad
http://athousandnodes.com/article/using-requestanimationframe-web-browser-animations-instead-settimeout
20. Profiles
You can gather different kind of information by selecting different profiles and recording
what's happening on page load.
Collect JavaScript CPU profile
●
Shows where the execution time is spent in your JS functions
Collect CSS Selector profile
●
Shows how long the selector matching has taken in total and how many times a
certain selection has matched Dom element.
Heap Snapshot
●
Inspecting memory usage of a given page at a given time
21. Performance Analysis Tools
Profile – Heap Snapshot
Object Graph
● Root
● Primary type (boolean,nb,string)
● Object (Key Value)
● Retaining tree
● Distance
● Shallow Size
● Retained Size
Few Terms
Memory leak can
occur, When you keep
a retaining path to a
node by accident
22. Performance Analysis Tools
Profile – Heap Snapshot
4 Differents Views
Summary
Tracking down specific objects based on their “type” (constructor name), because it
shows objects in memory grouped by their constructor name.
Comparison
This view is the best way to verify that deletion is working properly.
Containment
This view is good for analyzing objects that are referenced in the global namespace…
basically anything you put on the global window variable.
Dominator
This view is a good way to verify that your references are all properly contained (no
unexpected references hanging around), and that deleting things is really working
!!! USE THIS IN INCOGNITO!!!
23. Audits
The Audits panel analyses page as it loads and provides suggestions and optimizations
to decrease page load time and increase responsiveness.
Provides audits for
●
Network utilization
●
Web page performance
●
Other audits you might want to add
More complete audits using PageSpeed
24. PageSpeed
●
Free-to-download plugin
●
Much more complete version of the Web Page Performance Analyzer from the
« Audits » tab.
●
Gives you very precise hints on what to do to improve site's performance.
●
Shows actual results of analysis, and sometimes it even does the work of improving
things for you.
●
Minify HTML/CSS/JS → Tells you by how much % you could reduce page size by
compressing/minifying these files.
●
Optimize images → Actually compresses it for you and provides a link to the
optimized image! (Warning : Some compressed image that are provided might have a
huge quality drop, even if it says « lossless compression », so it's still a case by case
process.
To download Page Speed :
https://developers.google.com/speed/pagespeed/insights_extensions
