Drupal Frontend Performance & Scalability DrupalCamp Ohio 2012 - - PowerPoint PPT Presentation

▶
drupal frontend performance scalability
SMART_READER_LITE
LIVE PREVIEW

Drupal Frontend Performance & Scalability DrupalCamp Ohio 2012 - - PowerPoint PPT Presentation

Jul 23, 2023 172 likes •766 views

Drupal Frontend Performance & Scalability DrupalCamp Ohio 2012 Christefano Reyes christo@larks.la, @christefano @christefano / @LarksLA / @DowntownDrupal / @Droplabs Drupal Frontend Performance & Scalability Who's Your Presenter?

slide-1
SLIDE 1

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Christefano Reyes

christo@larks.la, @christefano

DrupalCamp Ohio 2012

slide-2
SLIDE 2

Drupal Frontend Performance & Scalability

  • Who's Your Presenter?

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-3
SLIDE 3

Drupal Frontend Performance & Scalability

  • Who's Your Presenter?
  • Why We Care About Performance

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-4
SLIDE 4

Drupal Frontend Performance & Scalability

  • Who's Your Presenter?
  • Why We Care About Performance
  • Frontend vs. Backend Performance

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-5
SLIDE 5

Drupal Frontend Performance & Scalability

  • Who's Your Presenter?
  • Why We Care About Performance
  • Frontend vs. Backend Performance
  • Anatomy of a Web Page

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-6
SLIDE 6

Drupal Frontend Performance & Scalability

  • Who's Your Presenter?
  • Why We Care About Performance
  • Frontend vs. Backend Performance
  • Anatomy of a Web Page
  • What Happens During a Page Load

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-7
SLIDE 7

Drupal Frontend Performance & Scalability

  • Who's Your Presenter?
  • Why We Care About Performance
  • Frontend vs. Backend Performance
  • Anatomy of a Web Page
  • What Happens During a Page Load
  • Tools and Techniques

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-8
SLIDE 8

Drupal Frontend Performance & Scalability

  • Who's Your Presenter?
  • Why We Care About Performance
  • Frontend vs. Backend Performance
  • Anatomy of a Web Page
  • What Happens During a Page Load
  • Tools and Techniques
  • The Future of HTTP

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-9
SLIDE 9

Drupal Frontend Performance & Scalability

  • Who's Your Presenter?
  • Why We Care About Performance
  • Frontend vs. Backend Performance
  • Anatomy of a Web Page
  • What Happens During a Page Load
  • Tools and Techniques
  • The Future of HTTP
  • Questions and Comments

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-10
SLIDE 10

Drupal Frontend Performance & Scalability

Who's Your Presenter?

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-11
SLIDE 11

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Christefano Reyes

  • Drupal Evangelist
  • Drupal.org/user/104
  • @christefano

Who's Your Presenter?

slide-12
SLIDE 12

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Exaltation of Larks

  • CEO, Co-Founder
  • www.larks.la
  • @LarksLA

Christefano Reyes

  • Drupal Evangelist
  • Drupal.org/user/104
  • @christefano

Who's Your Presenter?

slide-13
SLIDE 13

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Exaltation of Larks

  • CEO, Co-Founder
  • www.larks.la
  • @LarksLA

Christefano Reyes

  • Drupal Evangelist
  • Drupal.org/user/104
  • @christefano

Downtown Los Angeles Drupal

  • Drupal Adventure Guide
  • DowntownDrupal.org
  • @DowntownDrupal

Who's Your Presenter?

slide-14
SLIDE 14

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Exaltation of Larks

  • CEO, Co-Founder
  • www.larks.la
  • @LarksLA

Droplabs

  • Lead Burrito Analyst
  • Droplabs.net
  • @Droplabs

Christefano Reyes

  • Drupal Evangelist
  • Drupal.org/user/104
  • @christefano

Downtown Los Angeles Drupal

  • Drupal Adventure Guide
  • DowntownDrupal.org
  • @DowntownDrupal

Who's Your Presenter?

slide-15
SLIDE 15

