Why Web Designers (and Their Clients) Need Core Web Vitals

Glasses, a notebook, laptop, and lamp on a wooden desk

This technical article is informed by members of Squarespace’s performance engineering team, including experts Scott Jehl and Daniel Chang.

A website’s loading performance can make the difference between a site that engages visitors and a site that disenchants them. In recent years, the global web performance community has focused its webpage user experience (UX) efforts on user-perceived performance. In doing so, they’ve established contextually appropriate metrics that represent how quickly and smoothly a page renders and responds to user interactions.

Google’s Core Web Vitals is a group of website site performance metrics that focus on the quality of a page’s UX rather than solely its load speed. Optimizing CWV in your site builds is important for creating site experiences with better UX and accessibility, boosting affinity for your brand, and ultimately driving revenue for your clients.

What is Core Web Vitals?

Core Web Vitals is an in-depth report that details how pages perform based on real-world usage data. It’s based on three core pillar metrics:

  • Largest Contentful Paint (LCP) is the time it takes to render a page’s largest visible content element from when the visitor requests its URL, showing how quickly visitors see the URL loading. The content element is typically an image, video, or large block-level text.

  • Interaction to Next Paint (INP) assesses a page's overall user interaction responsiveness by observing the time it takes for the page to respond to their click, tap, and keyboard interactions throughout their page visit. The final INP value is the longest interaction observed, ignoring any outliers.

  • Cumulative Layout Shift (CLS) is a measure of how much site layout shifts as visible page elements load in and move the position of other elements.

Why CWV is important for web designers

As a web designer, you strive to create the most impactful site browsing experiences for your clients’ visitors, of which compelling, trendy aesthetics are a critical part. But ultimately, great visuals can’t save poor browsing experiences.

Consider a potential client who is a business owner. Before soliciting your services, they’ll want to know that as many customers and prospects will be able to access and navigate their website—and enjoy using it—as possible. They want to confidently know they’ll get the greatest return on their investment—your services.

CWV offers measurements specifically for gauging poor site responsiveness, something site designers previously couldn’t access. By designing sites with CWV in mind, you can give site visitors the best browsing experience possible. In doing so, you position your clients to better convert visitors and sell more products and services.

How to boost CWV performance

You can improve CWV by focusing on its three core pillars:

Improve Largest Contentful Paint (LCP)

Squarespace’s performance team is aggressively pursuing improvements to our platform that will greatly benefit performance of your sites’ LCP—the time it takes to render a page’s largest visible content element from when the user requests its URL. As the team works on these improvements, you can manually improve site LCP through image optimization. Squarespace automatically compresses images, but manual image optimization can also impact LCP.

Don’t neglect the images below the fold—the part of the webpage a visitor scrolls to see, which can vary depending on the device used. Lazy loading is when images below the fold only load when the visitor scrolls down to them, and can be used on nonessential images to net faster load times. As with image compression, Squarespace automatically sets images to lazy load—and all images with animation settings turned on will lazy load. Remove nonessential above-the-fold images if possible, or reduce their sizes to help them load quickly.

In certain cases, visual effects that enhance user experience can impact LCP. For example, you can use the Fade site-wide animation to delay reveal of a site, fading its content in as the visitor scrolls down the page. Disabling this animation from the site’s Animations panel is a quick way to potentially improve a site’s LCP by making site elements appear visually static.

Custom code can also impact LCP, particularly on Squarespace websites, as the inclusion of custom code can sometimes cause the platform to omit performance improvements that can’t safely be applied. Minimize the amount of custom JavaScript code that must load before rendering content. If custom JavaScript is necessary for a site build, consider adding it to the bottom of the page, and if that’s not possible, specify that it loads asynchronously or deferred by setting the “async” and “defer” attributes in <script> tags to true, respectively, anywhere you use custom code (such as in code blocks).

Keep custom CSS as concise as possible, and consider whether your styles can be included in HTML using a <style> element instead, as by default, linked stylesheets will block page rendering while loading. Minimizing render-blocking requests can help avoid damaging a site’s LCP scores. Whenever possible, consider whether custom code can be removed or moved to a page-end section, as custom code in the top-most sections can negatively impact site performance. Learn more about adding custom code to your site.

Emphasize Interaction to Next Paint (INP)

Interaction to Next Paint—a page's overall user interaction responsiveness—has always been a massive priority for—and strength of–the Squarespace performance engineering team. As such, INP for your site builds will be very strong by default.

On the off chance you observe INP delays, consider if any custom code is contributing to interaction delays, particularly for forms and buttons. Form fields should provide instant feedback when a user interacts with them, such as showing validation errors. Delays in validation or form submission can affect INP, so optimize these processes for faster performance and better INP. Confirm that actions triggered by visitor clicks, like submitting forms or opening modal windows, are fast and don’t require long-running scripts or API calls to execute.

Advance Cumulative Layout Shift (CLS)

The third way to improve CWV is by improving Cumulative Layout Shift—how much site layouts shift as visible page elements load in. Start by setting explicit width and height sizes for videos and images, particularly hero images, whether they’re manually inserted or dynamically loaded. This helps the browser allocate the correct amount of space for the content before it finishes loading, preventing layout shifts and improving rendering speed.

Avoid using JavaScript to dynamically insert or resize elements after page load, especially if these risk shifting other content around. Be mindful of how you use animations during page load, as poor animation implementation can increase CLS. Use CSS code “font-display: swap” to display fallback fonts while custom fonts load to prevent layout shifts caused by custom fonts loading late. Finally, for elements like ads or dynamic content, use placeholders or background colors that resemble the final content’s size and appearance for matching pre- and post-load visual experiences.

Squarespace emphasizes CWV performance at every turn

Improving CWV can be highly technical and complex. Fortunately, the Squarespace platform automates many of the processes necessary to improve CWV in client sites and deliver stronger browsing experiences, freeing you to invest more time and energy in other aspects of running your business.

Squarespace has made strides to improve the site builder’s CWV performance. Squarespace’s overall mobile ecommerce CWV scores have drastically improved, from 33% in 2022 to 60% in 2024. In particular:

  • Mobile LCP improved 27% year-over-year

  • Mobile CLS improved 15% year-over-year

  • Mobile INP improved 5% year-over-year


You can save time improving CWV for client sites and your own sites with automated and manual processes streamlined on Squarespace. Read the Web Almanac for more information on Squarespace’s CWV performance.

Squarespace’s performance team is constantly pursuing and implementing improvements to remove CWV bottlenecks beyond your control, so you can focus more on incredible designs and doing what you love.

Looking to improve on-page and SEO performance for Squarespace sites? Check out these additional resources to expand your knowledge:


Want more?

Check out Squarespace Circle, Squarespace’s program for professional designers and web design agencies. Along with exclusive content, discounts, and other perks, Circle brings experts together from across the globe to exchange advice while connecting with new clients and collaborators.


Devin Raposo

Devin Raposo is a content creator at Squarespace writing content and producing events aimed at creative professionals, including Circle members.

Previous
Previous

How to Create a Boutique Hotel Website

Next
Next

How Web Designers Can Tap Into the Ecommerce Opportunity on Squarespace