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...

- 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

Browser opens

6 lanes per origin

exploit that

Use server side rendering for first view

then js to load the rest

avoid client side rendering

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.