Skip to content

Commit d649652

Browse files
committed
Minor tweaks
1 parent e4a5897 commit d649652

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

src/LazyImage/doc/index.rst

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -208,22 +208,23 @@ Then in your template, add your controller to the HTML attribute:
208208
Largest 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

217217
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:
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

243245
Backward Compatibility promise
244246
------------------------------

0 commit comments

Comments
 (0)