Review and refine VF-Hero component

[bhushan-ebi]

Description

Provide usage guidance to support an optimised Largest Contenful Paint (LCP), appropriate size and dimensions for the vf-hero component.

Background

Learnings from the low-resource optimisation project have shown possible gaps that can be improved on in how the vf-hero component contributes to the overall size of the webpage. Key parameters observed currently are:

• Image format type
• Image dimensions

This task is to provide the appropriate guidance to our users on how best to implement the vf-hero component for optimal sit performance

---

Acceptance criteria

• Investigate the use cases and implementation of the vf-hero to identify any issues contributing to an overall large component size

• Investigate best practice recommendations for background images

• Draft guidance to support optimised implementation of the component

• Review guidance with the team

• Update the documentation on the vf website

---

Useful links

• Page speed test result for the EMBL-EBI homepage
• vf-hero component

---

[Adedoyinebi]

Use cases reviewed

From the investigation done on EMBL homepage, EMBL-EBI homepage, EMBL-EBI training page, and the Visual framework homepage with regards to the usage of the vf-hero component, the observed patters were:

• Common image format is jpeg
• The images we use in these cases are compressed jpegs of 51.7kb to 104kb(Already small file sizes), recommending a better format such as WebP or AVIF would be an added level of guidance that ensures the component’s implemented by teams are optimal and light weight.
• Dimensions used for the background image vary largely (2,400 x 1,200px, 2,560 x 835px, 2,000 by 500px, 2,000 by 500px)
• Testing the implementations of the hero component using google page speed insight highlighted two optimisation recommendations for improving LCP:
  • fetchpriority=high should be applied
  • Request is discoverable in initial document

This validates the need to enhance our documentation by providing guidance on the recommended image format, background image dimension and further investigation on the technical optimisation for LCP.

Best practice research

Research on best practice recommendation from LRO and other articles on images showed that:

• Image dimensions should be tailored to the device/screen resolution to avoid a waste of bandwidth.
• Image size should ideally be below 500kb (Sources site different values ranging from 200kb to 500kb)
• Recommended image formats are WebP and AVIF (WebP being more common for background images)

Useful links

• LRO image and media recommendations
• https://medium.com/@lauralee_82536/guide-to-properly-size-your-hero-images-and-optimize-them-for-site-speed-ed2de90af878
• https://blog.hubspot.com/marketing/hero-image
• Shopify image guidelines

Patterns observed from design systems

The patterns observed from the hero component in other design systems:

• Background image dimensions vary largely. However, for desktop the dimensions are much smaller than what vf currently recommends.
  • Desktop
    • VF desktop recommendations - 3000 x 1000px
    • Other design systems - 1920 x 1080px, 1800 x 900px, 1490 by 560px, 504 x 504px
  • Mobile
    • VF - No recommendations currently
    • Other design systems - 354 x 308px, 312 x 192px

Design systems investigates

• Duet design system
• Elisa design system (Samsung)
• Giffgaff

Insight: From the trends observed, we should reduce the recommended resolution to support the goal of optimising the vf-hero component

---

Recommendations

Update the documentation in vf from:

“

• Size: recommended image size for a typical hero is 3000 by 1000 pixels.”

to

“

• Dimensions: The recommended dimensions for the hero image should be around:
  • 1920 x 1080px on Desktop
  • 360 x 200px on mobile
  • In cases where you need to optimise for larger displays with higher resolutions it should be around 2560 x 1440px
• Size: Image size should be below 500KB
• Format: WebP or AVIF provide better image quality at smaller file sizes
• Responsiveness: Use appropriate images for each device to save bandwidth and improve loading speed

“

@OliveiraCs , please review the proposed update to the documentation.

@bhushan-ebi kindly investigate the implementation requirement to address:

• Google page speed’s recommendations to optimise LCP:
  • fetchpriority=high should be applied
  • Request is discoverable in initial document
• Responsive image loading in alignment with LRO recommendations:
  • Here is the LRO Image and media article with the code snippet example

[archibald-ebi]

The copy suggestion you have is much clearer than the current version. My one suggestion is that the sub-points in dimensions are tricky to read at a glance.

• Dimensions - recommended dimensions for the hero image are:
  • Desktop: 1920 × 1080 px
  • Mobile: 360 × 200 px
  • Large / high-res displays: 2560 × 1440 px

[Adedoyinebi]

@OliveiraCs @archibald-ebi Thank you for the review and recommendations. The copy would be updated to support easier scanning.

"

• Dimensions - recommended dimensions for the hero image are:

  • Desktop: 1920 × 1080 px
  • Mobile: 360 × 200 px
  • Large / high-res displays: 2560 × 1440 px

• Size: Image size should be below 500KB

• Format: WebP or AVIF provide better image quality at smaller file sizes

• Responsiveness: Use appropriate images for each device to save bandwidth and improve loading speed
  "

@bhushan-ebi following the discussion on the responsive image. Kindly investigate the feasibility of these section of the proposed documentation:

"

• Dimensions - recommended dimensions for the hero image are:

  • Desktop: 1920 × 1080 px
  • Mobile: 360 × 200 px
  • Large / high-res displays: 2560 × 1440 px

• Responsiveness: Use appropriate images for each device to save bandwidth and improve loading speed
  "

[OliveiraCs]

@Adedoyinebi and @bhushan-ebi, I recommend simplifying the text for the documentation enhancements (per Dale’s suggestion) and validating the proposed changes before handing off for implementation to flag any issues and blockers.

[bhushan-ebi]

@Adedoyinebi I've completed my investigation on the raised points.
It seems that the changes are considerable and might have wider impact. For this reason I've created a separate ticket 2405 work on the implementation changes in upcoming sprint.

I'm updating the documentation for the below recommendations :

"Size: Image size should be below 500KB

Format: WebP or AVIF provide better image quality at smaller file sizes"

cc: @OliveiraCs