Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Evaluating and Fixing Website Performance

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.

Erik Runyon

October 19, 2020


More Decks by Erik Runyon

Other Decks in Programming


  1. Selectively display the video 1. Mobile? 2. Reduced motion? 3.

    Save data? 4. Slow connection? codepen.io/erunyon/pen/gOrdxQW
  2. 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
  3. 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
  4. 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