Optimize Images and Media

[HenryzGreenberg]

I'm lumping all of these into 1 issue because optimizing images is not just about reducing file size; it involves a comprehensive approach that takes into consideration size, format, compression, responsiveness, loading strategy, delivery mechanisms...etc

What is the problem that we want to solve?

Improve performance on Core Web Vital scores: starting with images. Large images take longer to load, leading to increased LCP times. By reducing the dimensions and compressing images without losing quality, you can substantially improve loading times.

A clear description of what's being investigated and why.

1. What to Investigate: Image Format: Deliver images in next-gen formats: deliver avif first, then webp, and finally jpg
   Why: Converting images to more efficient formats can enhance performance.

2. What to Investigate: Responsive Images: How images adapt to various screen sizes and resolutions (using responsive image techniques). Each breakpoint should deliver in 1 of 3 formats based on support: avif, webp, or jpg
   Use fetchpriority for LCP images. Generally, you should add fetchpriority=”high” to the first within any Hero widget
   You’ll also want to ensure that the first image within any hero is not lazy-loading

Why: Serving appropriately sized images for different devices ensures that users aren't downloading more data than necessary. Since CDN solutions are not scalable to all of campus are there other baked in solutions in Drupal or a contrib module that could be leveraged?

3.What to Investigate: Lazy Loading: Whether images that aren't immediately visible on the page are being loaded later (lazy loading).
Why: Lazy loading allows images below the fold to load only when a user scrolls down to them. This can improve initial load times, positively impacting LCP.

Additional info:
https://web.dev/learn-core-web-vitals
https://web.dev/vitals

Compress SVG icons, Inline SVG icons in the HTML, Ensure images are appropriately sized to match their rendered size at multiple breakpoints, Preconnect to 3rd-party resources, Check if a font that’s being delivered from Google Fonts, Adobe Fonts (TypeKit), or Fonts.com is actually a system font, Ensure fonts are loading with font-display: swap, Check if the swap from a fallback font to a webfont is causing CLS issues

[trackleft]

I think step 1, could be to convert all image styles to create webp images at /admin/config/media/image-styles and following these instructions. https://imagexmedia.com/blog/speed-your-drupal-9-website-webp-images

After step 1, we can test to see how much we've benefitted.

Step 2, could be to enable lazy loading on any media displays that don't already have it enabled. Looks like this when enabled in config.

az_quickstart/modules/custom/az_media/config/install/core.entity_view_display.media.az_image.az_card_image.yml

Lines 18 to 24 in 39387a8

	field_media_az_image:
	label: visually_hidden
	settings:
	image_style: az_card_image
	image_link: ''
	image_loading:
	attribute: lazy

After step 2, we can test to see how much we've benefitted.

Step 3, Add additional responsive image styles for common use cases. One example of responsive image styles can be found in the full width media row module. (where we can reliably anticipate how large the final image container should be) Determine where we can use responsive image styles effectively. Examples of site owner/builder actions that affect how reliable a responsive image style is are:

1. How many sidebars are on a page, is the width of the region that the image is possibly in altered when a sidebar is added?
2. If the image can be added within a grid, how many columns can we reasonably expect, sidebars affect this as well.

If we find additional candidates for responsive images, implement and test.

Step 4 (may be above step 3) Investigate whether there is a low cost front end solution we could implement.
It is possible intelligencebank has already solved this issue, and we just have to implement it by allowing remote image hosting. Gatsby server side rendering also solves for this issue, as well as the Pantheon Advanced Global CDN + WAF IO.

[trackleft]

I think drupal lazy loading actually does not affect LCP, I think the lazy loading occurs before you actually get to them while scrolling, but I could be wrong

[joeparsons]

The approach that was taken in the fix that was committed for this Drupal core issue could be instructive for us. This was about improving the LCP of the front page in the demonstration install profile included with Drupal core ("Umami")
https://www.drupal.org/project/drupal/issues/3349447

[joeparsons]

https://www.smashingmagazine.com/2023/08/methods-improving-drupal-largest-contentful-paint-core-web-vital/

[joeparsons]

Re-opening since #3418 only added WebP related improvements.