{"id":29737,"date":"2021-10-04T13:49:51","date_gmt":"2021-10-04T11:49:51","guid":{"rendered":"https:\/\/yieldbird.com\/?p=29737"},"modified":"2024-07-22T19:27:11","modified_gmt":"2024-07-22T17:27:11","slug":"core-web-vitals-what-you-can-realistically-do-to-improve-your-scores","status":"publish","type":"post","link":"https:\/\/yieldbird.com\/research-hub\/core-web-vitals-what-you-can-realistically-do-to-improve-your-scores\/","title":{"rendered":"Core Web Vitals. What You Can (Realistically) Do To Improve Your Scores?"},"content":{"rendered":"\n<p class=\"has-medium-font-size wp-block-paragraph\"><span class=\"has-inline-color has-black-color\">Ever since they were announced in May 2020, followed by their introduction in mid-June 2021 and beyond, <strong>Core Web Vitals<\/strong> have remained the buzz-phrase of the moment. <\/span><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><span class=\"has-inline-color has-black-color\">Here we offer a comprehensive guide on <em>how to check your vitals<\/em>, and we consider what can realistically be done to improve your score.<\/span><\/p>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"toc_container\">\n<h4><b>Table of contents<\/b><\/h4><br>\n<p style=\"font-size: 17px;\">\n<u>\n<a href=\"#1\">What can you do to optimise your Core Web Vitals<\/a><br>\n<a href=\"#2\">What can you do to improve Largest Contentful Paint<\/a><br>\n<a href=\"#3\">A First Input Delay Problems <\/a><br>\n<a href=\"#4\">How to optimize the Cumulative Layout Shift<\/a><br>\n<\/a><\/u><\/p>\n<\/div>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"1\" style=\"font-size: 25px\">What can you do to optimise your Core Web Vitals? \n<\/h2>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\"><a href=\"https:\/\/yieldbird.com\/are-core-web-vitals-really-vital-to-your-website-success\/\" target=\"_blank\" rel=\"noreferrer noopener\">The metrics of Core Web Vitals<\/a> are designed to showcase a website\u2019s overall performance, and they have a crucial impact on a website\u2019s ranking in terms of search results. Therefore, any business that values visibility and brand awareness should take note of their metrics, and aim to adjust those of the website accordingly. First and foremost &#8211; check your vitals! For this task, there are multiple tools available, where you can input your website\u2019s URL and check how you perform on each <em>Core Web Vital<\/em> separately.<\/span><\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"Be_aware\" style=\"font-size: 20px\">Here is a list of tools that you might find interesting: \n<\/h3>\n\n\n\n<div style=\"height:26px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\" style=\"font-size:17px\"><li><span class=\"has-inline-color has-black-color\"><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><b>Page Speed Insights<\/b><\/a> &#8211; a free tool offered by Google which <strong>analyses Core Web Vitals<\/strong> for mobile and desktop.<\/span><\/li><li><span class=\"has-inline-color has-black-color\"><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><b>Lighthouse<\/b><\/a>&nbsp;&#8211; an open-source, automated tool for improving the quality of web pages. Since it runs in Chrome Developer tools, you might need a developer to generate a report<\/span><\/li><li><span class=\"has-inline-color has-black-color\"><a rel=\"nofollow\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\"><b>Web Vitals Extension for Chrome&nbsp;<\/b><\/a>&#8211; a browser extension that measures the <em>Core Web Vitals<\/em>, providing instant and comprehensive feedback<\/span>.<\/li><\/ul>\n\n\n\n<div style=\"height:37px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 style=\"font-size: 25px\">You\u2019ve uncovered an issue with your vitals. So what are the next steps? \n<\/h2>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Most of the free tools available online will give you detailed information on the state of your Core Web Vitals but will offer few specific tips on what can be done to improve your score. So here we\u2019ve decided to put together a list of potential improvements that you can try to implement in order to <strong>boost your Core Web Vitals score<\/strong>.<\/span> <\/p>\n\n\n\n<div style=\"height:28px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-top\" style=\"grid-template-columns:28% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/yieldbird.com\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-1024x1024.png\" alt=\"how to improve core web vitals\" class=\"wp-image-29803 size-full\" srcset=\"https:\/\/yieldbird.com\/research-hub\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-1024x1024.png 1024w, https:\/\/yieldbird.com\/research-hub\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-300x300.png 300w, https:\/\/yieldbird.com\/research-hub\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-150x150.png 150w, https:\/\/yieldbird.com\/research-hub\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-768x768.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<article\n  style=\"background: #f6f6f6; margin-bottom: 40px;\ntransition: all 0.2s;\"\n  class=\"career_propose\"\n>\n  <div style=\"padding: 1.5rem; text-align: center;\">\n    <span style=\"font-size: 0.9rem; color: #ff2450;\">TIP OF THE ARTICLE<\/span>\n    <div style=\"display: flex;justify-content: center; height: 165px; align-items: center;\">\n      <h5 style=\"margin: 0.5rem 0 1rem 0;\"><span style=\"color: #000000;\"><b>Each website is unique, so not all improvements might work. You might need an expert to determine the exact root of the problem &#8211; Yieldbird can help with that!<\/b><\/h5><\/p>\n    <\/div>\n  <\/div>\n<\/article>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"2\" style=\"font-size: 20px\">What can you do to improve Largest Contentful Paint (LCP)?\n<\/h2>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">A problem with <strong>Largest Contentful Paint<\/strong> (LCP) means poor loading time because this web s metric looks at how fast the biggest chunks of your website load. There are multiple ways you could approach this problem, but here are 4 pointers that we think will be most useful when looking to improve this first <em>Core Web Vitals<\/em> score:<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Optimize and compress images&nbsp;<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Sometimes even a slight compression on all images can make a huge difference in the page\u2019s loading speed.<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Optimize the JavaScript files<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Here you might need a developer\u2019s support because, in order to determine the exact issues that are causing your website to load slower, you will really need to dive deep.&nbsp;<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Implement lazy loading&nbsp;<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Lazy loading allows the website to load the images and ads at the exact time when users scroll down through the page, thus not compromising the website\u2019s loading speed.&nbsp;<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Improve server response time<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">The longer it takes a browser to receive content from the server, the longer it will take to render anything on the screen. A faster server response time will directly improve all page metrics, so it\u2019s good practice to ensure that the server response time is optimal.&nbsp;<\/span><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"3\" style=\"font-size: 20px\">A First Input Delay (FID) Problems\n<\/h2>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">If you notice an issue with <strong>First Input Delay<\/strong>, it means that the user has to wait a long time to interact with your website, causing them to become frustrated. Here, we have compiled a couple of fixes that may aid the situation:<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Reduce JavaScript execution time<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Reducing the JavaScript execution time means the time between the user&#8217;s browser executing the code and page loading has been reduced. You can do this by making recourse to unused JavaScript or minimizing unused polyfills.<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Break up long tasks<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">If you\u2019ve already tried to reduce the amount of JavaScript that loads, you can alternatively try to break up the long lines of code into smaller, serial tasks.<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Introduce code-splitting<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Code-splitting (also known as lazy loading) is basically splitting large JavaScript bundles into smaller parts that can be loaded conditionally.&nbsp;<\/span><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-top\" style=\"grid-template-columns:28% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/yieldbird.com\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-1024x1024.png\" alt=\"improve core web vitals\" class=\"wp-image-29803 size-full\" srcset=\"https:\/\/yieldbird.com\/research-hub\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-1024x1024.png 1024w, https:\/\/yieldbird.com\/research-hub\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-300x300.png 300w, https:\/\/yieldbird.com\/research-hub\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-150x150.png 150w, https:\/\/yieldbird.com\/research-hub\/wp-content\/uploads\/2021\/09\/yieldbird-ideas-for-publishers-768x768.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<article\n  style=\"background: #f6f6f6; margin-bottom: 40px;\ntransition: all 0.2s;\"\n  class=\"career_propose\"\n>\n  <div style=\"padding: 1.5rem; text-align: center;\">\n    <span style=\"font-size: 0.9rem; color: #ff2450;\">TIP OF THE ARTICLE<\/span>\n    <div style=\"display: flex;justify-content: center; height: 165px; align-items: center;\">\n      <h5 style=\"margin: 0.5rem 0 1rem 0;\"><span style=\"color: #000000;\"><b>The issues with FID are most likely to be JavaScript related. Again, you really need to dive deep into your code setup in order to address the problems.<\/b><\/h5><\/p>\n    <\/div>\n  <\/div>\n<\/article>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"4\" style=\"font-size: 20px\">How to optimize the Cumulative Layout Shift (CLS)?\n<\/h2>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Problems with <strong>CLS<\/strong> mean that your content is shifting, due to different loading times for different objects. If you\u2019re experiencing issues with this metric, here are some recommendations by Yieldbird experts:<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Provide proper dimensions for images and embeds<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">If an image\u2019s dimensions are not in the proper size, it usually appears later on a page &#8211; meaning the content that the user is consuming, can suddenly shift. This is because an image that did not load fast enough, has appeared out of nowhere.<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Reserve a spot for ads<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Similarly to images, if ads do not have a dedicated spot on the website, the content might suddenly shift while loading, because the browser \u201cdid not understand\u201d where the ad was supposed to go.<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\" style=\"font-size:17px\"><li><b><span class=\"has-inline-color has-black-color\">Optimize font loading<\/span><\/b><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">If you download and render fonts, these actions might cause layout shifts.<\/span><\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"Create_a_safe\" style=\"font-size: 25px\">Unsure about what to do next? Yieldbird can help!\n\n<\/h3>\n\n\n\n<div style=\"height:37px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">In an ever-changing world, the quality of your website determines user engagement. That\u2019s why it\u2019s so important to <strong>get your Core Web Vitals right<\/strong>! <\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px\"><span class=\"has-inline-color has-black-color\">Yieldbird is an industry leader in all Programmatic-related aspects, and now we can also help you make your page faster, more interactive, and shiftless. <\/span><\/p>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background\" href=\"https:\/\/yieldbird.com\/core-web-vitals-excellence\/\" style=\"border-radius:6px;background-color:#ff2450;color:#fffffa\" target=\"_blank\" rel=\"noreferrer noopener\">Book a consultation now!<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-text-color\" href=\"https:\/\/yieldbird.com\/publishers-solutions\/\" style=\"border-radius:6px;color:#ff2450\" target=\"_blank\" rel=\"noreferrer noopener\">For Publishers<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever since they were announced in May 2020, followed by their introduction in mid-June 2021 and beyond, Core Web Vitals have remained the buzz-phrase of the moment. Here we offer a comprehensive guide on how to check your vitals, and we consider what can realistically be done to improve your score. Table of contents What [&hellip;]<\/p>\n","protected":false},"author":58,"featured_media":29911,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[28,39],"tags":[],"content-category":[],"class_list":["post-29737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ad-tech","category-guides"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/posts\/29737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/comments?post=29737"}],"version-history":[{"count":1,"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/posts\/29737\/revisions"}],"predecessor-version":[{"id":33326,"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/posts\/29737\/revisions\/33326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/media\/29911"}],"wp:attachment":[{"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/media?parent=29737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/categories?post=29737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/tags?post=29737"},{"taxonomy":"content-category","embeddable":true,"href":"https:\/\/yieldbird.com\/research-hub\/wp-json\/wp\/v2\/content-category?post=29737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}