Chrome Developer Tools
and
Website Performance Analysis
Amanpreet Singh
(@apsdehal)
Setup
Mobile Debugging
Concepts
Critical Rendering Path
How HTML renders?
Characters
Tokens
Nodes
DOM
DOM
<html>
<head>
<link href="k.css">
<meta author="aps"></head>
<body>
<p>Yolo once more</p></body>
How CSS renders?
Characters
Tokens
Nodes
CSSOM
CSSOM
body {
color: #797979;
background: #f2f2f2;
}
p {
text-align: center;
}
ul li {
list-style: none;
}
p span {
font-weight: 500;
}
More specific the CSS, more slower to evaluate
Render Tree
Layout
Screen Alterations
Changes and reloads layout
Paint
Simpler the styles
Easier to paint
Optimizing
DOM and CSSOM
1. Minify
2. Compress
3. Cache
Rendering blocking CSS
Separate CSS according to media and use media tag in links
Blocking JavaScript
Use Async attribute
Elements
Sources
Network
Resources
Console
Timeline
Gaana
Chrome Developer ToolsandWebsite Performance Analysis
By Amanpreet Singh
