Tweet
Tweet

Slide 1

Slide 1 text

Decoding Page Speed Reports Ahmedabad WordPress Meetup - February 2020

Slide 2

Slide 2 text

Full Disclaimer: Nothing I show today is “mine”. Everything is “crowdsourced” in bits & pieces from various documentations, research articles, great talks, and personal conversations. There are many smart folks who worked diligently and shared with the world. I am just continuing the sharing.

Slide 3

Slide 3 text

Howdy, I’m Dhaval! I am a digital wrangler who loves WordPress, and web just like you. Whether you hate it, like it, or love it, Share your views/feedback/queries with me on Twitter @dhavalgshah Wears many hats at

Slide 4

Slide 4 text

Why should you take a nap now?

Slide 5

Slide 5 text

well, because Not a “how to resolve” talk This talk is to uncover under the hood stuff of page speed reports. No plugins or one-size-fits-all solutions Well, heading says that all. #WebPerformance is exciting Look beyond WordPress, and learn more about web!

Slide 6

Slide 6 text

“It’s gonna be legen… wait for it… dary!”

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Performance !== Speed

Slide 9

Slide 9 text

Tools of the trade!

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Why different scores?

Slide 15

Slide 15 text

Because there are variables..

Slide 16

Slide 16 text

Location ● Number of locations ● Geographic spread ● Load on each test location

Slide 17

Slide 17 text

Test Setup

Slide 18

Slide 18 text

onload vs fullyloaded

Slide 19

Slide 19 text

Throttling Strategy Source: https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md Simulated throttling which Lighthouse uses by default, uses a simulation of a page load, based on the data observed in the initial unthrottled load. However, due to the imperfect nature of predicting alternate execution paths, there is inherent inaccuracy Request-level throttling also referred to as Applied throttling in the Audits panel or devtools throttling in Lighthouse configuration, is how throttling is implemented with Chrome DevTools. Packet-level aka Network Shaping able to make the most accurate network simulation. While this approach can model real network conditions most effectively, it also can introduce more variance than request-level or simulated throttling. WebPageTest uses packet-level throttling.

Slide 20

Slide 20 text

Scoring logic pagespeed insights library vs yslow.org vs lighthouse vs the WebPageTest way

Slide 21

Slide 21 text

Rest of the Infrastructure Network throughput Server hardware Browser engine

Slide 22

Slide 22 text

So, score of 100 can be deceiving

Slide 23

Slide 23 text

Performance is a moving target

Slide 24

Slide 24 text

Focus on user centric metrics!

Slide 25

Slide 25 text

Lighthouse scoring Metric Category Weighting first-contentful-paint 20.00% first-meaningful-paint 6.70% speed-index 26.70% interactive 33.30% first-cpu-idle 13.30% max-potential-fid 0.00%

Slide 26

Slide 26 text

But they are improving... Metric Category Weighting first-contentful-paint 25 largest-contentful-paint 20 speed-index 15 interactive 15 total-blocking-time 25

Slide 27

Slide 27 text

Source: https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 by @addyosmani

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

lets dive in the demo

Slide 30

Slide 30 text

Thank you!