Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-128526

Cumulative Layout Shift (CLS) improvement for IMG tag

    Details

      Description

      Background
      Part of the Web Vitals initiative from Google to deliver a great user experience on the web is Cumulative Layout Shift(CLS).

      Issue
      When posting an image in Liferay, the image is rendered with something like this:

      <img src="/documents/20124/0/LBDLC.png/02956bfc-f95b-cf02-fb01-70e339ba332b?t=1614666679643" alt="the description"> 
      

      Image tag do not include the dimensions, which is one of the causes of poor CLS score.

      Steps to reproduce
      1. Start a clean bundle
      2. Login
      3. Go to Documents and Media and upload an image file
      4. Go to Web Content and add a new Web Content with any title
      5. For the body, click on the [+] button and click on the image selector
      6. Select the uploaded image and click Add
      7. Switch to Code View
       Note that the IMG tag only has the SRC parameter, no dimensions specified
      8. Publish
      9. Preview the article and inspect the code
       Note that the IMG tag only has the SRC parameter, no dimensions specified

      Expectations
      Images should both width/height and css aspect ratio boxes. Image should be rendered like this:

      <img src="/documents/20124/0/LBDLC.png/02956bfc-f95b-cf02-fb01-70e339ba332b?t=1614666679643" width="1550" height="550" style="width:100%; max-width:1550px; height:auto;">
      

      Here's a guide on CLS Optimization:
      https://web.dev/optimize-cls/

      Reproduced in
      7.2.x-private (e0386d24c6a6c0425878cb1c1322f57f3da7f4be)

        Attachments

          Activity

            People

            Assignee:
            mateo.hermosin Mateo Hermosin
            Reporter:
            jordi.rodo Jordi Rodó
            Votes:
            1 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:

                Packages

                Version Package