www.drupaleurope.org

Through the eyes of real-world users

The State of�Drupal Performance

Rick Viscomi

Oh, hello

• Developer Programs Engineer at Google
• Web transparency advocate
• Made YouTube fast ™
• Cowrote “Using WebPageTest”

Rick Viscomi

rviscomi@google.com

@rick_viscomi

3

Why does web performance matter?

4

WPO Stats: Case studies correlating performance and conversions

wpostats.com

5

WPO Stats: Case studies correlating performance and conversions

wpostats.com

“Rebuilding Pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate to signup.”

6

Think with Google: Revenue Impact Calculator

bit.ly/perf-calc

7

Google Webmaster Central Blog

bit.ly/2Dt5Plz

"Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches."

8

Malte Ubl, TL of AMP

bit.ly/2HjmjdU

"Objective metrics collected through �public data sets like the Chrome User Experience Report �can provide for �objective performance and UX data independent of technology."

9

60%

of mobile connections worldwide are 2G

Source: “The New Bar for Web Experiences” at Chrome Dev Summit 2017

​

​

10

Source: https://httparchive.org/reports/state-of-the-web#bytesTotal

11

Loading over 2G would take 2 minutes

Source: https://httparchive.org/reports/state-of-the-web#bytesTotal

1.5 MB

desktop

1.3 MB

mobile

12

53%

of users abandon sites that

take longer than 3 seconds to load

Source: DoubleClick - The need for mobile speed, September 2016

​

​

13

Source: https://httparchive.org/reports/chrome-ux-report?start=latest#cruxOl

14

Source: https://httparchive.org/reports/chrome-ux-report?start=latest#cruxOl

35%

desktop > 3s

51%

mobile > 3s

15

How do we measure performance?

Lab vs Field

Personal vs Public

16

Lab

Field

Mine

Ours

WebPageTest

RUM Analytics

Chrome UX Report

HTTP Archive

17

Lab

Analyzes how a website is built

​

• is it built on Drupal?
• how many bytes does it load?
• does it use a CDN?
• are images optimized?

18

Field

Represents real user experiences

​

• desktop or mobile?
• wifi or 3G?
• fast or slow page load?
• which pages were viewed?

19

Personal

Tools that tell us about particular websites

​

• Chrome Developer Tools
• WebPageTest
• Google Analytics

20

Personal + Lab: WebPageTest

webpagetest.org

21

Personal + Lab: WebPageTest

webpagetest.org

22

Personal + Lab: WebPageTest

webpagetest.org

23

Personal + Lab: WebPageTest

webpagetest.org

24

Personal + Field: Google Analytics

analytics.google.com

25

Personal + Field: Google Analytics

analytics.google.com

26

Public

Tools that tell us about the state of the web

​

• HTTP Archive
• Chrome UX Report

27

Public + Lab: HTTP Archive

httparchive.org

28

Public + Lab: HTTP Archive

29

Public + Lab: HTTP Archive

1.3M

Biweekly

30

Public + Field: Chrome UX Report

31

Public + Field: Chrome UX Report

32

Public + Field: Chrome UX Report

First Paint

First Contentful Paint

DOM Content Loaded

Onload

33

Public + Field: Chrome UX Report

First Input Delay

34

How does�Drupal perform?

in HTTP Archive

35

36

15,044

Drupal sites detected

as of June 15, 2018

37

DRUPAL.HTTPARCHIVE.ORG

Apply a Drupal “lens” to the dataset

Drupal Page Weight report

drupal.httparchive.org/reports/page-weight

39

Drupal Page Weight report

drupal.httparchive.org/reports/page-weight

40

Desktop Metric�As of June 15, 2018

▲ Difference compared to the rest of the web

Value

👉 key takeaway

41

Median Page Weight

▲ 465.3 KB

2174.7 KB

👉 lots more stuff to load

42

Median Page Weight�Growth since January 2016

▲ 4.2 pp

+22.2%

👉 significant growth, more quickly

43

Median CSS Weight

▲ 13.4 KB

65.9 KB

👉 not a lot more CSS

44

Median CSS Weight�Growth since January 2016

▼ 7.7 pp

+21.6%

👉 growing, but more slowly

45

Median JavaScript Requests

▲ 4

23

👉 more JS requests

46

Median JavaScript Weight

▲ 29.7 KB

394.5 KB

👉 slightly heavier scripts

47

Median JavaScript Weight�Growth since January 2016

▼ 0.7 pp

+24.6%

👉 growing, but more slowly

48

Median Image Requests

▲ 4

42

👉 slightly more images

49

Median Image Weight

▲ 361.1 KB

1225.2 KB

👉 much heavier images

50

Median Image Weight�Growth since January 2016

▲ 8.0 pp

+25.3%

👉 heavy and getting heavier more quickly

51

Median Image Savings

▲ 31.0 KB

47.0 KB

👉 not taking full advantage of image optimization

52

How does�Drupal perform?

in the Chrome UX Report

53

33,955

Drupal sites detected

as of August 2018

54

Average First Paint

👉 FP skews slower

55

Average First Contentful Paint

👉 FCP skews slower

56

Average DOM Content Loaded

👉 DCL skews faster!

57

Average Onload

👉 OL skews faster!

58

Average First Input Delay

👉 FID skews faster!

59

Average FCP across CMS

60

Distribution of Drupal FCP

👉 Which one is your website?

61

Distribution of Drupal FID

👉 Which one is your website?

62

G.CO/CHROMEUXDASH

Generate your website’s custom report

How do we move the ecosystem forward?

67

Monitor performance

• track improvements
• flag regressions

68

Celebrate performance

• culture of performance
• publish case studies

69

Work with developers

• document best practices
• Incentivize performance

70

Performance is just�one part of the UX...

Accessibility

​

Security

​

Discoverability

​

Design

​

Interactivity

​

Localization

...and many more

71

Drupal + Technology

17/3/2018

TRACK SUPPORTED BY

Become a Drupal contributor Friday from 9am

• First timers workshop
• Mentored contribution
• General contribution

​

Thanks!

• HTTP Archive�drupal.httparchive.org�
• Chrome UX Report�bit.ly/chrome-ux-report

​

• WebPageTest�webpagetest.org�
• Revenue Impact Calculator�thinkwithgoogle.com/feature/mobile/�
• These slides�bit.ly/drupal-perf-2018

Rick Viscomi

rviscomi@google.com

@rick_viscomi

74