prioritize your critical css and images to render your site fast velocity nyc 2013

WebRTC

Jan-Willem MaessenPageSpeed Optimization [email protected]

Prioritize Your Critical CSS and Imagesto render your site fast

Prioritizing Critical CSS and Images Makes Render Fast

jmaessen@google

http://www.youtube.com/watch?v=rcTV-EsNUWY

Inline critical CSS in <head>

Inline low res visible images

Lazy load everything else

jmaessen@google

Users Expect SpeedDelay User reaction

0 - 100 ms Instant

100 - 300 ms Slight perceptible delay

300 - 1000 ms Task focus, perceptible delay

1 s+ Mental context switch

10 s+ I'll come back later...

Our pages should render in 1000 ms or less

Website Abandonment (Strangeloop) Ilya Grigorik (Go to his talk)

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/website-abandonment-happens-after-3-seconds/

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/website-abandonment-happens-after-3-seconds/

BUT

jmaessen@google

Mobile web performance is crippled by network latencyWe need to build fast pages for today’s devices

jmaessen@google

Network Performance Varies Even in the Lab

jmaessen@google

http://www.youtube.com/watch?v=k8SXTZCKKUc

Resource request (second host)

Time(200 ms RTT)

Total data (KB)

DNS lookup 800 ms –

TCP Connection 1000 ms –

First 10 packets (15K) 1200 ms 14K

Next 20 packets (29K) 1400 ms 44K


Optimistic But Useful Model of HTTP Connection

Actually, all these numbers exceed the 384Kbit/s (48K/s) bandwidth of old 3G networks.

What is Happening Time(200 ms RTT)

Total data (KB)

Control plane (200-2500 ms) –

DNS lookup 200 ms –





Resource request (original host)

Time(200 ms RTT)

Total data (KB)





If your site is reached via a mobile redirect, you’re already down here.

jmaessen@google

@igrigorik

1. One RTT render for above the fold!2. No redirects + fast server response (<200 ms)3. Must optimize critical rendering path

a. Inline critical CSSb. Remove blocking JavaScriptc. Prioritize above-the-fold images

We don't need to render the entire page...

We need to render above the fold content!

What CSS will affect the above the fold HTML?What HTML will be above the fold after styling?How large is each above the fold image?Will JavaScript affect the content of the DOM?

Why can’t the browser do this?

jmaessen@google

Step 1: Prioritize Your Critical CSS

jmaessen@google

http://www.youtube.com/watch?v=0nwopEYFhko

Let's look at that simple example...

<!doctype html>

<html>

<head>

<title>prioritize_critical_css example</title>

<link rel="stylesheet" href="styles/blue.css">

<link rel="stylesheet" href="styles/big.css">

<style>

@import url(styles/all_using_imports.css);

</style>

<link rel="stylesheet" href="

styles/rewrite_css_images.css">

</head>

<body>

<div class="foo" style="display:inline-block;"></div>

Prioritize Critical CSS

…<body>

.blue {color: blue;}

prioritize_critical_css.htmlstyles/blue.css

.big { font-size: 8em; }

.very_large_class… { font-size: 8em; }…(lots more unused rules)

styles/big.css

@import url(yellow.css);@import url(blue.css);@import url(bold.css);

styles/all_using_imports.css

.foo { background-image: url(../images/BikeCrashIcn.png); width: 100px; height: 100px;}

styles/rewrite_css_images.css

jmaessen@google

http://www.modpagespeed.com/mod_pagespeed_example/prioritize_critical_css.html?PageSpeed=off


http://www.modpagespeed.com/mod_pagespeed_example/styles/blue.css


http://www.modpagespeed.com/mod_pagespeed_example/styles/big.css


http://www.modpagespeed.com/mod_pagespeed_example/styles/all_using_imports.css


http://www.modpagespeed.com/mod_pagespeed_example/styles/rewrite_css_images.css

What happens when the browser loads our page

<!doctype html>

<html>

<head>




<style>

@import url(styles/all_using_imports.css);

</style>

<link rel="stylesheet" href="

styles/rewrite_css_images.css">

</head>

<body>



…<body>

prioritize_critical_css.htmlstyles/blue.css

styles/big.css

@import url(yellow.css);@import url(blue.css);@import url(bold.css);

styles/all_using_imports.css

.foo { background-image: url(../images/BikeCrashIcn.png); width: 100px; height: 100px;}

styles/rewrite_css_images.css

First render: 1.8s

jmaessen@google

Inline the CSS that is actually used on the page