Drupal Frontend Performance & Scalability Why We Care About Frontend Performance

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-16
SLIDE 16

Drupal Frontend Performance & Scalability

  • Amazon: +100ms in Page Load Equals -1% in Sales

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What We Care About Frontend Performance

slide-17
SLIDE 17

Drupal Frontend Performance & Scalability

  • Amazon: +100ms in Page Load Equals -1% in Sales
  • Google: +500ms in Page Load Equals -20% Searches

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What We Care About Frontend Performance

slide-18
SLIDE 18

Drupal Frontend Performance & Scalability

  • Amazon: +100ms in Page Load Equals -1% in Sales
  • Google: +500ms in Page Load Equals -20% Searches
  • Google Maps: -30% in Filesize Equals +30% Requests

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What We Care About Frontend Performance

slide-19
SLIDE 19

Drupal Frontend Performance & Scalability

  • Amazon: +100ms in Page Load Equals -1% in Sales
  • Google: +500ms in Page Load Equals -20% Searches
  • Google Maps: -30% in Filesize Equals +30% Requests

Faster Websites → Faster Users → More Usage

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What We Care About Frontend Performance

slide-20
SLIDE 20

Drupal Frontend Performance & Scalability

  • Amazon: +100ms in Page Load Equals -1% in Sales
  • Google: +500ms in Page Load Equals -20% Searches
  • Google Maps: -30% in Filesize Equals +30% Requests

Faster Websites → Faster Users → More Usage

  • Nielsen Norman Group:

○ Speed (Especially Slowness) Affects Brand Identity

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What We Care About Frontend Performance

slide-21
SLIDE 21

Drupal Frontend Performance & Scalability

  • Amazon: +100ms in Page Load Equals -1% in Sales
  • Google: +500ms in Page Load Equals -20% Searches
  • Google Maps: -30% in Filesize Equals +30% Requests

Faster Websites → Faster Users → More Usage

  • Nielsen Norman Group:

○ Speed (Especially Slowness) Affects Brand Identity ○ Delays Move Websites Out Of the User's Control

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What We Care About Frontend Performance

slide-22
SLIDE 22

Drupal Frontend Performance & Scalability

  • Amazon: +100ms in Page Load Equals -1% in Sales
  • Google: +500ms in Page Load Equals -20% Searches
  • Google Maps: -30% in Filesize Equals +30% Requests

Faster Websites → Faster Users → More Usage

  • Nielsen Norman Group:

○ Speed (Especially Slowness) Affects Brand Identity ○ Delays Move Websites Out Of the User's Control ○ Design for Human Need, Not Various Technologies

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What We Care About Frontend Performance

slide-23
SLIDE 23

Drupal Frontend Performance & Scalability

Frontend vs. Backend Performance

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-24
SLIDE 24

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Frontend vs. Backend Performance

Backend Performance: Type of Hosting

  • Shared / Grid
  • VPS / Cloud
  • Dedicated / Co-Located

Types of Hardware

  • Disks (faster DBs!)
  • RAM (more cache!)
  • Cores (faster processing!)

Multiple Servers and DBs DB Storage Engines Networked Storage

slide-25
SLIDE 25

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Frontend vs. Backend Performance

Backend Performance: Type of Hosting

  • Shared / Grid
  • VPS / Cloud
  • Dedicated / Co-Located

Types of Hardware

  • Disks (faster DBs!)
  • RAM (more cache!)
  • Cores (faster processing!)

Multiple Servers and DBs DB Storage Engines Networked Storage Frontend Performance:

  • Overall Page Size
  • Time for DOM to Load
  • Time Until DOM is Rendered
  • Time Until DOM is Functional
slide-26
SLIDE 26

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Frontend vs. Backend Performance

Backend Performance: Type of Hosting

  • Shared / Grid
  • VPS / Cloud
  • Dedicated / Co-Located

Types of Hardware

  • Disks (faster DBs!)
  • RAM (more cache!)
  • Cores (faster processing!)

Multiple Servers and DBs DB Storage Engines Networked Storage Frontend Performance:

  • Overall Page Size
  • Time for DOM to Load
  • Time Until DOM is Rendered
  • Time Until DOM is Functional

(In other words, most frontend performance is experienced in the browser!)

slide-27
SLIDE 27

Drupal Frontend Performance & Scalability

Anatomy of a Web Page

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-28
SLIDE 28

Drupal Frontend Performance & Scalability

What Does a Web Page Contain?

  • …

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Anatomy of a Web Page

slide-29
SLIDE 29

Drupal Frontend Performance & Scalability

What Does a Web Page Contain?

  • HTML
  • CSS and styles
  • JavaScripts
  • Background Images
  • Images and Other Media

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Anatomy of a Web Page

slide-30
SLIDE 30

Drupal Frontend Performance & Scalability

What Happens During a Page Load

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-31
SLIDE 31

Drupal Frontend Performance & Scalability

In Which Order Do the Contents of a Web Page Load?

  • …

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What Happens During a Page Load

slide-32
SLIDE 32

Drupal Frontend Performance & Scalability

In Which Order Do the Contents of a Web Page Load?

  • 1. HTML
  • 2. CSS and styles
  • 3. JavaScripts
  • 4. Background Images
  • 5. Images and Other Media

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What Happens During a Page Load

slide-33
SLIDE 33

Drupal Frontend Performance & Scalability

In Which Order Do the Contents of a Web Page Load?

  • 1. HTML
  • 2. CSS and styles
  • 3. JavaScripts
  • 4. Background Images
  • 5. Images and Other Media

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What Happens During a Page Load

slide-34
SLIDE 34

Drupal Frontend Performance & Scalability

In Which Order Do the Contents of a Web Page Load?

  • 1. HTML
  • 2. CSS and styles
  • 3. JavaScripts
  • 4. Background Images
  • 5. Images and Other Media

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What Happens During a Page Load

slide-35
SLIDE 35

Drupal Frontend Performance & Scalability

In Which Order Do the Contents of a Web Page Load?

  • 1. HTML
  • 2. CSS and styles
  • 3. JavaScripts
  • 4. Background Images
  • 5. Images and Other Media

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What Happens During a Page Load

slide-36
SLIDE 36

Drupal Frontend Performance & Scalability

In Which Order Do the Contents of a Web Page Load?

  • 1. HTML
  • 2. CSS and styles
  • 3. JavaScripts
  • 4. Background Images
  • 5. Images and Other Media

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What Happens During a Page Load

slide-37
SLIDE 37

Drupal Frontend Performance & Scalability

So, What's Doing What?

  • 1. HTML ← Web Application Generates HTML
  • 2. CSS and styles
  • 3. JavaScripts
  • 4. Background Images
  • 5. Images and Other Media

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What Happens During a Page Load

slide-38
SLIDE 38

Drupal Frontend Performance & Scalability

So, What's Doing What?

  • 1. HTML ← Web Application
  • 2. CSS and styles ← Web App (SASS, LESS, etc.)
  • 3. JavaScripts
  • 4. Background Images
  • 5. Images and Other Media ← Web App (Image Derivatives)

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

What Happens During a Page Load

slide-39
SLIDE 39

Drupal Frontend Performance & Scalability

Tools and Techniques

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-40
SLIDE 40

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Tools and Techniques

  • Firebug "Net" panel

○ http://ex.tl/ZNi

  • Web Page Test

○ http://ex.tl/Zxt

  • Pingdom

○ http://ex.tl/ZNU

  • YSlow for Firefox / FireBug

○ http://ex.tl/ZN3

  • Google PageSpeed Insights

○ http://ex.tl/ZNZ

slide-41
SLIDE 41

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Tools and Techniques

  • 1. Reduce Requests
  • Every file produces an HTTP request
  • Fewer requests are better than smaller files
  • HTTP 1.1 says to parallelize 2 components per host
  • Sprites

○ Many Images in One File ○ Shift Into View With background-position ○ Be Careful When Using Both Vertical and Horizontal Sprites

  • Aggregate scripts and styles
  • No redirects
  • Use CSS instead of images
  • Use data: URIs in stylesheets
slide-42
SLIDE 42

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Tools and Techniques

  • 2. Use a CDN
  • Content Delivery Network

○ Akamai ○ CDNLayer ○ Amazon CloudFront ○ Rackspace Cloud Files ○ SimpleCDN

  • Content Servers Distributed Around the World
  • Close Proximity Reduces Roundtrip Times
  • Affordable and Nothing to Lose!
slide-43
SLIDE 43

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Tools and Techniques

  • 3. Use Caching
  • HTTP Headers Are What Control Caching

○ Goes for Both Browsers and Reverse Proxies ○ Browsers and Proxies Check When Content is Fresh

  • Change Filenames / URLs When Updating Files
  • Set Expires to Dates In Far Future
slide-44
SLIDE 44

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Tools and Techniques

  • 4. Use Compression
  • Compress Your HTML with GZip To Reduce Page Size
  • Compress Your CSS and JavaScripts

○ Always Compression (and Aggregate) Your CSS & JS! ○ Always Use Advanced Aggregator (AKA advagg) in Drupal 6!

  • Use mod_deflate or NginxHttpGzipModule
  • Use Google PageSpeed (If You Can)

○ Makes Files Smaller ○ Combines Many Files Into One ○ Extends Browser Cache Times

slide-45
SLIDE 45

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Tools and Techniques

  • 5. CSS Up Top
  • Pages Render After CSS is Loaded
  • Loading CSS Later? FOUC and Re-rendering :(
  • 6. JavaScript Down Below
  • Scripts Load Sequentially
  • Degrades Somewhat Gracefully
  • Loading Scripts First? They Block Page Rendering
  • onClick, onHover, etc. Handlers Kill Performance
slide-46
SLIDE 46

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Tools and Techniques

  • 7. Minify CSS and JavaScript
  • Removes Comments and Whitespace
  • Minified CSS & JS + GZip Compression > GZip alone
  • Minify Core and Contributed CSS and JavaScript

○ Speedy Module and UglifyJS (Drupal 7) ○ Advanced Aggregator Module (Drupal 6)

  • Why Don't We Minify HTML, Too?

○ HTML is Fragile and Constantly Changing ○ Minify Just the Content (Not the Page) ○ Look Out for Conditional Tags ○ Other Resources: Tidy, Twig's spaceless tag, etc.

slide-47
SLIDE 47

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Tools and Techniques

  • 8. Parallelization (AKA Pipelining and Multi-Threading)
  • HTTP 1.1 States Browsers Should Make a Maximum of 2

Requests Per Hostname In Parallel

  • Most Browsers Parallelize More…

○ Chrome, Firefox, Opera & Safari: 6

○ IE7: 2 ○ IE8: 6 ○ IE9: 8

  • "Faking It" With the DNS Tricks Is Not a Long-Term

Solution ○ Reduce Your DNS Lookups! ○ HTTP 2.0 is coming…

  • Use Cookieless Domains
slide-48
SLIDE 48

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

  • Configure ETags
  • Make AJAX cacheable
  • Post-load Components
  • Preload Components
  • Use GET for AJAX Requests
  • Reduce # of DOM Elements
  • Split Components Across

Domains

  • Minimize # of iframes
  • No 404s
  • Reduce Cookie Size
  • Etc., etc.
  • Minimize HTTP requests
  • Use a CDN
  • Add an Expires header
  • GZip components
  • Put stylesheets at the top
  • Put scripts at the bottom
  • Avoid CSS expressions
  • Make JS and CSS external
  • Reduce DNS lookups
  • Minify JS and CSS
  • Avoid redirects
  • Remove duplicate scripts

Tools and Techniques: YSlow

slide-49
SLIDE 49

Drupal Frontend Performance & Scalability

The Future of HTTP

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-50
SLIDE 50

Drupal Frontend Performance & Scalability

The Past

  • HTTP 0.9 (1991)
  • HTTP 1.0 (1996)
  • HTTP 1.1 (1997-1999)
  • HTTP-NG

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

The Future of HTTP

slide-51
SLIDE 51

Drupal Frontend Performance & Scalability

The Past

  • HTTP 0.9 (1991)
  • HTTP 1.0 (1996)
  • HTTP 1.1 (1997-1999)
  • HTTP-NG

The Present

  • HTTP 1.1 (2012)

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

The Future of HTTP

slide-52
SLIDE 52

Drupal Frontend Performance & Scalability

The Past

  • HTTP 0.9 (1991)
  • HTTP 1.0 (1996)
  • HTTP 1.1 (1997-1999)
  • HTTP-NG

The Present

  • HTTP 1.1 (2012)

The Future

  • HTTP 2.0

○ Google SPDY ○ Microsoft HTTP Speed+Mobility

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

The Future of HTTP

slide-53
SLIDE 53

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

  • Configure ETags
  • Make AJAX cacheable
  • Post-load Components
  • Preload Components
  • Use GET for AJAX Requests
  • Reduce # of DOM Elements
  • Split Components Across

Domains

  • Minimize # of iframes
  • No 404s
  • Reduce Cookie Size
  • Etc., etc.

Remember YSlow?

  • Minimize HTTP requests
  • Use a CDN
  • Add an Expires header
  • GZip components
  • Put stylesheets at the top
  • Put scripts at the bottom
  • Avoid CSS expressions
  • Make JS and CSS external
  • Reduce DNS lookups
  • Minify JS and CSS
  • Avoid redirects
  • Remove duplicate scripts
slide-54
SLIDE 54

Drupal Frontend Performance & Scalability

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

  • Configure ETags
  • Make AJAX cacheable
  • Post-load Components
  • Preload Components
  • Use GET for AJAX Requests
  • Reduce # of DOM Elements
  • Split Components Across

Domains

SPDY Fixes Problems With HTTP 1.1:

  • Minimize HTTP requests
  • Use a CDN
  • Add an Expires header
  • GZip components
  • Put stylesheets at the top
  • Put scripts at the bottom
  • Avoid CSS expressions
  • Make JS and CSS external
  • Reduce DNS lookups
  • Minify JS and CSS
slide-55
SLIDE 55

Drupal Frontend Performance & Scalability

Resources

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

slide-56
SLIDE 56

Drupal Frontend Performance & Scalability

  • Firebug "Net" panel

○ http://ex.tl/ZNi

  • AOL Page Test

○ http://ex.tl/ZNw

  • Pingdom

○ http://ex.tl/ZNU

  • YSlow for Firefox / Firebug

○ http://ex.tl/ZN3

  • Chrome Dev Panel

○ http://ex.tl/ZNh

  • Google PageSpeed

○ http://ex.tl/ZNZ

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

Resources

  • Steve Souders

○ http://ex.tl/ZN5

  • Wim Leers

○ http://ex.tl/ZNq

  • Mike Carper / mikeytown2

○ http://ex.tl/ZNU

  • Khalid Bayeldin / 2bits

○ http://ex.tl/ZNT

  • Konstantin Kaefer

○ http://ex.tl/ZNS

  • Matt Farina

○ http://ex.tl/ZNh

slide-57
SLIDE 57

Drupal Frontend Performance & Scalability

  • Why Performance Matters

○ http://ex.tl/ZNy

  • Website Response Times

○ http://ex.tl/ZNC

  • YSlow FAQ

○ http://ex.tl/ZNk

  • Modules Tagged "Performance and Scalability"

○ http://ex.tl/ZNJ

  • Drupal Core Issues Tagged "Performance"

○ http://ex.tl/ZGv

  • High Performance Drupal Group and Meetups

○ http://ex.tl/ZN4

@christefano / @LarksLA / @DowntownDrupal / @Droplabs

More Resources

  • Make the Web Faster

○ http://ex.tl/ZNZ

  • Google mod_pagespeed

○ http://ex.tl/ZN9

  • Google SPDY

○ http://ex.tl/ZNo

slide-58
SLIDE 58

Drupal Frontend Performance & Scalability

Questions? Comments?

Give Your Feedback! http://ex.tl/ZGZ

@christefano / @LarksLA / @DowntownDrupal / @Droplabs