@@ -208,22 +208,23 @@ Then in your template, add your controller to the HTML attribute:
208
208
Largest Contentful Paint (LCP) and Web performance considerations
209
209
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
210
210
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.
216
216
217
217
Using 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:
224
219
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:
227
228
228
229
.. code-block :: html+twig
229
230
@@ -237,8 +238,9 @@ attributes instead, and preload the image as well:
237
238
height="150"
238
239
/>
239
240
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.
242
244
243
245
Backward Compatibility promise
244
246
------------------------------
0 commit comments