<!doctype html>

<html>

<head>


<style>.blue{color:blue}</style>

<style>.big{font-size:8em}</style>

<style>.blue{color:blue}.bold{font-weight:bold}</style>

<style>.foo{background-image:url(images/BikeCrashIcn.png);

width:100px;height:100px}</style>

</head>

<body>



…<body>

prioritize_critical_css.html

First render: 0.7s

jmaessen@google

● Around 40% of the CSS rules are used in a typical page

● Tweaking a PHP script to inline all the CSS should be easy

● Warning: 44K of compressed CSS on typical page

As always, test and measure – do what the data tells you for your site.

Simplest Option: Just Inline All the CSS

HTTP Archive data on CSS sizes jmaessen@google

http://httparchive.org/trends.php#bytesCSS&reqCSS

http://httparchive.org/trends.php#bytesCSS&reqCSS

@igrigorik

Identify critical CSS via an Audit (Manual)

DevTools > Audits > Web Page Performance

Inline the critical styles...

Let PageSpeed Find Critical CSS Automatically

ModPagespeedEnableFilters prioritize_critical_css # Apache

pagespeed EnableFilters prioritize_critical_css; # Nginx

PageSpeedServer

Client Browser

InstrumentedPage

Beacon result:List of critical selectors

Downside: first access to the page won’t be optimized.Upside: will be based on actual client browser behavior

jmaessen@google

Option 1: Include them in your critical CSS● Careful: they may not necessarily show up in an audit!

Option 2: Lazyload them● Load before we run the relevant JavaScript● Lazyload also works for non-screen styles (eg print)

Rules That Are Triggered by JavaScript Actions

jmaessen@google

How Not to Lazy Load CSS

<!doctype html>

<html>

<head>


…

</head>

<body>



…



<link rel="stylesheet" href="styles/all_using_imports.css">

<link rel="stylesheet" href="styles/rewrite_css_images.css" media="all">

</body>

</html>


The browser will notice the stylesheets when it reaches the bottom of the page and block rendering –

It can’t tell that none of the rules will apply to the page.

jmaessen@google

How PageSpeed Optimization Library Lazy Loads CSS

<!doctype html>

<html>

<head>


…

</head>

<body>



…

<noscript class="psa_add_styles">



<link rel="stylesheet" href="styles/all_using_imports.css">

<link rel="stylesheet" href="styles/rewrite_css_images.css" media="all">

</noscript>

<script>...Move <noscript> to a div...</script>

</body>

</html>


The noscript block keeps the browser from downloading the CSS until the script runs.

This blocks rendering when JS is switched off

But the page continues to work correctly

You can skip this for non-screen media= attributes.

jmaessen@google

Step 2: Lazy Load Below the Fold Images

jmaessen@google

http://www.youtube.com/watch?v=8hrtMOGXjAo

Another very simple example...

<!doctype html>

<html><head>...</head>

<body>

* * * * *

<img src="images/BikeCrashIcn.png"> 

* * * * *


* * * * *


* * * * *


* * * * *


* *

Should be below the fold...

* *

<img src="images/Puzzle.jpg"> 

<img src="images/IronChef2.gif"> 

<img src="images/Cuppa.png"> 

</body> </html>

lazyload_images.html

images/BikeCrashIcn.png

images/Puzzle.jpg

images/IronChef2.gif

images/Cuppa.png

jmaessen@google

http://www.modpagespeed.com/mod_pagespeed_example/lazyload_images.html?PageSpeed=off

http://www.modpagespeed.com/mod_pagespeed_example/lazyload_images.html?PageSpeed=off

http://www.modpagespeed.com/mod_pagespeed_example/images/BikeCrashIcn.png

http://www.modpagespeed.com/mod_pagespeed_example/images/BikeCrashIcn.png

http://www.modpagespeed.com/mod_pagespeed_example/images/Puzzle.jpg

http://www.modpagespeed.com/mod_pagespeed_example/images/Puzzle.jpg

http://www.modpagespeed.com/mod_pagespeed_example/images/IronChef2.gif

http://www.modpagespeed.com/mod_pagespeed_example/images/IronChef2.gif

http://www.modpagespeed.com/mod_pagespeed_example/images/Cuppa.png

http://www.modpagespeed.com/mod_pagespeed_example/images/Cuppa.png

Lazyloading All the Images

<!doctype html>


<body>

* * * * *

<script>...lazyload code...</script>

<img lazy_src="images/BikeCrashIcn.png" width="100" height="100"> 

* * * * *


