Understanding Page Load / Ziling Zhao (Google)

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Understanding Page Load
Ziling Zhao - Engineer at Google

What I will talk about
● Page Load Latency
○ Time leading from a click to a usable website
● Traditional and dynamic page ...

Who am I?
● Software Engineer on YouTube
○ Working on Desktop and Mobile Web
● Been at Google for 4 ½ years
● Prior to Goo...

Why care about page load speed?
● Customers are from different parts of the world
● People have slow connections and slow ...

Two types of page loads.

Traditional
Page Load
First page load, as well as any
full page load.
Measured starting from when
the request is sent for ...

Dynamic
Page Load
AJAX driven site navigation.
Starts when an action (typically
user driven) triggers a
navigation to the ...

Monitor your
performance.

Response-Time
Rules of Thumb
0.1s - Instantaneous
1s - Seamless
10s - Attention threshold
Jakob Nielsen
http://www.nngroup...

Network
dominates
load time.

Examining at a web page load.

Chrome DevTools - Network Panel

WebPagetest

WebPagetest - highload.co
http://www.webpagetest.org

Hmmm...
WebPagetest results

Page Load Basics
A CDN serves content
closer to your customers.
Low latency. Cookieless,
smaller response/request
size.
Ex...

List static assets not being served off of a CDN

Page Load Basics
Avoid the roundtrip.
● Use a CDN
● Cache static content
● Connection keep-alive
● Use gzip transfers
● Co...

Check for cache headers
These images never change
● Set a max-age or expires header
ETag still incurs a round trip
● Brows...

Page Load Basics
Do your handshake once.
Reduce your transfer size.
● Use a CDN
● Cache static content
● Connection keep-a...

Keep connections open and gzip

Page Load Basics
● Use a CDN
● Cache static content
● Connection keep-alive
● Use gzip transfers
● Compress Images
● Minif...

Image size reduction

Compress Images
Original Image
● JPEG Quality 94
● Resolution: 1500 x 1001 pixels
● File Size: 795KB
Compressed Image
● JP...

Page Load Basics
Use something like
uglify/closure
compiler/YUICompressor
.
● Use a CDN
● Cache static content
● Connectio...

Minify your large javascript files

Probably don't need another version.

Page Load Basics
Chunk your responses if
you have RPCs or heavy
server processing.
Serve static content early.
● Use a CDN...

Transfer-Encoding: Chunked

Page Load Basics
● Use a CDN
● Cache static content
● Connection keep-alive
● Use gzip transfers
● Compress Images
● Minif...

Reduce the number of resources
● This used to be simple
○ HTTP/2 makes things complicated
● Under HTTP1
○ 6~ concurrent co...

SPDY/HTTP2 and QUIC
● Connection multiplexing
○ Allows multiple requests over one socket
■ Only creates one connection per...

Dev Tools

After the first byte

The browser starts getting busy
● The browser must take the CSS and HTML and join
them together
○ HTML is parsed into a DO...

Rendering is (mostly)
single threaded.

The render-thread has a lot to do
● A single render thread (per tab) handles a lot of
important tasks
○ Parsing
○ Styling
...

Page load walkthrough.

After the first byte
● Browser parses
HTML to construct
the DOM (Document
Object Model)
● CSS is parsed to
form the CSSOM
...

After the first byte
● Browser parses
HTML to construct
the DOM (Document
Object Model)
● CSS is parsed to
form the CSSOM
...

Where does the CSS
come from?

The browser has to read the <link> before CSS downloads.

After the first byte
● Browser parses
HTML to construct
the DOM (Document
Object Model)
● CSS is parsed to
form the CSSOM
...

After the first byte
● Browser parses
HTML to construct
the DOM (Document
Object Model)
● CSS is parsed to
form the CSSOM
...

Javascript is
blocking.

Parser + Javascript on the same
thread
● Javascript can read and write to the DOM
○ The parser is cautious and will pause ...

Be careful with JS in <head>
● Stylesheets block painting
● Putting inline <script> right after <link rel="
stylesheet"> w...

After the first byte
● Browser parses
HTML to construct
the DOM (Document
Object Model)
● CSS is parsed to
form the CSSOM
...

The Preloader

