minor #1967 [LazyImage] Webperfs and LCP considerations (Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

[LazyImage] Webperfs and LCP considerations

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

Added some documentation to the LazyImage component, about LCP and webperfs considerations.

tl;dr: using the LazyImage _in its initial way_ on the LCP image, will decrease your LCP, lower the user experience, and lower the ranking of your website on Google.

Using the `style="background-image: url(...)"` trick solves this issue, since it allows the browser to download and render the HD image the fastest as possible, while showing the blurhash during the loading.

This is something I've implemented ~1 month ago on our website wamiz.com, and did some comparaison:
- Before, with the LazyImage Stimulus Controller solution, the blured image is not shown at all, and the LCP image discovered too much late: ![image](https://github.com/symfony/ux/assets/2103975/f61ae408-1e70-47ba-9b00-93fa5c85b56b)
- After, with the `style="background-image: url(...)"` trick, we can see the blured image and the LCP image discovered faster: ![image](https://github.com/symfony/ux/assets/2103975/d8402267-c67b-44a8-ae0f-8eaf2eaeb35c)

Commits
-------

a46b1d3 [LazyImage] Webperfs and LCP considerations

Author: javiereguiluz

src/LazyImage/doc/index.rst

@@ -205,6 +205,41 @@ Then in your template, add your controller to the HTML attribute:
     controller so that it is executed before and can listen on the
     ``lazy-image:connect`` event properly.
 
+Largest Contentful Paint (LCP) and Web performance considerations
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The `Largest Contentful Paint (LCP)`_ is a key metric for web performance, it measures the time
+it takes for the largest image or text block to be rendered on the page, and should be less 
+than 2.5 seconds.
+It's part of the `Core Web Vitals`_ and is used by Google to evaluate the user experience 
+of a website, and impacts the Search ranking.
+
+Using the Symfony UX LazyImage for your LCP image can be a good idea at first, 
+but in the reality it will lower your LCP score because:
+- `The progressive loading (through blurhash) is not taken into account in the LCP calculation`_
+- event if you eagerly load the LazyImage Stimulus controller, a small delay will be added to the 
+  LCP calculation
+- if you `didn't preload the image`_, the browser will waits for the Stimulus controller to 
+  load the image, which add another delay to the LCP calculation
+
+A solution is to not use the Stimulus controller for the LCP image, but use ``src`` and ``style`` 
+attributes instead, and preload the image as well: 
+
+.. code-block:: html+twig
+
+    <img
+        src="{{ preload(asset('image/large.png'), { as: 'image', fetchpriority: 'high' }) }}"
+        style="background-image: url('{{ data_uri_thumbnail('public/image/large.png', 20, 15) }}')"
+        fetchpriority="high"
+
+        {# Using BlurHash, the size is required #}
+        width="200"
+        height="150"
+    />
+    
+This way, the browser will display the BlurHash image as soon as possible, and will load the HD 
+image at the same time, without waiting for the Stimulus controller to be loaded.
+
 Backward Compatibility promise
 ------------------------------
 
@@ -217,4 +252,8 @@ https://symfony.com/doc/current/contributing/code/bc.html
 .. _`StimulusBundle`: https://symfony.com/bundles/StimulusBundle/current/index.html
 .. _StimulusBundle configured in your app: https://symfony.com/bundles/StimulusBundle/current/index.html
 .. _`file_get_contents`: https://www.php.net/manual/en/function.file-get-contents.php
-.. _`Flysystem`: https://flysystem.thephpleague.com
+.. _`Flysystem`: https://flysystem.thephpleague.com
+.. _`Largest Contentful Paint (LCP)`: https://web.dev/lcp/
+.. _`Core Web Vitals`: https://web.dev/vitals/
+.. _`The progressive loading (through blurhash) is not taken into account in the LCP calculation`: https://github.com/w3c/largest-contentful-paint/issues/71_
+.. _`didn't preload the image`: https://symfony.com/doc/current/web_link.html