Talking Drupal #415 - 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
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

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

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