Evaluating and Fixing Website Performance

For the past decade we've been building websites with responsive web design to accommodate all visitors regardless of device. Unfortunately, web performance is often not taken into consideration on many higher education sites. So while we're accommodating the screen size, we're ignoring the network. Features such as auto-loading videos, custom fonts, and third party embeds can all contribute to a sub-par mobile experience.

We explore the basics of Google's Web Vitals, what they mean, how they impact search ranking, and what you can do with the information they provide to improve many facets of your sites user experience. You'll learn how to measure your site's Web Vitals using a variety of free tools. We will also review how HigherEd in general is performing in regards to Web Vitals and Lighthouse scores.

Transcript

1. Evaluating and Fixing Website Performance Erik Runyon @erunyon #hewebperf October 19, 2020
2. <about/> Erik Runyon Technical Director Marketing Communications The University of Notre Dame @erunyon ErikRunyon.com #hewebperf
3. @erunyon #HEWebPerf
4. The Tools
5. Google Lighthouse and Dev Tools
6. Core Web Vitals web.dev/vitals
7. Largest Contentful Paint web.dev/lcp
8. First Input Delay web.dev/fid
9. Cumulative Layout Shift web.dev/cls #hewebperf
10. www.webpagetest.org #hewebperf
11. Whodunnit?
12. The Server
13. Compression Gzip/Brotli
14. HTTP/2
15. Caching
16. TTFB Time to First Byte
17. The Front-end
18. Images
19. Custom fonts
20. Hero Videos AKA Full width background videos AKA WHEEE just bought a drone!!!
21. Selectively display the video 1. Mobile? 2. Reduced motion? 3. Save data? 4. Slow connection? codepen.io/erunyon/pen/gOrdxQW
22. Javascript Frameworks/tag managers/trackers/embeds
23. Let's get started…
24. The Results
25. 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
26. It’s the Javascript that kills you
27. 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
29. Tested From: Dulles, VA - Moto G4 - Chrome - 4G bit.ly/3lWxw8L
30. Recommendations 1. Merge and embed all external SVG icons into a single <def> 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
31. Erik Runyon erikrunyon.com @erunyon thank you Offline phone graphic: @tpacket