{"id":639368,"date":"2024-09-24T14:00:00","date_gmt":"2024-09-24T11:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/"},"modified":"2024-09-24T14:00:00","modified_gmt":"2024-09-24T11:00:00","slug":"optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/","title":{"rendered":"#Optimizing Largest Contentful Paint: 5 tips for a faster website by DebugBear"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2934130de1c\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2934130de1c\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/#Learn_new_techniques_to_speed_up_your_website_and_pass_Googles_Core_Web_Vitals_assessment\" >Learn new techniques to speed up your website and pass Google\u2019s Core Web Vitals assessment.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/#What_is_Largest_Contentful_Paint\" >What is Largest Contentful Paint?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/#1_Add_speculation_rules_to_your_website\" >1. Add speculation rules to your website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/#2_Optimize_LCP_with_real_user_data\" >2. Optimize LCP with real user data<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/#The_LCP_image_can_vary_between_visitors_%E2%80%93_even_on_the_same_page\" >The LCP image can vary between visitors \u2013 even on the same page.\u00a0<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/#3_Identify_slow_LCP_subparts\" >3. Identify slow LCP subparts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/#4_Preload_and_prioritize_the_LCP_image\" >4. Preload and prioritize the LCP image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-by-debugbear\/#5_Monitor_page_speed_continuously\" >5. Monitor page speed continuously<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"subhead\" itemprop=\"alternativeHeadline\"><span class=\"ez-toc-section\" id=\"Learn_new_techniques_to_speed_up_your_website_and_pass_Googles_Core_Web_Vitals_assessment\"><\/span>Learn new techniques to speed up your website and pass Google\u2019s Core Web Vitals assessment.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><\/p>\n<div class=\"bialty-container\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" alt=\"DebugBear 20240924\" class=\"wp-image-446854\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-800x450.jpg.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-600x338.jpg.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-200x113.jpg.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-768x432.jpg.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-1536x864.jpg 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924.jpg.webp 1920w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-800x450.jpg.webp\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-800x450.jpg.webp\" alt=\"DebugBear 20240924\" class=\"wp-image-446854\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-800x450.jpg.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-600x338.jpg.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-200x113.jpg.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-768x432.jpg.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924-1536x864.jpg 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924.jpg.webp 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\"><\/figure>\n<\/div>\n<p>Page speed is important for a good user experience.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/metrics\/core-web-vitals?utm_campaign=sel5\">Google\u2019s Core Web Vitals metrics<\/a> also can <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/core-web-vitals-ranking-factor?utm_campaign=sel5\">impact organic search rankings<\/a>.<\/p>\n<p>This article will review some new and less well-known <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>roaches to make your website faster.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-what-is-largest-contentful-paint\"><span class=\"ez-toc-section\" id=\"What_is_Largest_Contentful_Paint\"><\/span>What is Largest Contentful Paint?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/metrics\/largest-contentful-paint?utm_campaign=sel5\">Largest Contentful Paint<\/a> (LCP) measures how soon visitors can see the main content after opening a webpage.<\/p>\n<p>LCP is one of three Core Web Vitals metrics used to assess a webpage\u2019s performance. The other Core Web Vitals are:<\/p>\n<ul class=\"wp-block-list\">\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/metrics\/cumulative-layout-shift?utm_campaign=sel5\">Cumulative Layout Shift<\/a> (CLS), which measures layout stability.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/metrics\/interaction-to-next-paint?utm_campaign=sel5\">Interaction to Next Paint<\/a> (INP), which measures how quickly the page responds to user interactions.<\/li>\n<\/ul>\n<p>Google defines thresholds for each metric that websites need to hit to get a ranking boost.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"262\" alt=\"Image1\" class=\"wp-image-446799\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-800x262.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-600x196.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-200x65.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-768x251.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1.png.webp 1066w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-800x262.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"262\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-800x262.png.webp\" alt=\"Image1\" class=\"wp-image-446799\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-800x262.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-600x196.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-200x65.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1-768x251.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image1.png.webp 1066w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/figure>\n<\/div>\n<p>Here are a few techniques you can use to improve your LCP scores.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-1-add-speculation-rules-to-your-website\"><span class=\"ez-toc-section\" id=\"1_Add_speculation_rules_to_your_website\"><\/span>1. Add speculation rules to your website<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hopefully, many of your visitors navigate around your website to explore all your business has to offer.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/speculation-rules?utm_campaign=sel5\">Speculation rules<\/a> are a new browser feature that makes it easy to optimize these later pageviews. They allow websites to proactively load other pages on your website before the visitor opens them.<\/p>\n<p>For example, after a visitor reads a blog post they might check out your homepage next, or go to a signup page. Those <strong>navigations can be instant<\/strong> if these pages are pre-rendered using speculation rules. That means your LCP score will be below 100 milliseconds.<\/p>\n<p>Adding speculation rules to your website is easy. Just add a script tag like this to your website:<\/p>\n<pre class=\"wp-block-code\"><code>&lt;script type=\"speculationrules\"&gt;\n {\n   \"prerender\": [\n     {\n       \"urls\": [\"https:\/\/searchengineland.com\/\", \"\/signup\"]\n     }\n   ]\n }\n&lt;\/script&gt;<\/code><\/pre>\n<h2 class=\"wp-block-heading\" id=\"h-2-optimize-lcp-with-real-user-data\"><span class=\"ez-toc-section\" id=\"2_Optimize_LCP_with_real_user_data\"><\/span>2. Optimize LCP with real user data<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are a lot of website performance testing tools, including <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed Insights<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/test\/website-speed?utm_campaign=sel5\">DebugBear\u2019s free website speed test<\/a>.<\/p>\n<p>These tools run what\u2019s called a lab test: the page is opened in a controlled testing environment where a performance measurement is taken.<\/p>\n<p>However, sometimes the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/lcp-lab-field-differences?utm_campaign=sel5\">lab-based LCP values won\u2019t match real user experiences<\/a>. This can happen for a number of reasons, including:<\/p>\n<ul class=\"wp-block-list\">\n<li>Lab tests might hit a cache while most users need data to be regenerated.<\/li>\n<li>Many real users are logged in and experience slower page loads.<\/li>\n<li>Real users have different network and device speeds from the lab environment.<\/li>\n<li>Visitors have a different device size from the lab test.<\/li>\n<\/ul>\n<p>Real website visitors also have diverse experiences. Optimizations that work well for one visitor segment might not work well for another.<\/p>\n<p>Here a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/real-user-monitoring?utm_campaign=sel5\">real user monitoring<\/a> (RUM) tool can help you better understand what\u2019s happening on your website and which optimizations will have the biggest impact.<\/p>\n<p>For example, RUM data can tell you what page elements are responsible for the LCP rendering milestones. This will vary between visitors, and knowing what LCP elements need to be optimized provides the foundation for a good LCP score.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"410\" alt=\"Image8\" class=\"wp-image-446800\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-800x410.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-600x308.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-200x103.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-768x394.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8.png.webp 998w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-800x410.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"410\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-800x410.png.webp\" alt=\"Image8\" class=\"wp-image-446800\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-800x410.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-600x308.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-200x103.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8-768x394.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image8.png.webp 998w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/figure>\n<\/div>\n<p>When Google reports real user page speed <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/articles\/vitals#core-web-vitals\">it looks at the 75th percentile<\/a> value. For example, if your LCP score is 3 seconds, that means that 75% of your users waited less than 3 seconds for the main page content, and 25% waited longer than that.<\/p>\n<p>However, this is just an aggregate value. Some visitors might wait 5 seconds or more \u2013 and these people will likely bounce.<\/p>\n<p>Real user monitoring can give you a more detailed breakdown of how different visitors experience your website. For example, by showing a histogram for each of the Core Web Vitals metrics. You can also look at specific visitor experiences to optimize them.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"419\" alt=\"Image4\" class=\"wp-image-446801\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image4.png.webp 630w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image4-508x338.png.webp 508w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image4-170x113.png.webp 170w\" data-lazy-sizes=\"(max-width: 630px) 100vw, 630px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image4.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"419\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image4.png.webp\" alt=\"Image4\" class=\"wp-image-446801\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image4.png.webp 630w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image4-508x338.png.webp 508w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image4-170x113.png.webp 170w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\"><\/figure>\n<\/div>\n<p>We\u2019ve already seen that visitor devices have a big impact on your website\u2019s LCP score.<\/p>\n<p>Depending on the screen size of each website visitor, different content will be visible above the fold, and images will be displayed at different sizes.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-the-lcp-image-can-vary-between-visitors-even-on-the-same-page-nbsp\"><span class=\"ez-toc-section\" id=\"The_LCP_image_can_vary_between_visitors_%E2%80%93_even_on_the_same_page\"><\/span>The LCP image can vary between visitors \u2013 even on the same page.\u00a0<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lab tests always use the same screen size, but real user data captures the variety of devices used to access your website.<\/p>\n<p>Real user monitoring data can therefore show you exactly what images on your website are loading slowly most often and need to be optimized.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"379\" alt=\"Image2\" class=\"wp-image-446802\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-800x379.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-600x285.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-200x95.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-768x364.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2.png.webp 934w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-800x379.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"379\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-800x379.png.webp\" alt=\"Image2\" class=\"wp-image-446802\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-800x379.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-600x285.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-200x95.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2-768x364.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image2.png.webp 934w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-3-identify-slow-lcp-subparts\"><span class=\"ez-toc-section\" id=\"3_Identify_slow_LCP_subparts\"><\/span>3. Identify slow LCP subparts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Four things need to happen to display an LCP image on your website. These <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/lcp-subparts?utm_campaign=sel5\">LCP subparts<\/a> are:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Time to First Byte<\/strong>: How quickly does the server respond to the initial document request?<\/li>\n<li><strong>Resource Load Delay<\/strong>: How quickly does the browser discover the LCP image?<\/li>\n<li><strong>Resource Load Time<\/strong>: How long does it take to download the LCP image?<\/li>\n<li><strong>Render Delay<\/strong>: Does the LCP image show up im<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>tely after loading or is there a delay?<\/li>\n<\/ul>\n<p>Many page speed tools are built on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/lighthouse-page-speed?utm_campaign=sel5\">Google\u2019s free Lighthouse test<\/a>, including PageSpeed Insights. Here, in the <em>Diagnostics<\/em> section, you can find details on the <em>Largest Contentful Paint element<\/em>. Below the element preview Lighthouse shows the LCP subpart breakdown.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"508\" alt=\"Image3\" class=\"wp-image-446803\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-800x508.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-533x338.png.webp 533w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-178x113.png.webp 178w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-768x487.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-1536x974.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3.png.webp 1592w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-800x508.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"508\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-800x508.png.webp\" alt=\"Image3\" class=\"wp-image-446803\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-800x508.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-533x338.png.webp 533w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-178x113.png.webp 178w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-768x487.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3-1536x974.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image3.png.webp 1592w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/figure>\n<\/div>\n<p>Depending on what LCP component contributes the most to your overall score, different optimizations will make sense for your website.<\/p>\n<p>For example, if Load Time is high, that would suggest that you have a large image on your website that takes a long time to download. In that case, resizing the image or using a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/image-formats?utm_campaign=sel5\">modern image format like WebP<\/a> would be a promising optimization.<\/p>\n<p>However, Google recently published an article on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/blog\/common-misconceptions-lcp\">common misconceptions about how to optimize the LCP metric<\/a> that found:<\/p>\n<ul class=\"wp-block-list\">\n<li>Load Time often isn\u2019t a big factor.<\/li>\n<li>Other subparts like TTFB and Load Delay play a bigger role in improving LCP.<\/li>\n<\/ul>\n<p>Make sure your server responds quickly when the client requests the HTML. In the HTML, directly reference the LCP image to ensure there is no delay between loading the HTML and discovering the image.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-4-preload-and-prioritize-the-lcp-image\"><span class=\"ez-toc-section\" id=\"4_Preload_and_prioritize_the_LCP_image\"><\/span>4. Preload and prioritize the LCP image<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When the browser loads your website, the HTML code will <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/how-websites-work?utm_campaign=sel5\">reference a large number of additional resources<\/a> (e.g., stylesheets, scripts, images). The browser needs to assign a priority to each of these requests.<\/p>\n<p>Images are <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a>ly considered low priority, as they don\u2019t block other content from appearing on the website. However, the main image that\u2019s responsible for the LCP should be loaded early.<\/p>\n<p>A <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/docs\/waterfall?utm_campaign=sel5\">request waterfall visualization<\/a> can surface these issues. In this example, we see that the LCP image only starts loading late and initially has a low priority. Then, when the browser realizes that the image is in the viewport, the priority changes to high.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"386\" alt=\"Image6\" class=\"wp-image-446804\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-800x386.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-600x290.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-200x97.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-768x371.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-1536x741.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6.png.webp 1674w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-800x386.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"386\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-800x386.png.webp\" alt=\"Image6\" class=\"wp-image-446804\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-800x386.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-600x290.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-200x97.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-768x371.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6-1536x741.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image6.png.webp 1674w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/figure>\n<\/div>\n<p>The LCP score can be optimized with the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/fetchpriority-attribute?utm_campaign=sel5\">fetchpriority attribute<\/a>. This HTML attribute tells the browser if a given resource is important, and can simply be added to an img tag like this:<\/p>\n<pre class=\"wp-block-code\"><code>&lt;img src=\"https:\/\/searchengineland.com\/photo.jpg\" fetchpriority=\"high\"&gt;<\/code><\/pre>\n<p>With this attribute in place, browsers can start loading the image as soon as possible and prioritize downloading it over other resources on the page.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"352\" alt=\"Image5\" class=\"wp-image-446805\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-800x352.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-600x264.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-200x88.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-768x338.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-1536x677.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5.png.webp 1666w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-800x352.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"352\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-800x352.png.webp\" alt=\"Image5\" class=\"wp-image-446805\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-800x352.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-600x264.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-200x88.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-768x338.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5-1536x677.png 1536w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image5.png.webp 1666w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/figure>\n<\/div>\n<p>If the image isn\u2019t referenced directly at the top of the HTML document, a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/resource-hints-rel-preload-prefetch-preconnect?utm_campaign=sel5\">preload resource hint<\/a> can also be used to start loading the image early.<\/p>\n<p>That way, when the image is added to the page, the image shows up right away rather than only starting to load then.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-5-monitor-page-speed-continuously\"><span class=\"ez-toc-section\" id=\"5_Monitor_page_speed_continuously\"><\/span>5. Monitor page speed continuously<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Running one-off tests on your website is a great way to start optimizing your performance.<\/p>\n<p>But are those optimizations actually working for real users?\u00a0<\/p>\n<p>And what happens if there\u2019s an unrelated change that makes performance worse?\u00a0<\/p>\n<p>In that case you need a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/?utm_campaign=sel5\">website monitoring tool like DebugBear<\/a>.<\/p>\n<p>A performance monitoring tool continuously tests your website and your competitors\u2019 websites. You\u2019ll get:<\/p>\n<ul class=\"wp-block-list\">\n<li>Detailed reports with suggestions to improve your page speed.<\/li>\n<li>Alerted if your website performance gets worse.<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"369\" alt=\"Image7\" class=\"wp-image-446806\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-800x369.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-600x277.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-200x92.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-768x354.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7.png.webp 1405w\" data-lazy-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-800x369.png.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"369\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-800x369.png.webp\" alt=\"Image7\" class=\"wp-image-446806\" srcset=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-800x369.png.webp 800w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-600x277.png.webp 600w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-200x92.png.webp 200w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7-768x354.png.webp 768w,https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/image7.png.webp 1405w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/figure>\n<\/div>\n<p>DebugBear includes three types of data:<\/p>\n<ul class=\"wp-block-list\">\n<li>Scheduled lab-based tests.<\/li>\n<li>Google <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/blog\/chrome-user-experience-report?utm_campaign=sel5\">CrUX data<\/a> (which impacts SEO).<\/li>\n<li>Real user monitoring.<\/li>\n<\/ul>\n<p>Having this insight into your website provides the foundation your team needs to pass Google\u2019s Core Web Vitals assessment.\u00a0<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/signup?utm_campaign=sel5\">Start your free 14-day trial today<\/a>.\n<\/div>\n<p><\/p>\n<div class=\"about-author\">\n    About the author<\/p>\n<div class=\"information\">\n<div class=\"author-module\">\n<div class=\"row\">\n<div class=\"col-12 col-lg-3 text-center\">\n<div class=\"avatar\">\n                        <img loading=\"lazy\" decoding=\"async\" class=\"img-fluid\" alt=\"DebugBear\" width=\"140\" height=\"140\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2023\/01\/DebugBear-logo.png.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"img-fluid\" src=\"https:\/\/searchengineland.com\/wp-content\/seloads\/2023\/01\/DebugBear-logo.png.webp\" alt=\"DebugBear\" width=\"140\" height=\"140\">                                          <\/div>\n<\/p><\/div>\n<div class=\"col-12 col-lg-9\">\n<div class=\"about\">\n<div class=\"name\">\n                            <strong>DebugBear<\/strong>\n                        <\/div>\n<div class=\"row g-2 pt-2\">\n<div class=\"col-auto twitter\">\n                                    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/intent\/follow?original_referer=https%3A%2F%2Fsearchengineland.com%2F&amp;region=follow_link&amp;screen_name=debugbear&amp;tw_p=followbutton&amp;variant=2.0\" aria-label=\"opens in a new tab\"><i class=\"fab fa-x-twitter\"><\/i><\/a>\n                            <\/div>\n<div class=\"col-auto\">\n                                    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/company\/debugbear\" aria-label=\"opens in a new tab\"><i class=\"fab fa-linkedin\"><\/i><\/a>\n                                <\/div>\n<\/p><\/div>\n<p>                        <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.debugbear.com\/\">DebugBear<\/a> helps online businesses make their website fast and pass Google&#8217;s Core Web Vitals assessment. Test page speed, get tips to optimize performance, and keep track of metrics over time.                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMN63nwsw68G3Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology<\/a><\/span> category.<\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/searchengineland.com\/optimizing-largest-contentful-paint-5-tips-for-a-faster-website-446798\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn new techniques to speed up your website and pass Google\u2019s Core Web Vitals assessment. Page speed is important for a good user experience. Google\u2019s Core Web Vitals metrics also can impact organic search rankings. This article will review some new and less well-known approaches to make your website faster. What is Largest Contentful Paint?&#8230;<\/p>\n","protected":false},"author":1,"featured_media":639369,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/searchengineland.com\/wp-content\/seloads\/2024\/09\/DebugBear-20240924.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[78070,148056,148084],"class_list":["post-639368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-seo","tag-sponsored-content","tag-technical-optimization"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/639368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=639368"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/639368\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/639369"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=639368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=639368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=639368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}