The Preloader
● Also known as: Speculative/look-ahead pre-parser
● Making your site run-faster since 2008
● 20%~ page load...

Network Priorities - Chrome
● Network requests are executed in priority order
○ Layout blocking network requests are HIGHE...

Pre-loader - Chunked Transfer
● Chunked encoding + scripts at the end
○ Pre-loader can't see it until the chunk is sent
■ ...

Scripts at footer can load earlier than images

chrome://net-internals#events

Warning: JS module loaders
● Cannot take advantage of the pre-loader
● Script loaders will only load scripts after:
○ Your...

Dynamic Page Transitions

Dynamic page transitions
● Faster than full page loads
○ We can make them even faster
● Fewer network requests
● Higher ex...

Dynamic page load
Jankiness can be
introduced at almost
every step.
When the user expresses
an intent is where it
starts.
...

Dynamic page load
Often, page transitions
require you to clean up or
animate some stuff.
This can involve removing
event l...

Dynamic page load
Note that network
happens on a separate
thread and does not
block the render thread.
The XHR however is ...

Dynamic page load
After the response comes
back an event handler for
the XHR will run and
mutate the web page.
After modif...

DOM mutation
causes work

Dynamic page load
If you inject HTML, work
must be done by the
browser to parse the text
into a DOM tree and
appended.
The...

Dynamic page load
Your dispose call could
have modified the DOM
as well. If so, parse,
layout, and paint will also
occur a...

Dynamic page load
From the user's
perspective, the latency
of going from one page to
the next is the equivalent
of startin...

Dynamic
Page Load
Deals with intra-site navigation.
Typically AJAX driven.
Starts when an action (typically
user driven) d...

Dynamic page load
Just because the DOM
was changed via your
XHR doesn't mean the
page is ready.
You may have loaded
additi...

Dynamic page load
Just because the DOM
was changed via your
XHR doesn't mean the
page is ready.
Often times there are css
...

Dynamic page load
Sometimes there is
additional data to load,
maybe from third party
sources, or just delay
loaded compone...

Keep the
renderThread
idle

Break up long running Javascript
● Delay non-essential javascript
● Debounce event handlers
○ readyStateChange/scroll/resi...

Don't run js for long periods of time.

RecalcStyle
Layout
Paint
Reduce/eliminate parse time
● Using innerHTML requires the browser to parse
HTML text into DOM
○ ...

Parse time blocks on inline scripts.

Make recalcstyle and layout faster
● Mutate as few DOM elements as possible
○ The browser can optimize for subtree changes...

Recalculate Style + Layout in Devtools

Speeding up paints
● Use GPU rasterization on mobile web
○ Use meta viewport tag containing width=device-width
and minimum...

Networking for dynamic pages
● Layout blocking mode isn't active anymore
● Typically fewer requests for dynamic transition...

Questions?

Extra Slides

Real User Metrics
● What does your website feel like to the average user?
○ Are you optimizing the correct area?
● Fully u...

Measuring start and stop
● Start as early as possible.
○ Use the navigation/resource timing APIs.
● Where to stop depends ...

Navigation/Resource Timing API

Profiling tools I use
● DevTools
○ All types of goodies
○ High overhead, accessible, (mostly) easy to use
● chrome://traci...

Chrome DevTools - Network Panel - Throttling

Chrome DevTools - Timeline
● Arguably most powerful tool in devtools
● High overhead
● Observe render thread blocking oper...

Chrome DevTools - Timeline

chrome://tracing
● A very detailed view into Chrome
● Hard to use
○ A lot of data
■ Collects data from all of chrome, not ...

chrome://tracing

Web Tracing Framework
● Written for Google Maps
○ http://google.github.io/tracing-framework/
○ Made for tracking FPS and i...

Web Tracing Framework

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Мониторинг всех слоев web проекта /... by Ontico 1988 views
Developing Software for Persistent ... by Ontico 1280 views
Как мы админа увольняли, или тонкос... by Ontico 1145 views
Высоконагруженная отправка push-уве... by Ontico 1373 views
Javascript-фреймворки: должен остат... by Ontico 1391 views
Как понять, что Agile работает / Ас... by Ontico 1343 views

View on Slideshare

1 of 93 Ad

View on Slideshare

1 of 93 Ad