Prepare PL 3.7 Release

[joemcgill]

This issue is to track preparation of the upcoming 3.7 release up until publishing, which is due December 16, 2024.

• Create release/3.7 branch closer to the release date
• Finalize scope and punt unfinished pull requests to following release
• Smoke test (Friday, December 13, 2024)
• Prepare the release (Monday, December 16, 2024)

[joemcgill]

All milestones for Monday's release:

• dominant-color-images 1.2.0
• embed-optimizer 0.4.0
• image-prioritizer 0.3.0
• webp-uploads 2.4.0
• optimization-detective 0.9.0
• performance-lab 3.7.0
• web-worker-offloading 0.2.0
• auto-sizes 1.4.0

[mukeshpanchal27]

I open some follow-up PRs that is ready for review and merge for current release of Enhanced Responsive Images plugin.

• Remove auto_sizes_get_layout_settings() #1743
• Accurate sizes: Disable layout calculations for classic themes #1744

Found one non-blocking issue for Image Placeholder plugin.

• Image Placeholders: Remove dominant color attributes from old media images #1747

[mukeshpanchal27]

I performed a smoke test for the following plugins:

• Performance Lab
• Enhanced Responsive Images
• Modern Image Formats
• Image Placeholders

Everything looks good based on my testing. ✅

[westonruter]

Release branch has been created: https://github.com/WordPress/performance/tree/release/3.7.0

[westonruter]

Testing: Performance Lab

I see the link in the footer to manage the plugins on the settings screen:

Tapping to activate Image Prioritizer successfully resulted in Optimization Detective being installed:

After deactivating and uninstalling Image Prioritizer and Optimization Detective, I then tried activating Embed Optimizer and this resulted in that plugin and Optimization Detective also getting installed (even though it's not a hard dependency):

The script for ajax activation of plugins is minified:

[westonruter]

Testing: Web Worker Offloading

I installed the Storefront theme, the WooCommerce plugin, and the Google Analytics for WooCommerce. I imported the sample products and I added a made-up Google Analytics account ID in the settings. When I visited the shop page and added an item to the cart, I successfully saw the request originating from a worker instead of the main thread:

[westonruter]

I encountered a fatal error with Image Placeholders: #1755

Update: Fix proposed in #1756

[westonruter]

Testing: Image Placeholders

With the above fix, I'm now seeing images with placeholders showing up in the admin UI as expected:

[westonruter]

Testing: Embed Optimizer

On my blog I have a post with a YouTube video in the initial viewport. I'm now seeing preconnect links added with media queries, whereas before there were none:

<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com/" media="(max-width: 480px)">
<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com/" media="(min-width: 783px)">
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com/" media="(max-width: 480px)">
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com/" media="(min-width: 783px)">

I did notice a small bug, however, which I have filed as #1757 for the next release. The bug just prevents the preconnect links from being added unless there are URL Metrics collected for both desktop and mobile, when in reality this restriction is not needed.

[westonruter]

Testing: Image Prioritizer

I activated the Twenty Thirteen theme, and after loading a page three times over the course of three minutes to obtain three URL Metrics on desktop, I then as expected saw the preload link fo the header appear:

<link
  data-od-added-tag
  rel="preload"
  fetchpriority="high"
  as="image"
  href="https://perflab-3-7-0.instawp.xyz/wp-content/themes/twentythirteen/images/headers/circle.png"
  media="screen and (min-width: 783px)"
/>

Also, I added post with a bunch of lorem ipsum and then way below the viewport I added a cover block with a fixed background. After loading the page twice so that a URL Metric was collected on desktop and mobile, I then saw that the background image of the cover block was lazy-loaded as expected:

<div class="wp-block-cover is-light has-parallax">
  <span
    aria-hidden="true"
    class="wp-block-cover__background has-background-dim"
    style="background-color: #93835c"
  ></span>
  <div
    data-od-replaced-class="wp-block-cover__image-background wp-image-119 has-parallax"
    data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::DIV]/*[2][self::DIV]/*[1][self::DIV]/*[1][self::DIV]/*[1][self::ARTICLE]/*[2][self::DIV]/*[16][self::DIV]/*[2][self::DIV]"
    class="wp-block-cover__image-background wp-image-119 has-parallax od-lazy-bg-image"
    style="
      background-position: 50% 50%;
      background-image: url(https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison1-scaled.webp);
    "
  ></div>
  <div
    class="wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained"
  >
    <p class="has-text-align-center has-large-font-size">Lazy??</p>
  </div>
</div>

Screen.recording.2024-12-18.09.54.22.webm

I also enabled Picture Element in Modern Image Formats. Then I added an Image block to the beginning of a post so that it is the LCP element. After loading a page (on mobile) so that a URL Metric is collected, I then saw the expected preload link for the WebP image (and not the JPEG fallback):

<link
  data-od-added-tag
  rel="preload"
  fetchpriority="high"
  as="image"
  imagesrcset="
    https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-1024x768-jpg.webp 1024w, 
    https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-300x225-jpg.webp 300w, 
    https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-768x576-jpg.webp 768w, 
    https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-1536x1152-jpg.webp 1536w, 
    https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-2048x1536-jpg.webp 2048w
  "
  imagesizes="(max-width: 1024px) 100vw, 1024px"
  type="image/webp"
  media="screen and (max-width: 480px)"
/>

The picture element:

<figure class="wp-block-image size-large">
  <picture class="wp-picture-125" style="display: contents"
    ><source
      type="image/webp"
      srcset="
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-1024x768-jpg.webp  1024w,
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-300x225-jpg.webp    300w,
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-768x576-jpg.webp    768w,
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-1536x1152-jpg.webp 1536w,
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-2048x1536-jpg.webp 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px" />
    <img
      data-od-removed-fetchpriority="high"
      data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::DIV]/*[2][self::DIV]/*[1][self::DIV]/*[1][self::DIV]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[2][self::IMG]"
      data-dominant-color="8d816f"
      data-has-transparency="false"
      style="--dominant-color: #8d816f"
      decoding="async"
      width="1024"
      height="768"
      sizes="(max-width: 1024px) 100vw, 1024px"
      src="https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-1024x768.jpg"
      alt=""
      class="wp-image-125 not-transparent"
      srcset="
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-1024x768.jpg  1024w,
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-300x225.jpg    300w,
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-768x576.jpg    768w,
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-1536x1152.jpg 1536w,
        https://perflab-3-7-0.instawp.xyz/wp-content/uploads/2024/12/bison4-2048x1536.jpg 2048w
      "
  /></picture>
</figure>