Why Slow Sites Are Expensive

by Koen Van den Wijngaert

Slide 1

Slide 1 text

Why Slow Sites are Expensive By Koen Van den Wijngaert

Slide 2

Slide 2 text

PageSpeed Insights opti.to/psi

Slide 3

Slide 3 text

PageSpeed Insights

Slide 4

Slide 4 text

More tools WebPageTest.org Lighthouse

Slide 5

Slide 5 text

I could be on Snapchat right now...

Slide 6

Slide 6 text

What’s the cost?

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Ad Quality Score * Unoﬃcial numbers - Usability - Loading speed Higher Quality Scores typically lead to lower costs and better ad positions. “ “

Slide 9

Slide 9 text

WPENGINE.COM

Slide 10

Slide 10 text

In short, speed equals revenue “ “

Slide 11

Slide 11 text

What’s fast? Rule of Three Ones ● 0.1 second ● 1.0 second ● 10 seconds

Slide 12

Slide 12 text

Indirect costs Fewer conversions More support issues Missed opportunities (brand damage) Loss of loyal customers Lower search result rankings As of July ‘18

Slide 13

Slide 13 text

Websites 101

Slide 14

Slide 14 text

browser server DNS wpbelgium.be? 94.130.138.229! * slightly simpliﬁed Response Request Building the Page - Parse the page - Fetch extra assets - Build stuﬀ * DOM * CSSOM => Render Tree Rendering the Page - Style + Layout - Paint + Compositing

Slide 15

Slide 15 text

Let’s speed things up

Slide 16

Slide 16 text

Server / Backend ✔ Enable HTTPS + HTTP2 For parallel and reusable requests ✔ Make use of HTTP caching ➢ Static assets ➢ Full pages ➢ API responses ✔ Cache slow operations ➢ Slow database queries ➢ Partial templates ✔ Perform slow tasks in background

Slide 17

Slide 17 text

Network & DNS DNS Not Optimized Optimized

Slide 18

Slide 18 text

Network & DNS Top DNS Resolvers ✔ Use a fast DNS Provider ✔ Consider using a CDN ✔ Reduce number of requests ✔ Reduce size of requests ➢ Miniﬁcation / Ugliﬁcation of text-based assets ➢ Use compression ➢ Optimize images ➢ Leverage HTTP caching ✔ Use Service Workers Data: Europe / May 2019 - DNSPERF.COM

Slide 19

Slide 19 text

But wait… there’s more!

Slide 20

Slide 20 text

Frontend: The Browser The unsung hero

Slide 21

Slide 21 text

Frontend Performance Use the right metrics. Time to First Byte * Strictly speaking not frontend First Paint and First Contentful Paint Yay, no more staring at a blank page! First Meaningful Paint Most important parts / Hero Elements Time to Interactive Page is now useable!

Slide 22

Slide 22 text

It’s all about perception

Slide 23

Slide 23 text

WPBelgium.be Time to First Byte First Paint and First Contentful Paint 1,7 s

Slide 24

Slide 24 text

WPBelgium.be Time to First Byte First Paint and First Contentful Paint 1,9 s

Slide 25

Slide 25 text

WPBelgium.be Time to First Byte First Paint and First Contentful Paint 2,2 s

Slide 26

Slide 26 text

WPBelgium.be Time to First Byte First Paint and First Contentful Paint First Meaningful Paint Time to Interactive 2,6 s

Slide 27

Slide 27 text

Optimizing your frontend… Wake up, this is the important part! It’s easy! Limit the critical rendering path

Slide 28

Slide 28 text

Critical Rendering Path The intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels.

Slide 29

Slide 29 text

Optimizing the CRP ✔ Avoid render blocking CSS ➢ Avoid @import ➢ Media types ➢ Media queries ➢ Inline critical styles and lazy load styles ✔ Avoid parser blocking JavaScript ➢ Defer parsing by using defer and async keywords ➢ Even applies to inline scripts! ➢ Avoid long running JavaScript ✔ Reduce the CRP Length

Slide 30

Slide 30 text

Minimize the Critical Request Depth

Slide 31

Slide 31 text

Extra tips ✔ At least cache the CRP ✔ rel=”preload” ✔ Server push ✔ Inline small assets ✔ Deﬁne your image sizes ✔ Use lazy loading ✔ Prefer the system font stack