Imagery and video are proven ways to promote engagement and conversion on e-commerce sites. One study found that 75% of online shoppers say that product pictures are “very influential” for their purchase decisions, with a respondent commenting, “If I can’t see it, I can’t make a decision about it.”
tl;dr;
Cloudinary conducted a workshop at React Summit 2021 to highlight the effect of media performance on websites by correlating it with Google’s Core Web Vitals and other performance measurements. Also presented were typical optimization techniques along with code samples. Here are the recording and the slides.
Optimized media assets have always been essential to website performance. To help developers measure, understand and improve website performance, Google created Core Web Vitals, a subset of Web Vitals that focuses on three aspects of the user experience: loading, interactivity, and visual stability. In June 2021, Google plans to make page experience a ranking factor—so Core Web Vitals and media asset optimization will become even more important.
For years, Google has been updating its search algorithm to prioritize end-user experience, displaying the most relevant and helpful content at the top of search results. The latest—and maybe the most significant—update so far is Core Web Vitals (CWVs), which are new metrics announced a year ago that will, starting in June, begin determining search rankings. With this update, Google is being abundantly clear that visual experience of webpages is paramount.
To engage with modern users, today’s websites must be extremely visual. Even though high-quality images and videos can help keep visitors on the site and convert them, those media assets also add to the page weight, load time, and bandwidth. Unoptimized content can result in performance issues, causing visitors to bounce off.
So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...