Understanding the Importance of Front-End Performance

Today we are talking about Front End Performance, Common Front End Issues, and Ways to test and fix said issues with guest Andy Blum. We’ll also cover Webp Fallback Image as our module of the week.

For show notes visit: www.talkingDrupal.com/415

• How do we break down front end performance
• How do we measure front end performance
• What are web vitals
  • Standard, objective measurements
  • First/Largest contentful paint
  • Cumulative layout shift
  • Time to Interactive/First Input Delay/Time To Next Paint/Total Blocking Time
• What are some common client side performance problems
  • “Flickering”
  • “Slow loading”
  • Image size/resolution issues
  • Render-blocking resources
  • Screen jitters
  • Memory leaks
  • Memory Bloat
• How do tracking scripts affect performance
• Tools to help identify and resolve
• Drupal front end performance

• Talking Drupal #373 - Performance, Privacy, and the Open Web
• Web Vitals
• Orders of magnitude 100 - 1000 ms
• Orders of 10 source
  • Instant
  • Near instant
  • Subsequent
• Talking Drupal #368 - Image Optimization
• MDN - How Browsers work
• Prefetch
• Web Page Test
• Front End Performance in Drupal
• architecture.lullabot.com article

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Andy Blum - andy-blum.com - andy_blum

Martin Anderson-Clutz - @mandclu WebP fallback image

• Brief description:
  • Do you want your Drupal site to generate WebP images in the most optimal way? There are a number of modules for that, today we’re going to talk about…
• Brief history
  • How old: created in Jun 2022 by pedrop
  • Versions available: 1.0.0 and 1.1.0 versions available, both of which support Drupal 8, 9, and 10
• Maintainership
  • Actively maintained
• Number of open issues
  • 3, 2 of which are bugs
• Has test coverage
• Usage stats:
  • Almost 252 sites
• Maintainer(s):
  • Most recent release is by dj1999
• Module features and usage
  • Anyone using testing tools like Lighthouse will have seen suggestions to use modern image formats like WebP, and with good reason. They allow for much smaller image files at the same quality, which means a better user experience and less bandwidth used by both the server and the visitor. WebP is a natural choice because it enjoys over 95% browser support, but many sites still care about that other 5%
  • Drupal core added its own support for webp in 9.2, but without a fallback image, so browsers that don’t have WebP support have been out of luck
  • Contrib modules have allowed for generating a webp image and a jpeg fallback, to allow for universal support. Typically they have worked by creating the WebP variant from the output of a core image style, so after an image has been saved as something like a jpeg. That means the resulting WebP can’t compress as well, and can show compression artifacts
  • WebP Fallback Image is different because it allows Drupal core to generate the WebP image from the source file, and then creates the jpeg fallback.
  • Also worth noting that this module only creates the jpeg fallback when it’s requested, so it doesn’t add to the storage of your website unless it’s needed