@@ -208,22 +208,23 @@ Then in your template, add your controller to the HTML attribute:
208208Largest Contentful Paint (LCP) and Web performance considerations
209209~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
210210
211- The `Largest Contentful Paint (LCP) `_ is a key metric for web performance, it measures the time
212- it takes for the largest image or text block to be rendered on the page, and should be less
213- than 2.5 seconds.
214- It's part of the ` Core Web Vitals `_ and is used by Google to evaluate the user experience
215- of a website, and impacts the Search ranking.
211+ The `Largest Contentful Paint (LCP) `_ is a key metric for web performance.
212+ It measures the time it takes for the largest image or text block to be rendered
213+ on the page and should be less than 2.5 seconds. It's part of the ` Core Web Vitals `_
214+ and is used by Google to evaluate the user experience of a website, impacting
215+ the Search ranking.
216216
217217Using the Symfony UX LazyImage for your LCP image can be a good idea at first,
218- but in the reality it will lower your LCP score because:
219- - `The progressive loading (through blurhash) is not taken into account in the LCP calculation `_
220- - event if you eagerly load the LazyImage Stimulus controller, a small delay will be added to the
221- LCP calculation
222- - if you `didn't preload the image `_, the browser will waits for the Stimulus controller to
223- load the image, which add another delay to the LCP calculation
218+ but in reality, it will lower the LCP score because:
224219
225- A solution is to not use the Stimulus controller for the LCP image, but use ``src `` and ``style ``
226- attributes instead, and preload the image as well:
220+ - `The progressive loading (through blurhash) is not taken into account in the LCP calculation `_;
221+ - Even if you eagerly load the LazyImage Stimulus controller, a small delay will
222+ be added to the LCP calculation;
223+ - If you `didn't preload the image `_, the browser will wait for the Stimulus
224+ controller to load the image, which adds another delay to the LCP calculation.
225+
226+ A solution is to not use the Stimulus controller for the LCP image but to use
227+ ``src `` and ``style `` attributes instead, and preload the image as well:
227228
228229.. code-block :: html+twig
229230
@@ -237,8 +238,9 @@ attributes instead, and preload the image as well:
237238 height="150"
238239 />
239240
240- This way, the browser will display the BlurHash image as soon as possible, and will load the HD
241- image at the same time, without waiting for the Stimulus controller to be loaded.
241+ This way, the browser will display the BlurHash image as soon as possible, and
242+ will load the high-definition image at the same time, without waiting for the
243+ Stimulus controller to be loaded.
242244
243245Backward Compatibility promise
244246------------------------------
0 commit comments