* * * * *


* * * * *


* * * * *


* *


* *

<img lazy_src="images/Puzzle.jpg" width="1023" height="766"> 

<img lazy_src="images/IronChef2.gif" width="192" height="256"> 

<img lazy_src="images/Cuppa.png" width="65" height="70"> 


jmaessen@google

http://www.modpagespeed.com/mod_pagespeed_example/lazyload_images.html?PageSpeed=on&PageSpeedFilters=lazyload_images,insert_image_dimensions&foo=bar%5C

http://www.modpagespeed.com/mod_pagespeed_example/lazyload_images.html?PageSpeed=on&PageSpeedFilters=lazyload_images,insert_image_dimensions&foo=bar%5C

Without image dimensions (left), page reflows on image load

Include Dimensions with Lazy Loaded Images

jmaessen@google

Don’t Lazy Load Images Above the Fold!

<!doctype html>


<body>

* * * * *

<img src="images/BikeCrashIcn.png" width="100" height="100"> 

* * * * *


* * * * *


* * * * *


* * * * *


* *


* *






Remember: We’re trying to get the browser to fetch the visible page content first!

jmaessen@google

http://www.modpagespeed.com/mod_pagespeed_example/lazyload_images.html?PageSpeed=on&PageSpeedFilters=lazyload_images,insert_image_dimensions

http://www.modpagespeed.com/mod_pagespeed_example/lazyload_images.html?PageSpeed=on&PageSpeedFilters=lazyload_images,insert_image_dimensions

Low-Quality Inline Images Above the Fold + Lazy Load

<!doctype html>


<body>

* * * * *

<img lazy_src="images/BikeCrashIcn.png" src="data:image/jpg;..." width="100" height="100"> 

* * * * *


* * * * *


* * * * *


* * * * *


* *


* *






jmaessen@google

http://www.modpagespeed.com/mod_pagespeed_example/lazyload_images.html?PageSpeed=on&PageSpeedFilters=lazyload_images,insert_image_dimensions,lazyload_images,resize_mobile_images

http://www.modpagespeed.com/mod_pagespeed_example/lazyload_images.html?PageSpeed=on&PageSpeedFilters=lazyload_images,insert_image_dimensions,lazyload_images,resize_mobile_images

Effect of our Optimizations: Visual Completeness

Before: 6.4s

With lazy load: 4.7s

Note: Mobile devices should load all images by OnLoad to avoid radio restart.

jmaessen@google

Let PageSpeed Find Above the Fold Images ModPagespeedEnableFilters lazyload_images,insert_image_dimensions ModPagespeedEnableFilters resize_mobile_images # Apache

pagespeed EnableFilters lazyload_images,insert_image_dimensions; pagespeed EnableFilters resize_mobile_images; # Nginx

PageSpeedServer

Client Browser

InstrumentedPage

Beacon result:List of visible images

Clients vote on what images are visible above the fold

jmaessen@google

Lazy load your images

Use low-quality inline placeholder images above the fold

Load all images before radio offjmaessen@google

Page Reflows due to JavaScript are a problemStatically sizing dynamically loaded areas eliminates page jankConsider loading JS that affects the page earlierBut use asynchronous techniques (eg async ads load)

A Note About JavaScript

jmaessen@google

Critical CSS (inlined)Above the fold HTML with inline image previewsBelow the fold HTML with image dimensionsAbove the fold imagesBelow the fold imagesNon-critical CSSJavaScript*

Ideal Page Load Order

jmaessen@google

In parallel

What This Looks Like on a Real Site

jmaessen@google

http://www.radiocity.com/tickets

What This Looks Like on a Real Site

jmaessen@google

4.4s: Unopt first render

1.8-1.9s: First Render

2.2s: Low Res Banner

2.4s: Full Res Banner

3.7s: Dynamic Image

http://www.radiocity.com/tickets.html

http://www.radiocity.com/tickets



Inline critical CSS in <head>

Inline low res visible images

Lazy load everything else

jmaessen@google

email [email protected] mod_pagespeed http://www.modpagespeed.com nginx_pagespeed http://ngxpagespeed.comPageSpeed Service https://developers.google.com/speed/pagespeed/service

Thank you!Slides @

http://www.modpagespeed.com

http://ngxpagespeed.com

https://developers.google.com/speed/pagespeed/service

prioritize your critical css and images to render your site fast velocity nyc 2013

Technology

critical css href

css example

critical css careful

css rules

compressed css

css sizesjmaessen

lazy load css

critical styles