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

Topics

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

Resources

Hosts

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

MOTW Correspondent

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

Mirella Muroni (filmmaker en schrijver)

Nooit meer slapen

Vader's liefde voor film en invloed op Mirella

The AI-powered Podcast Player