feat (lazysizes): improves initial page load performance

[firestar300]

Adds lazy loading for images to improve initial page load time.

Also sets decoding="async" attribute to images with fetchpriority="high" to further enhance perceived performance.

Summary by Sourcery

Introduce image lazy loading and async decoding to improve initial page load performance.

New Features:

• Enable lazy loading for images via the lazysizes library.

Enhancements:

• Set async decoding on high-priority images to improve perceived rendering performance.

Build:

• Add lazysizes as a runtime dependency in package.json.

[sourcery-ai[bot]]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Introduces lazysizes as a dependency and wires it into the JS entrypoint to enable lazy-loading for images, while also marking high-priority images for asynchronous decoding to improve perceived initial load performance.

Sequence diagram for image loading with lazysizes and async decoding

sequenceDiagram
    participant User
    participant Browser
    participant IndexJS
    participant Lazysizes

    User->>Browser: Navigate_to_page
    Browser->>Browser: Parse_HTML
    Browser->>Browser: Render_picture_with_img(fetchpriority=high,decoding=async)
    Browser->>Browser: Schedule_high_priority_image_download
    Browser->>Browser: Decode_image_asynchronously

    Browser->>IndexJS: Execute_JS_entrypoint
    IndexJS->>Lazysizes: Import_and_initialize_lazysizes
    Lazysizes-->>Browser: Attach_listeners_to_lazy_images

    User->>Browser: Scroll_or_interact
    Browser->>Lazysizes: Intersection_or_scroll_event
    Lazysizes->>Browser: Swap_in_real_src_for_in_view_lazy_images
    Browser->>Browser: Download_and_decode_lazy_images_on_demand

Flow diagram for handling high-priority vs lazily loaded images

flowchart TD
    Start[Image_element_in_template]
    IsHighPriority{Has_fetchpriority_high}
    HighPriority[Render_img_with_decoding_async]
    LazyPriority[Managed_by_lazysizes]
    AsyncDecode[Browser_decodes_image_asynchronously]
    LazyLoadTrigger[User_scrolls_or_image_enters_viewport]
    LoadLazy[Load_and_decode_lazy_image]
    End[Image_visible_to_user]

    Start --> IsHighPriority
    IsHighPriority -->|Yes| HighPriority
    IsHighPriority -->|No| LazyPriority

    HighPriority --> AsyncDecode --> End

    LazyPriority --> LazyLoadTrigger --> LoadLazy --> End

File-Level Changes

Change	Details	Files
Enable lazy loading behavior via lazysizes in the JS bundle.	Add lazysizes as an application dependency so it is installed and bundled. Import and/or initialize lazysizes in the main JavaScript entrypoint to activate lazy loading on supported image elements.	package.json src/js/index.js yarn.lock
Optimize decoding behavior for non-lazy high-priority images.	Add the decoding="async" attribute to high-priority image tags to avoid blocking rendering during image decoding.	assets/conf-img/tpl/default-picture-nolazyload-caption.tpl assets/conf-img/tpl/default-picture-nolazyload.tpl

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an issue from a review comment by replying to it. You can also reply to a review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull request title to generate a title at any time. You can also comment @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in the pull request body to generate a PR summary at any time exactly where you want it. You can also comment @sourcery-ai summary on the pull request to (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the pull request to resolve all Sourcery comments. Useful if you've already addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull request to dismiss all existing Sourcery reviews. Especially useful if you want to start fresh with a new review - don't forget to comment @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[herewithme]

Ça fait pas doublon avec WP-Rocket ?

Je ne suis pas "pro-rocket", mais si on implément désormais nous-même la feature, il faudra couper celle du plugin ?

[firestar300]

Ça fait pas doublon avec WP-Rocket ?

Je ne suis pas "pro-rocket", mais si on implément désormais nous-même la feature, il faudra couper celle du plugin ?

Historiquement, nous utilisions lazySizes sur le BFF pour avoir une compatibilité avec advanced-responsive-images. On a échangé avec Alex pour faire évoluer le plugin et se passer de lazySizes, donc on l'a retiré du BFF mais trop tôt car la dernière version de ARI n'est pas encore compat' sans utilisation de lazySizes. J'ai eu des retours de theme dev qui souhaitent implémenter de nouveau et temporairement la lib js pour que tout fonctionne bien avec ARI.

Ça concerne uniquement les images contribuables hors zone Gutenberg (exception pour les champs ACF d'image dans les blocs sur mesure).

Mais oui sur le fond tu as raison, ça fait doublon avec WPR. Dans le futur, on aimerait ne plus utiliser lazysizes tout en conservant ARI.

[herewithme]

Oui, mais du coup, on combine 2 technos de lazyload sur nos projets ? où Rocket est activé 90% du temps ?