{"id":33504,"date":"2024-10-11T00:01:00","date_gmt":"2024-10-11T07:01:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=33504"},"modified":"2025-05-21T23:32:17","modified_gmt":"2025-05-22T06:32:17","slug":"improve-core-web-vitals","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/improve-core-web-vitals\/","title":{"rendered":"Better Performance for Better Rankings: 10 Tips for Improving Core Web Vitals"},"content":{"rendered":"\n

You build a beautiful website with engaging content and start sending customers there.<\/p>\n\n\n\n

You’re in an exciting situation, especially if you’re just starting online.<\/p>\n\n\n\n

But after a week of being online, you noticed your site\u2019s loading slower than a sloth on a lazy Sunday, and visitors are bouncing faster than a kangaroo on caffeine.<\/p>\n\n\n\n

Sound familiar? Well, you need to start thinking about what Google calls the Core Web Vitals (CWV)<\/strong>.<\/p>\n\n\n\n

According to the latest Chrome reports, over 50.1%<\/a> of websites already have good Core Web Vitals scores. And this number continues to grow month-over-month, which means more and more savvy site owners are catching on to this performance-boosting secret.<\/p>\n\n\n\n

Here\u2019s the kicker: if you\u2019re not part of that 50% yet, you\u2019re risking your Google rankings, frustrating your visitors, and potentially leaving money on the table.<\/p>\n\n\n\n

Let\u2019s change that, shall we?<\/p>\n\n\n\n

What Are Core Web Vitals, Anyway?<\/h2>\n\n\n\n

Think of Core Web Vitals as your website\u2019s report card.<\/p>\n\n\n\n

As you drive traffic to your website<\/a>, Google uses these metrics to gauge how user-friendly your site is. Basically, it\u2019s measuring your website\u2019s speed, responsiveness, and visual stability.<\/p>\n\n\n\n

\"Bar<\/figure>\n\n\n\n

There are three Core Web Vitals metrics:<\/p>\n\n\n\n

    \n
  1. Largest Contentful Paint (LCP)<\/li>\n\n\n\n
  2. Cumulative Layout Shift (CLS)<\/li>\n\n\n\n
  3. Interaction to Next Paint (INP)<\/li>\n<\/ol>\n\n\n\n

    These may not make sense right now \u2014 Let’s try to understand each of them separately.<\/p>\n\n\n\n

    Largest Contentful Paint (LCP)<\/h3>\n\n\n\n

    Imagine you\u2019re at a restaurant, and the waiter brings out your appetizer almost instantly.<\/p>\n\n\n\n

    That\u2019s what a good LCP does for your website.<\/p>\n\n\n\n\n\n

    \n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

    Largest Contentful Paint<\/h3>\n

    Largest Contentful Paint (LCP) is a metric that tells you how long it takes for the largest content element on a page to load. LCP is one of the three Google Core Web Vitals metrics.<\/p>\n \n Read More <\/a>\n\n<\/div>\n\n\n\n

    It measures how quickly the largest content element \u2014 the hero image, a large video, or a big chunk of text \u2014 loads on your page.<\/p>\n\n\n\n

    According to the same Chrome Core Web Vitals report, 64.8% of websites<\/a> have already achieved their LCP scores. And more new sites are serving up their main content faster every month.<\/p>\n\n\n\n

    If you want to join the LCP hall of fame, you need to aim for a load time of 2.5 seconds or less to increase your website\u2019s conversion rate<\/a>.<\/p>\n\n\n\n

    Anything above four seconds, and you\u2019re losing customers.<\/p>\n\n\n\n

    Cumulative Layout Shift (CLS)<\/h3>\n\n\n\n

    Think of times when you might have clicked a button on a mobile site \u2014 and another element loaded in its place, making the button disappear \u2014 and you clicked that element instead.<\/p>\n\n\n\n

    It’s not fun. The CLS score aims to eliminate this.<\/p>\n\n\n\n

    It measures how much your page elements move around as the page loads. A low CLS score means that your layout stays pretty stable throughout the entire loading process.<\/p>\n\n\n\n

    You can consider your website mobile optimized<\/a> if the layout does not shift during load.<\/p>\n\n\n\n

    As of September 2024, 78.2% of websites<\/a> have achieved good CLS scores, with a consistent increase in the numbers month-over-month. This shows that more developers are prioritizing a smooth, shift-free user experience.<\/p>\n\n\n\n

    So, if you want a stable user experience, aim for a CLS score of 0.1 or less. Anything above 0.25, and your users will feel like the entire page is moving around.<\/p>\n\n\n\n

    Interaction to Next Paint (INP)<\/h3>\n\n\n\n

    INP was added on March 12, 2024, to the Core Web Vitals framework, replacing the older First Input Delay (FID) metric. While FID only measures the first user interaction, INP looks at all interactions throughout a page visit.<\/p>\n\n\n\n

    Chrome report data shows that 85% of websites<\/a> are already scoring good INP scores. It\u2019s likely that if you\u2019re optimizing your site for the previous two scores well, INP will fall into place.<\/p>\n\n\n\n

    To keep your users happy and engaged, aim for an INP of 200 milliseconds or less. If you\u2019re hovering between 200 and 500 milliseconds, you\u2019ve got some work to do.<\/p>\n\n\n\n

    Anything above 500 milliseconds, and you are giving your visitors the dial-up experience.<\/em><\/p>\n\n\n\n

    How To Measure Core Web Vitals<\/h2>\n\n\n\n

    Before you start working on improving your Core Web Vitals scores, it\u2019s wise to get an idea of where your site currently stands. This way, you\u2019ll be able to measure your progress. Regularly assessing your scores can be a valuable part of your website maintenance<\/a>.<\/p>\n\n\n\n

    Let\u2019s look at a few different ways to measure your website\u2019s performance.<\/p>\n\n\n\n

    PageSpeed Insights<\/h3>\n\n\n\n

    There are a handful of online tools you can use to measure Core Web Vitals, including Pingdom and GTmetrix. However, we recommend using Google PageSpeed Insights<\/a>.<\/p>\n\n\n\n

    To get started, enter the URL of your website, and then click on the Analyze<\/strong> button.<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n

    When it\u2019s done analyzing your site, it will provide a summary of some of the key data and the site\u2019s Core Web Vitals data. As you can see in the image above, the default Google website has:<\/p>\n\n\n\n