Front end

↕

Back end

Front end: CSS, JS, images, fonts … (assets)

↕

Back end: HTML

80–90% of time is spent on front end

⬇

Bigger speed gains on front end than on back end

Performance

↕

Perceived performance

1. TTFB = Time to First Byte
2. TTAP = Time to Assets Prefetching
3. TTI = Time to Interact
4. Page load time = total load time: until finished loading

First, optimize front end in typical way:

• optimize images
• minify & aggregate CSS/JS
• fewer HTTP requests (even for HTTP/2 in 2016)
• …

… but if the back end is already slow, the front end alone cannot make it fast.

Intersection of front-end & back-end performance

3. BigPipe

Drupal needs to do almost nothing before replying, BUT continues to do things afterwards

• TTFB: low 10s of ms (~ server, typical: 15-40)
• TTAP: 10s of ms
• TTI: low 100s of ms (~ front end)

• For authenticated users (personalized pages)
• Candidate for Drupal 8.1 or 8.2

How?

At a high level

Cacheability metadata in Drupal 8

• Cache tags (data dependencies)
• Cache contexts (context dependencies)
• Cache max-age (time dependencies)

Cache tags + reverse proxy

Cache tags: efficient invalidation of Varnish/CDN

Page cache = reverse proxy ⇒ tested!

http://wimleers.com/talk/caching-at-the-edge-cdns-for-everyone

Improved Render API

• rendering in isolation: "lazy builders"
• auto-placeholdering

    renderer.config:
       auto_placeholder_conditions:
         max-age: 0
         contexts: ['session', 'user']
         tags: []

renderable in isolation
+
poor cacheability
⬇
deferred rendering via BigPipe

BigPipe details: Acquia webinar in 2 weeks: