Tweet
Tweet

Slide 1

Slide 1 text

Evaluating and Fixing Website Performance Erik Runyon @erunyon #hewebperf October 19, 2020

Slide 2

Slide 2 text

Erik Runyon Technical Director Marketing Communications The University of Notre Dame @erunyon ErikRunyon.com #hewebperf

Slide 3

Slide 3 text

@erunyon #HEWebPerf

Slide 4

Slide 4 text

The Tools

Slide 5

Slide 5 text

Google Lighthouse and Dev Tools

Slide 6

Slide 6 text

Core Web Vitals web.dev/vitals

Slide 7

Slide 7 text

Largest Contentful Paint web.dev/lcp

Slide 8

Slide 8 text

First Input Delay web.dev/fid

Slide 9

Slide 9 text

Cumulative Layout Shift web.dev/cls #hewebperf

Slide 10

Slide 10 text

www.webpagetest.org #hewebperf

Slide 11

Slide 11 text

Whodunnit?

Slide 12

Slide 12 text

The Server

Slide 13

Slide 13 text

Compression Gzip/Brotli

Slide 14

Slide 14 text

HTTP/2

Slide 15

Slide 15 text

Caching

Slide 16

Slide 16 text

TTFB Time to First Byte

Slide 17

Slide 17 text

The Front-end

Slide 18

Slide 18 text

Images

Slide 19

Slide 19 text

Custom fonts

Slide 20

Slide 20 text

Hero Videos AKA Full width background videos AKA WHEEE just bought a drone!!!

Slide 21

Slide 21 text

Selectively display the video 1. Mobile? 2. Reduced motion? 3. Save data? 4. Slow connection? codepen.io/erunyon/pen/gOrdxQW

Slide 22

Slide 22 text

Javascript Frameworks/tag managers/trackers/embeds

Slide 23

Slide 23 text

Let's get started…

Slide 24

Slide 24 text

The Results

Slide 25

Slide 25 text

Changes since recording 1. Converted woff to woff2 2. Converted footer logo: 556kb -> 7kb 3. Added width/height to lazy-loaded images 4. Removed four trackers 5. Removed Foundation javascript

Slide 26

Slide 26 text

It’s the Javascript that kills you

Slide 27

Slide 27 text

WebPageTest First Byte Start Render Speed Index Document Complete Size sjsu.edu 1.7s 3.6s 3.9s ~20-84s 44 MB heweb-sjsu.netlify.app 0.5s 1.6s 1.6s 3.5s 1,108 KB

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Tested From: Dulles, VA - Moto G4 - Chrome - 4G bit.ly/3lWxw8L

Slide 30

Slide 30 text

Recommendations 1. Merge and embed all external SVG icons into a single 2. Load lower video only when necessary 3. Load bottom trackers through GTM and defer them as much as possible 4. Refactor to remove Foundation and jQuery

Slide 31

Slide 31 text

Erik Runyon erikrunyon.com @erunyon thank you Offline phone graphic: @tpacket