How important is WPO?

The reason why we build stuff

40%

of users abandon an article if it doesn't load after six seconds

Danny Bernstein, Google

In terms we can understand

load_time > 6000 && 
Math.random() < .4 ?
fail() : profit()

500ms delay

+26% user’s frustration

Source: Radware

In terms we can understand

500ms delay

-20% Google’s traffic

http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

+100ms delay

-1% Amazon’s sales

http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

$1070000000

2015

-2.2s page load

+15% downloads

Source: Firefox

+60% faster

+14% donations

Source: Obama Campaign

- The Google

we’ve decided to take site speed into account in our search rankings

https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

My sites are fast enough...

What even is page speed?

User satisfaction metrics are based on Perception, ATF

First Tool

Moar Tools

Where to optimize?

Optimizing
on the server

Optimizing
on the client

Perception

vs.

Performance

Performance

Perception

Performance

Perception

Usability Engineering 101

RAIL

• Respond to user input within 100ms
• Else
  • connection between action and reaction is broken, "laggy"
  • includes click, tap, scroll, swipe
• Do not block the user, do expensive work in the background (if possible)

• Render frames every 16ms
• Includes scrolling, swiping
• Every frame must
  JS > Style > Layout > Paint > Composite
• Each frame has 16.66ms
• You really have 10ms
• Within the 100ms time, precalculate if you can

• Maximize idle time
• Use idle time to complete deferred work
• Load BTF content
• Group deferred work % 50 ms
  • If user interacts, response is > priority
  • Ensure instant response

• Load ATF in < 1 second
• Else
  • attention loss
  • broken context
• Optimize the critical rendering path
  • unblock rendering

#WebPerf

optimize-fu

Rule #1: User First

If it's a "Dirty Hack"

and it makes UX better   

Do it!

Devs must remember...

JS blocks parsing HTML

<script>

1. html starts parsing
2. hits <script>
3. html pauses parsing
4. download js (if external)
5. execute js (blocks)
6. html continues parsing

<script defer>

1. html starts parsing
2. hits <script>
3. html continues parsing
4. while downloading js (if external)
5. html finishes parsing
6. deferred js executes in order

<script async>

1. html starts parsing
2. hits <script>
3. html continues parsing
4. while downloading js (if external)
5. html pauses parsing to execute js
6. html completes parsing

Use <script async>

if it doesn't depend on script order

else use <script defer>

http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Responsive Images

<picture>

<picture>
  <source media="(min-width: 40em)"
    srcset="logo.large.png 1x, logo.large.2x.png 2x">
  <source 
    srcset="logo.small.png 1x, logo.small.2x.png 2x">
  <img src="logo.png" alt="DevLeague">
</picture>

https://responsiveimages.org

Responsive Images

<img srcset sizes>

<img src="logo.small.png"
     srcset="logo.large.png 1024w, logo.medium.png 640w, logo.small.png 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="DevLeague">

https://responsiveimages.org

Intrinsic Placeholders

<picture> + intrinsic ratios

<picture class="intrinsic intrinsic--square">
  <source media="(min-width: 500px)" srcset="logo.large.png">
  <img class="intrinsic-item" srcset="logo.small.png" alt="">
</picture>

http://daverupert.com/2015/12/intrinsic-placeholders-with-picture

LQIP

low quality image placeholders

http://www.guypo.com/introducing-lqip-low-quality-image-placeholders/

1. Prepare the low quality images (server-side)
2. Load the low quality images (client-side)
3. Load the high quality images (client-side)

Progressive loading

Blur effect

<figure>
  <div>
    <div/> <!-- this div keeps the aspect ratio so the placeholder doesn't collapse -->
    <img/> <!-- this is a tiny image with a resolution of e.g. ~27x17 and low quality -->
    <canvas/> <!-- takes the above image and applies a blur filter -->
    <img/> <!-- the large image to be displayed -->
    <noscript/> <!-- fallback for no JS -->
  </div>
</figure>

https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Facebook's 200 Byte

Preview Photos

https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

this helped speed up profile and page loads by 30 percent

https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

- from the Google webmaster guidelines

Make sure that your web server correctly supports the

If-Modified-Since HTTP header.

The If-Modified-Since header is sent to a server as a conditional request.

if ( contentChanged )
  respond.status(200).send(content);
else
  respond.status(304);

https://varvy.com/ifmodified.html

Use Service Workers as a proxy on the client

Create your own Cache Policy

http://www.html5rocks.com/en/tutorials/service-worker/introduction/

Register a serviceWorker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {
      console.log(
        'ServiceWorker registered with scope: ',
        registration.scope
      );
  }).catch(function(err) {
    console.log(
      'ServiceWorker registration failed: ',
      err
    );
  });
}

chrome://inspect/#service-workers

Open Cache, Cache urls

var CACHE_NAME = 'my-app-cache-v1';
var urlsToCache = [
  '/',
  '/css/bundle.css',
  '/js/bundle.js'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

Cache Hit, or return Request

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        return fetch(event.request);
      }
    )
  );
});

There's a proxy in your browser

https://docs.google.com/presentation/d/1GNLc4oRZzazq4Th8vsH3v5GekAbKWsxIXHbNtQFFG-c/present

gzip all the plaintext

zopfli all the plaintext

• compression only
• use existing methods to decompress
• good for (pre) compressing once
• very slow, not good for on the fly compression

• uncompressed: 106,272 bytes

• mod_deflate: 28,732 bytes (27%)

• gzip -9: 28,062 bytes (26%)

• Zopfli: 27,033 bytes (25%)

brotli all the plaintext

What about images?

png, lossless, everyone uses it

FLIF

http://flif.info

• 14% smaller than lossless WebP,
• 22% smaller than lossless BPG,
• 33% smaller than brute-force crushed PNG files (using ZopfliPNG),
• 43% smaller than typical PNG files,
• 46% smaller than optimized Adam7-interlaced PNG files,
• 53% smaller than lossless JPEG 2000 compression,
• 74% smaller than lossless JPEG XR compression.

Browser opens

6 lanes per origin

Domain Sharding

Use server side rendering for first view

then js to load the rest

avoid client side rendering

page load performance decrease 5x

https://facebook.github.io/react/docs/environments.html

const React = require('react');
const ReactDOMServer = require('react-dom/server');

...

app.get('/', (req, res) => {
  const element = React.createElement('div', null, 'Hello World!');
  res.send(ReactDOMServer.renderToString(element));
});

Better Perceived Performance

https://universal.angular.io

Optimized for Search Engines

Site Preview

facebook, twitter, etc.

CPU Intensive JS

setTimeout( doSomeHeavyLifting, 0);

releases control from the main thread

pushes it to the end

Use a Worker

var worker = new Worker(‘heavy.js’);
worker.addEventListener(‘message’, workDone);

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Responsive Web

is not the goal

It's just a tool

Responsive Web Design

for designers and developers

Responsive Web
does not have performance as a goal

People who say they want a Responsive Site

Actually want

mobile-friendly

HTTP/2

HTTP/2

• Header Compression
• TCP connection reuse
• Push to Cache
• Early tests show 15-60% load time improvement

https://www.cloudflare.com/http2/

Link: </css/style.css>; rel=preload;

https://www.cloudflare.com/http2/server-push