Breaking news at 1000ms (Guardian)

Breaking news at 1000ms
-----------------------

- Patrick Hamann
- bit.ly/velocity-1000ms


               . '@(@@@@@@@)@. (@@) `  .   '
     .  @@'((@@@@@@@@@@@)@@@@@)@@@@@@@)@
     @@(@@@@@@@@@@))@@@@@@@@@@@@@@@@)@@` .
  @.((@@@@@@@)(@@@@@@@@@@@@@@))@\@@@@@@@@@)@@@  .
 (@@@@@@@@@@@@@@@@@@)@@@@@@@@@@@\\@@)@@@@@@@@)
(@@@@@@@@)@@@@@@@@@@@@@(@@@@@@@@//@@@@@@@@@) `
 .@(@@@@)##&&&&&(@@@@@@@@)::_=(@\\@@@@)@@ .   .'
   @@`(@@)###&&&&&!!;;;;;;::-_=@@\\@)@`@.
   `   @@(@###&&&&!!;;;;;::-=_=@.@\\@@     '
      `  @.#####&&&!!;;;::=-_= .@  \\
            ####&&&!!;;::=_-        `
             ###&&!!;;:-_=
              ##&&!;::_=
             ##&&!;:=
            ##&&!:-
           #&!;:-
          #&!;=
          #&!-
           #&=
   jgs      #&-
            \\#/'
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


- next.theguardian.com
Brad Frost 'planting the responsive seed'
- trialed on m. subdomain
- 7-10inches


In Ocotber alone
********
 - 7000 unique devices/combinations accessing the site
 *******

12-13s load time on old system
3.2 complete load time on new system

Research
- Surveyed 3000 users from key demographics
- Asked about 17 KPIs
- Speed second most important (behind findable content)

Time vs user perception graph
- 10000ms to task abandonment
- 300-1000ms to perceive machine is working

Get below 14kb - within first congestion window, first RTT

Budgeting on rendering
----------------------

- Created lines in the sand
    - Rules that every feature must adhere to
    - Create a common vocabulary to help discuss these rules

1. Core content delivered first
2. Core content within 1000s
3. Every feature must fail gracefully
4. Every request should be measured

Swimlaning
----------

- Isolate every part of the content delivery
- Only allow single blocking DB req for every HTTP request
- Article component protected from other loaded items
    - resilient to failure
    - Can always deliver core content
    - Brad slide!
        - Progressive enhancement is as much about resilience as it is about inclusiveness

3G connection
-------------

- 600ms on taken up by network
- Optimise your critical rendering path
- Make sure javascript is not going to alter the DOM
- CSS is only thing left as critical to rendering path

CSS
---

- Get the CSS down as soon as possible
- It *is* the critical path
    - What's the smallest amount you can get down
    - Inline it
    - Put in the head of the page
    loadCssWithAjax() at foot of the document
    - then inline the response into the document
    - Don't do this if the browser is not modern

localStorage
------------

- cache the css files in localStorage
- key stored as an md5 hash of the file, if doesn't match, reset key
- maintain different head files for different parts of the site

Cookies
-------

- Push cached css into a cookie
- gu doesn't do this because they want to maintain a stateless domain
- don't want complexity or cache fragmentation

https://github.com/addyosmani/critical
https://github.com/pocketjoso/penthouse
https://github.com/filamentgroup/loadCSS

Future
------

HTTP2
    - server push

Font rendering
--------------

- Fonts are the guardian brand
- Guardian Egyptian
- Progressive enhancement is a universal smart default
    http://easy-readers.net/books/adaptive-web-design/
- Base64 encode the string
    - adds 5 fonts into single hop request
    - grunt/webfontjson
    https://github.com/ahume/grunt-webfontjson
- Shouldn't be doing this!
    - should be in the http cache

Coming up...

- Font load events (font load event API)
https://github.com/KenjiBaheux/css-font-rendering

Service Worker
https://github.com/slightlyoff/ServiceWorker


Measuring requests
------------------

- Audit your inline head files
- See cloudwatch
    - sends emails when inline css goes above 14kb budget

RUM (real user metrics)
-----------------------

- Realtime checks
- Ophan
- Started playing with WOFF2 (decrease font size by 40%)
- http://caniuse.com/#feat=woff2
- Use speedcurve
    - synthetic analysis
    - email changes to primary stakeholders
    - the more metrics of your performance you can expose to your business the better this will be
- Resource timing (W3C spec)
    - keep track of 3rd party
- Beacon API (W3C spec)
    - Allow the browser to choose when to send beacons