{"id":161041,"date":"2023-06-14T21:06:20","date_gmt":"2023-06-15T02:06:20","guid":{"rendered":"https:\/\/ahrefs.com\/blog\/?p=161041"},"modified":"2025-01-22T18:30:01","modified_gmt":"2025-01-22T23:30:01","slug":"largest-contentful-paint-lcp","status":"publish","type":"post","link":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/","title":{"rendered":"What Is Largest Contentful Paint (LCP) &amp; How To Improve It"},"content":{"rendered":"\n<div class=\"intro-txt\">Largest Contentful Paint (LCP) is the amount of time it takes to load the single largest visible element in the viewport. It represents the website being visually loaded and is one of the three Core Web Vitals (CWV) metrics Google uses to measure page experience.<\/div>\n\n\n\n<p>The first impression users have of your site is how fast it appears to be loaded.<\/p>\n\n\n\n<p>The largest element is usually going to be a featured image or maybe the &lt;h1&gt; tag. But it could also be any of&nbsp;these:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;img&gt; element<\/li>\n\n\n\n<li>&lt;image&gt; element inside an &lt;svg&gt; element<\/li>\n\n\n\n<li>Image inside a &lt;video&gt; element<\/li>\n\n\n\n<li>Background image loaded with the url() function<\/li>\n\n\n\n<li>Blocks of&nbsp;text<\/li>\n<li><span style=\"font-weight: 400;\">The first frame painted for an autoplaying &lt;video&gt; element<\/span><\/li>\n<li><span style=\"font-weight: 400;\">The first frame of an animated image format, such as animated GIFs<\/span><\/li>\n<\/ul>\n\n\n\n\n\n<p>Anything outside the viewport or any overflow is not considered when figuring out the size. If an image occupies the entire viewport, it\u2019s not considered for&nbsp;LCP.<\/p>\n\n\n\n<p>Let\u2019s look at how fast your LCP should be and how to improve it.<\/p>\n\n\n\n<div class=\"intro-tok\" id=\"intro_tok\" style=\"display:none;\"><div class=\"intro-title\">Contents<\/div><a href=\"#\" class=\"expand-dots\"><span><\/span><span><\/span><span><\/span><\/a><\/div>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"What\u2019s a good LCP value?\" data-section=\"whats-a-good-lcp-value\">\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s a good LCP&nbsp;value?<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>A good LCP value is less than 2.5 seconds and should be based on Chrome User Experience Report (CrUX) data. This is data from actual users of Chrome who are on your site and have opted in to sharing this information. You need 75% of page visits to load in 2.5 seconds or&nbsp;less.<\/p>\n\n\n\n<p>Your page may be classified into one of the following buckets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Good: &lt;=2.5s<\/li>\n\n\n\n<li>Needs improvement: &gt;2.5s and &lt;=4s<\/li>\n\n\n\n<li>Poor: &gt;4s<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1634\" class=\"wp-image-161247\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png\" alt=\"LCP thresholds for good, needs improvement, and poor\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-416x425.png 416w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-768x784.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-1504x1536.png 1504w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\">\n\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">LCP data&nbsp;<\/h3>\n\n\n\n<p>57.1% of sites are in the good LCP bucket as of April 2023. This is averaged across the site. As we mentioned, you need 75% of page visits to load in 2.5 seconds or less to show as \u201cgood\u201d here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1540\" class=\"wp-image-161389\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-1.png\" alt=\"Percentage of good LCP values from CrUX CWV data (April 2023)\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-1.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-1-442x425.png 442w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-1-768x739.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-1-1536x1478.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>LCP is the Core Web Vital that people are struggling the most to improve.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1523\" class=\"wp-image-161250\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values.png\" alt=\"Percentage of good LCP values from CrUX CWV data (November 2019 to April 2023)\n\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-446x425.png 446w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-768x731.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-1536x1462.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>When we ran a <a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals-study\/\">study on Core Web Vitals<\/a>, we saw that pages are less likely to have good LCP values on mobile devices compared to desktop.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"2760\" class=\"wp-image-161251\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device.png\" alt=\"LCP by device\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-246x425.png 246w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-768x1325.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-890x1536.png 890w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-1187x2048.png 1187w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>The LCP threshold seems almost impossible to pass on slower connections.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1404\" class=\"wp-image-161252\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type.png\" alt=\"Breakdown of LCP by connection type\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-484x425.png 484w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-768x674.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-1536x1348.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"How to measure LCP\" data-section=\"how-to-measure-lcp\">\n\n\n\n<h2 class=\"wp-block-heading\">How to measure LCP<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>There are a couple of different ways of measuring LCP you\u2019ll want to look at: field data and lab&nbsp;data.&nbsp;<\/p>\n\n\n\n<p>Field data comes from the <a href=\"https:\/\/developer.chrome.com\/docs\/crux\/\">Chrome User Experience Report (CrUX)<\/a>, which is data from real users of Chrome who choose to share their data. This gives you the best idea of real-world LCP performance across different network conditions, devices, caching, etc. It\u2019s also what you\u2019ll actually be measured on by Google for <a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals\/\">Core Web Vitals<\/a>.&nbsp;<\/p>\n\n\n\n<p>Lab data is based on tests with the same conditions to make tests repeatable. Google doesn\u2019t use this for Core Web Vitals, but it\u2019s useful for testing because CrUX\/field data is a 28-day rolling average, so it takes a while to see the impact of changes.<\/p>\n\n\n\n<p>The best tool to measure LCP depends on the type of data you want (lab\/field) and whether you want it for one URL or&nbsp;many.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Measuring LCP for a single URL<\/h3>\n\n\n\n<p><a href=\"https:\/\/ahrefs.com\/blog\/pagespeed-insights\/\">Pagespeed Insights<\/a> pulls page-level field data that you can\u2019t otherwise query in the CrUX dataset. It also runs lab tests for you based on Google <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Lighthouse<\/a> and gives you origin data so you can compare page performance to the entire site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Measuring LCP for many URLs or an entire site<\/h3>\n\n\n\n<p>You can get CrUX data in Google Search Console that is bucketed into the categories of good, needs improvement, and&nbsp;poor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1437\" height=\"1490\" class=\"wp-image-161095\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4.png\" alt=\"Core Web Vitals data in Google Search Console\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4.png 1437w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4-410x425.png 410w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4-768x796.png 768w\" sizes=\"auto, (max-width: 1437px) 100vw, 1437px\"><\/figure>\n\n\n\n<p>Clicking into one of the issues gives you a breakdown of page groups that are impacted. The groups are pages with similar values that likely use the same template. You make the changes once in the template, and that will be fixed across the pages in the&nbsp;group.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1756\" height=\"1752\" class=\"wp-image-161097\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2.png\" alt=\"LCP issues on ahrefs.com\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2.png 1756w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-426x425.png 426w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-768x766.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-1536x1533.png 1536w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-120x120.png 120w\" sizes=\"auto, (max-width: 1756px) 100vw, 1756px\"><\/figure>\n\n\n\n<p>If you want both lab data and field data at scale, the only way to get that is through the PageSpeed Insights API. You can connect to it easily with Ahrefs\u2019 <a href=\"https:\/\/ahrefs.com\/site-audit\">Site Audit<\/a> and get reports detailing your performance. This is free for verified sites with an <a href=\"https:\/\/ahrefs.com\/webmaster-tools\">Ahrefs Webmaster Tools<\/a> (AWT) account.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"644\" class=\"wp-image-161099\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3.png\" alt=\"Core Web Vitals data in Ahrefs' Site Audit\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-680x274.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-768x309.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-1536x618.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n<div class=\"highlighted-section\"><!-- Title Section -->\n<h4 class=\"section-title\">Check your CWVs including LCP for Free with Site&nbsp;Audit<\/h4>\n<!-- Form Section --><form class=\"form-section\">\n<div class=\"input-button-wrapper\">\n<div class=\"input-container\"><input type=\"text\" placeholder=\"Enter domain\"><\/div>\n<a class=\"start-button\" href=\"\/signup?plan=awt&amp;return=site-audit\">Start for&nbsp;Free<\/a><\/div>\n<div class=\"tooltip-container\">Free for websites with verified ownership<span class=\"info-icon\">i<\/span>\n<div class=\"tooltip-content\">\n<p>Ownership verification can be done&nbsp;by:<\/p>\n<ul>\n<li>Connecting Google Search Console (recommended);<\/li>\n<li>Uploading an HTML&nbsp;file;<\/li>\n<li>Adding a TXT record to your DNS configuration;<\/li>\n<li>Adding an HTML meta tag to your homepage.<\/li>\n<\/ul>\n<a href=\"https:\/\/help.ahrefs.com\/en\/articles\/3275938-verifying-ownership-of-your-project-or-website\" target=\"_blank\" rel=\"noopener noreferrer\">Learn more<\/a><\/div>\n<\/div>\n<p class=\"webmaster-tools-info\">Signing up here gives you access to <a href=\"https:\/\/ahrefs.com\/webmaster-tools\" target=\"_blank\" rel=\"noopener noreferrer\">Ahrefs Webmaster Tools \u2197<\/a> for&nbsp;free<\/p>\n<\/form><\/div>\n<p><style>\n  \/* Highlighted Section with Gray Border *\/\n  .highlighted-section {\n    border: 1px solid #ddd; \/* Light gray border *\/\n    border-radius: 8px;\n    padding: 15px 20px; \/* Adjusted padding to reduce top spacing *\/\n    background-color: #f9f9f9; \/* Light background for contrast *\/\n    max-width: 600px;\n    margin: 20px auto; \/* Center alignment *\/\n  }\n\n  \/* Section Title *\/\n  .section-title {\n    font-size: 24px; \/* Larger font size *\/\n    font-weight: bold;\n    color: #333;\n    margin-bottom: 15px;\n    margin-top: 0; \/* Remove extra spacing above the title *\/\n    text-align: center;\n  }\n\n  .form-section {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .input-button-wrapper {\n    display: flex;\n    gap: 10px; \/* Space between input and button *\/\n    align-items: center;\n  }\n\n  .input-container input {\n    padding: 10px;\n    font-size: 16px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    width: 100%;\n  }\n\n  .tooltip-container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 14px;\n    color: #555;\n    cursor: help;\n  }\n\n  .tooltip-container .info-icon {\n    color: #0073e6;\n    font-weight: bold;\n    font-size: 12px;\n    position: relative;\n    top: -5px;\n    display: inline-block;\n    text-decoration: none;\n    cursor: help;\n  }\n\n  .tooltip-content {\n    position: fixed; \/* Ensure tooltip can break out of its container *\/\n    top: 50px; \/* Adjust based on trigger position *\/\n    left: 50%; \/* Center horizontally *\/\n    transform: translateX(-50%);\n    background: white;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\n    padding: 15px;\n    font-size: 14px;\n    display: none; \/* Initially hidden *\/\n    z-index: 1000;\n    min-width: 300px;\n    max-width: 400px; \/* Optional width for better readability *\/\n    white-space: normal;\n  }\n\n  .tooltip-container:hover .tooltip-content {\n    display: block;\n  }\n\n  .tooltip-content ul {\n    list-style-type: disc;\n    padding-left: 20px;\n  }\n\n  .tooltip-content a {\n    color: #0073e6;\n    text-decoration: none;\n  }\n\n  .webmaster-tools-info {\n    color: #333;\n    font-size: 14px;\n    margin-top: 10px;\n  }\n\n  .start-button {\n    background-color: orange;\n    color: white;\n    padding: 10px 20px;\n    text-decoration: none;\n    font-weight: bold;\n    border-radius: 5px;\n    white-space: nowrap; \/* Ensure text doesn\u2019t break into a second line *\/\n  }\n<\/style><\/p>\n\n<p>Note that the Core Web Vitals data shown will be determined by the user-agent you select for your crawl during the setup. If you crawl from mobile, you\u2019ll get mobile CWV values from the&nbsp;API.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Free tool: Check CWVs and Lighthouse metrics for desktop and mobile for up to 10 pages or websites<\/h3>\n\n\n\n<p>Here\u2019s another free tool that you can use to check up to 10 pages or websites at once to see how you compare to your competitors.<\/p>\n\n\n\n<p><strong>Setup:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enter your Google PageSpeed Insights API key into the designated input field. (Learn how to generate an API key <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/v5\/get-started\">here<\/a>.)<\/li>\n\n\n\n<li>Add the URLs you want to analyze (one per&nbsp;line).<\/li>\n<\/ul>\n\n\n\n<p><strong>Run the Analysis:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the <strong>\u201cCheck CWV\u201d<\/strong> button to start fetching metrics. A progress indicator will show the status of the requests.<\/li>\n<\/ul>\n\n\n\n<p><strong>View Results:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The results are displayed in neatly categorized scorecards:&nbsp;<ul class=\"wp-block-list\">\n<li><strong>Desktop CWV for the&nbsp;Page<\/strong><\/li>\n\n\n\n<li><strong>Desktop CWV for the Origin<\/strong><\/li>\n\n\n\n<li><strong>Desktop Lighthouse<\/strong><\/li>\n\n\n\n<li><strong>Mobile CWV for the&nbsp;Page<\/strong><\/li>\n\n\n\n<li><strong>Mobile CWV for the Origin<\/strong><\/li>\n\n\n\n<li><strong>Mobile Lighthouse<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Each metric is color-coded to show performance:&nbsp;<ul class=\"wp-block-list\">\n<li><strong>Green:<\/strong> Good<\/li>\n\n\n\n<li><strong>Yellow:<\/strong> Needs Improvement<\/li>\n\n\n\n<li><strong>Red:<\/strong> Poor<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div id=\"cwv-tool\">\n<h4 class=\"title\">Core Web Vitals Bulk Checker<\/h4>\n  <form id=\"cwv-form\">\n    <input id=\"apiKey\" required type=\"text\" placeholder=\"Enter your PageSpeed Insights API key\">\n    <textarea id=\"urls\" required placeholder=\"Enter up to 10 URLs, one per line\"><\/textarea>\n    <button type=\"button\" onclick=\"checkCWV()\">Check CWVs<\/button>\n  <\/form>\n  <div id=\"progress\"><\/div>\n  <div id=\"results\"><\/div>\n<\/div>\n\n<script>\nasync function checkCWV() {\n  const apiKey = document.getElementById(\"apiKey\").value.trim();\n  const urls = document.getElementById(\"urls\").value.split(\"\\n\").map(url => url.trim()).filter(url => url);\n  const progress = document.getElementById(\"progress\");\n  const resultsContainer = document.getElementById(\"results\");\n\n  if (!apiKey || urls.length === 0) {\n    alert(\"Please provide an API key and at least one URL.\");\n    return;\n  }\n\n  progress.textContent = \"Fetching data...\";\n  resultsContainer.innerHTML = \"\";\n\n  const results = {\n    desktopPageCWV: [],\n    desktopOriginCWV: [],\n    desktopLighthouse: [],\n    mobilePageCWV: [],\n    mobileOriginCWV: [],\n    mobileLighthouse: []\n  };\n\n  for (const [index, url] of urls.entries()) {\n    progress.textContent = `Processing ${index + 1} of ${urls.length}...`;\n    try {\n      const desktopData = await fetchData(url, \"desktop\", apiKey);\n      const mobileData = await fetchData(url, \"mobile\", apiKey);\n\n      results.desktopPageCWV.push({ url, metrics: parseCWVMetrics(desktopData?.loadingExperience) });\n      results.desktopOriginCWV.push({ url, metrics: parseCWVMetrics(desktopData?.originLoadingExperience) });\n      results.desktopLighthouse.push({ url, metrics: parseLighthouseMetrics(desktopData?.lighthouseResult) });\n\n      results.mobilePageCWV.push({ url, metrics: parseCWVMetrics(mobileData?.loadingExperience) });\n      results.mobileOriginCWV.push({ url, metrics: parseCWVMetrics(mobileData?.originLoadingExperience) });\n      results.mobileLighthouse.push({ url, metrics: parseLighthouseMetrics(mobileData?.lighthouseResult) });\n    } catch (error) {\n      console.error(`Error fetching data for ${url}: ${error.message}`);\n    }\n  }\n\n  progress.textContent = \"Rendering results...\";\n  renderResults(results);\n  progress.textContent = \"Completed!\";\n}\n\nasync function fetchData(url, strategy, apiKey) {\n  const response = await fetch(`https:\/\/www.googleapis.com\/pagespeedonline\/v5\/runPagespeed?url=${encodeURIComponent(url)}&strategy=${strategy}&key=${apiKey}`);\n  if (!response.ok) throw new Error(`Failed to fetch data for ${url}`);\n  return await response.json();\n}\n\nfunction parseCWVMetrics(data) {\n  const metrics = data?.metrics || {};\n  return {\n    LCP: applyColorBox(formatMetric(metrics[\"LARGEST_CONTENTFUL_PAINT_MS\"]?.percentile, \"ms\"), \"LCP\"),\n    INP: applyColorBox(formatMetric(metrics[\"INTERACTION_TO_NEXT_PAINT\"]?.percentile, \"ms\"), \"INP\"),\n    CLS: applyColorBox((metrics[\"CUMULATIVE_LAYOUT_SHIFT_SCORE\"]?.percentile \/ 100).toFixed(2), \"CLS\"),\n    FCP: applyColorBox(formatMetric(metrics[\"FIRST_CONTENTFUL_PAINT_MS\"]?.percentile, \"ms\"), \"FCP\"),\n    TTFB: applyColorBox(formatMetric(metrics[\"EXPERIMENTAL_TIME_TO_FIRST_BYTE\"]?.percentile, \"ms\"), \"TTFB\")\n  };\n}\n\nfunction parseLighthouseMetrics(data) {\n  if (!data) return {};\n  return {\n    Score: applyColorBox(Math.round(data.categories?.performance?.score * 100) || \"N\/A\", \"Score\"),\n    FCP: applyColorBox(formatMetric(data.audits?.[\"first-contentful-paint\"]?.numericValue, \"ms\"), \"FCP\"),\n    LCP: applyColorBox(formatMetric(data.audits?.[\"largest-contentful-paint\"]?.numericValue, \"ms\"), \"LCP\"),\n    CLS: applyColorBox(data.audits?.[\"cumulative-layout-shift\"]?.numericValue?.toFixed(3) || \"N\/A\", \"CLS\"),\n    TBT: applyColorBox(formatMetric(data.audits?.[\"total-blocking-time\"]?.numericValue, \"ms\"), \"TBT\"),\n    \"Speed Index\": applyColorBox(formatMetric(data.audits?.[\"speed-index\"]?.numericValue, \"ms\"), \"Speed Index\")\n  };\n}\n\nfunction formatMetric(value, unit) {\n  if (value === undefined || value === null || isNaN(value)) return \"N\/A\";\n  const numericValue = unit === \"ms\" ? value \/ 1000 : value;\n  return `${numericValue.toFixed(2)}s`;\n}\n\nconst thresholds = {\n  LCP: [2.5, 4], \/\/ Thresholds in seconds\n  INP: [0.2, 0.5], \/\/ INP in seconds\n  CLS: [0.1, 0.25], \/\/ CLS is unitless\n  FCP: [1.8, 3],\n  TTFB: [0.8, 1.8],\n  TBT: [0.2, 0.6], \/\/ TBT in seconds\n  \"Speed Index\": [3.4, 5.8],\n  Score: [90, 50] \/\/ Updated: 90+ (good), 50-89 (needs improvement), <50 (poor)\n};\n\nfunction applyColorBox(value, metricType) {\n  if (value === \"N\/A\") return `<div class=\"box neutral\">${value}<\/div>`;\n\n  const [good, moderate] = thresholds[metricType] || [Infinity, Infinity];\n  const numericValue = parseFloat(value);\n\n  let colorClass = \"poor\"; \/\/ Default to poor\n  \n  if (metricType === \"Score\") {\n    \/\/ Lighthouse score logic: good is green (90+), needs improvement is orange (50-89), poor is red (<50)\n    if (numericValue >= good) colorClass = \"good\";\n    else if (numericValue >= moderate) colorClass = \"moderate\";\n  } else {\n    \/\/ Other metrics: good is green (lower is better), needs improvement is orange, poor is red\n    if (numericValue <= good) colorClass = \"good\"; \/\/ Green for good (lower is better)\n    else if (numericValue <= moderate) colorClass = \"moderate\"; \/\/ Orange for needs improvement\n  }\n\n  return `<div class=\"box ${colorClass}\">${value}<\/div>`;\n}\n\nfunction renderResults(results) {\n  const resultsContainer = document.getElementById(\"results\");\n  resultsContainer.innerHTML = \"\";\n\n  resultsContainer.innerHTML += renderTable(\"Desktop CWV (Page)\", results.desktopPageCWV);\n  resultsContainer.innerHTML += renderTable(\"Desktop CWV (Origin)\", results.desktopOriginCWV);\n  resultsContainer.innerHTML += renderTable(\"Desktop Lighthouse\", results.desktopLighthouse);\n\n  resultsContainer.innerHTML += renderTable(\"Mobile CWV (Page)\", results.mobilePageCWV);\n  resultsContainer.innerHTML += renderTable(\"Mobile CWV (Origin)\", results.mobileOriginCWV);\n  resultsContainer.innerHTML += renderTable(\"Mobile Lighthouse\", results.mobileLighthouse);\n}\n\nfunction renderTable(title, data) {\n  if (data.length === 0) return \"\";\n\n  let table = `<h2>${title}<\/h2><div class=\"table-container\"><table><thead><tr><th>URL<\/th>`;\n  const sampleMetrics = data[0]?.metrics || {};\n  for (const metric in sampleMetrics) {\n    table += `<th>${metric}<\/th>`;\n  }\n  table += `<\/tr><\/thead><tbody>`;\n\n  for (const item of data) {\n    table += `<tr><td>${item.url}<\/td>`;\n    for (const metric in item.metrics) {\n      table += `<td>${item.metrics[metric]}<\/td>`;\n    }\n    table += `<\/tr>`;\n  }\n\n  table += `<\/tbody><\/table><\/div>`;\n  return table;\n}\n<\/script>\n\n<style>\n#cwv-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  align-items: stretch;\n}\n\n#apiKey,\n#urls {\n  font-size: 16px;\n  padding: 12px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n#urls {\n  min-height: 150px;\n  resize: vertical;\n}\n\nbutton {\n  font-size: 18px;\n  padding: 12px;\n  background-color: #007bff;\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: #0056b3;\n}\n\n#cwv-tool {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f9f9f9;\n  border-radius: 10px;\n  font-family: Arial, sans-serif;\n}\n\n.title {\n  text-align: center;\n  font-size: 24px;\n}\n\n.box {\n  padding: 5px;\n  border-radius: 4px;\n  display: inline-block;\n  width: 100%;\n}\n\n.box.good { background-color: #d4edda; color: #155724; }\n.box.moderate { background-color: #fff3cd; color: #856404; }\n.box.poor { background-color: #f8d7da; color: #721c24; }\n.box.neutral { background-color: #e2e3e5; color: #6c757d; }\n\n.table-container { overflow-x: auto; margin: 20px 0; }\ntable { border-collapse: collapse; width: 100%; }\nth, td { border: 1px solid #ddd; padding: 8px; text-align: center; }\nth { background-color: #f4f4f4; font-weight: bold; }\n<\/style>\n\n\n<p>This is an example output to show you how the speed scorecards look. You can use it as a standalone tool: <a href=\"https:\/\/ahrefs.com\/blog\/bulk-pagespeed-insights-website-speed-test\/\">website speed test<\/a>.<\/p>\n\n\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-scaled.jpg\" alt=\"output of the bulk page speed test tool showing cwv and lighthouse desktop and mobile metrics\" width=\"548\" height=\"2560\" class=\"alignnone size-full wp-image-184636\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-scaled.jpg 548w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-91x425.jpg 91w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-329x1536.jpg 329w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\">\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"How to improve LCP\" data-section=\"how-to-improve-lcp\">\n\n\n\n<h2 class=\"wp-block-heading\">How to improve LCP<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>In PageSpeed Insights, the LCP element will be specified in the \u201cDiagnostics\u201d section. Also, notice there is a tab to select LCP that will only show issues related to LCP. These are the issues seen in the lab test that you\u2019ll want to&nbsp;solve.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1781\" height=\"1999\" class=\"wp-image-161101\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3.png\" alt=\"Issues related to LCP in Google PageSpeed Insights\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3.png 1781w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-379x425.png 379w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-768x862.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-1368x1536.png 1368w\" sizes=\"auto, (max-width: 1781px) 100vw, 1781px\"><\/figure>\n\n\n\n<p>There are a lot of issues that relate to LCP, making it the hardest metric to improve.<\/p>\n\n\n\n<p>The general theory sounds easy enough. Give me the largest element faster. But in practice, this can get fairly complex. Some files may require others to be loaded first, or there may be conflicting priorities in the browser. You may fix a bunch of issues without actually seeing an improvement, which can be frustrating.<\/p>\n\n\n\n<p>If you\u2019re not very technical and don\u2019t want to hire someone, look for performance or page speed optimization plugins, modules, or packages for whatever system you\u2019re using. You can use the below information as a guide for what features you may&nbsp;need.<\/p>\n\n\n\n<p>Here are a few ways you can improve LCP:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Find your LCP element&nbsp;<\/h3>\n\n\n\n<p>In PageSpeed Insights, you can click \u201cLargest Contentful Paint element\u201d in the \u201cDiagnostics\u201d section, and it will identify your LCP element.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"567\" class=\"wp-image-161103\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2.png\" alt=\"Identify your LCP element with PageSpeed Insights\n\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-680x193.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-768x218.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-1536x436.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Prioritize loading of resources<\/h3>\n\n\n\n<p>To pass the LCP check, you should prioritize how your resources are loaded in the critical rendering path. What I mean by that is you want to rearrange the order in which the resources are downloaded and processed.&nbsp;<\/p>\n\n\n\n<p>You should first load the resources needed for your LCP element and any other resources needed for the content above the fold. After the initially visible elements are loaded for users, the rest are then loaded.<\/p>\n\n\n\n<p>Many sites can get to a passing time for LCP by just adding some early hints or preload statements for things like the main image, as well as necessary stylesheets and fonts. Let\u2019s look at how to optimize the various resource types.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Images early<\/h4>\n\n\n\n<p>If you don\u2019t need the image, the most impactful solution is to simply get rid of it. If you must have the image, I suggest optimizing the size and quality to keep it as small as possible.<\/p>\n\n\n\n<p>You can also use <a href=\"https:\/\/blog.cloudflare.com\/early-hints\/\">Early Hints<\/a>. Fetchpriority=\u201dhigh\u201d can be used on &lt;img&gt; or &lt;link&gt; tags and tells browsers to get the image early. This means it\u2019s going to display a little earlier.<\/p>\n\n\n\n<p>Early Hints don\u2019t work on all browsers, so you may also want to preload the image. This is going to start the download of that image a little earlier, but not quite as early as fetchpriority=\u201dhigh\u201d.&nbsp;<\/p>\n\n\n\n<p>A preload statement for a responsive image looks like&nbsp;this:<\/p>\n\n\n\n<p><code>&lt;link rel=\"preload\" as=\"image\" href=\u201ccat.jpg\"<\/code><\/p>\n\n\n\n<p><code>imagesrcset=\u201ccat_400px.jpg 400w,<\/code><\/p>\n\n\n\n<p><code>cat_800px.jpg 800w, cat_1600px.jpg 1600w\"<\/code><\/p>\n\n\n\n<p><code>imagesizes=\"50vw\"&gt;<\/code><\/p>\n\n\n\n<p>You can even use fetchpriority=\u201dhigh\u201d and preload together!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Images late<\/h4>\n\n\n\n<p>You should lazy load any images that you don\u2019t need immediately. This loads images later in the process or when a user is close to seeing them. You can use loading=\u201clazy\u201d like&nbsp;this:<\/p>\n\n\n\n<p><code>&lt;img src=\u201ccat.jpg\" alt=\u201ccat\" loading=\"lazy\"&gt;<\/code><\/p>\n\n\n\n<p>Do not lazy load images above the&nbsp;fold!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">CSS early<\/h4>\n\n\n\n<p>You should minify any CSS you have. If possible, remove any unused CSS as&nbsp;well.<\/p>\n\n\n\n<p>The other major thing you should do is to inline critical CSS. What this does is it takes the part of the CSS needed to load the content users see immediately and then applies it directly into the HTML. When the HTML is downloaded, all the CSS needed to load what users see is already available.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1468\" class=\"wp-image-161104\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11.png\" alt=\"Graph showing how inlining critical CSS helps with LCP\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-463x425.png 463w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-768x705.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-1536x1409.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">CSS late<\/h4>\n\n\n\n<p>With any extra CSS that isn\u2019t critical, you\u2019ll want to apply it later in the process. You can go ahead and start downloading the CSS with a preload statement but not apply the CSS until later with an onload event. This looks&nbsp;like:<\/p>\n\n\n\n<p><code>&lt;link rel=\"preload\" href=\"stylesheet.css\" as=\"style\" onload=\"this.rel='stylesheet'\"&gt;<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Fonts<\/h4>\n\n\n\n<p>I\u2019m going to give you a few options here:<\/p>\n\n\n\n<p>Good: Preload your fonts. Even better if you use the same server to get rid of the connection.<\/p>\n\n\n\n<p>Better: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display\">Font-display: optional<\/a>. This can be paired with a preload statement. This is going to give your font a small window of time to load. If the font doesn\u2019t make it in time, the initial page load will simply show a default font. Your custom font will then be cached and show up on subsequent page&nbsp;loads.<\/p>\n\n\n\n<p>Best: Just use a system font. There\u2019s nothing to load\u2014so no delays.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">JavaScript early<\/h4>\n\n\n\n<p>We already talked about removing unused JavaScript and minifying what you have. If you\u2019re using a JavaScript framework, then you may want to <a href=\"https:\/\/www.netlify.com\/blog\/2016\/11\/22\/prerendering-explained\/\">prerender<\/a> or <a href=\"https:\/\/www.gatsbyjs.com\/docs\/glossary\/server-side-rendering\/\">server-side render (SSR)<\/a> the&nbsp;page.<\/p>\n\n\n\n<p>You can also inline the JavaScript needed early. This works the same way as was described in the CSS section, where you move portions from your JavaScript files to instead be loaded with the&nbsp;HTML.<\/p>\n\n\n\n<p>Another option is to preload the JavaScript files so that you get them earlier. This should only be done for assets needed to load the content above the fold or if some functionality depends on this JavaScript.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">JavaScript late<\/h4>\n\n\n\n<p>Any JavaScript you don\u2019t need immediately should be loaded later. There are two main ways to do that\u2014defer and async attributes. These attributes can be added to your script tags.<\/p>\n\n\n\n<p>Usually, a script being downloaded blocks the parser while downloading and executing. Async will let the parsing and downloading occur at the same time but still block parsing during the script execution. Defer will not block parsing during the download and only execute after the HTML has finished parsing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1309\" height=\"1600\" class=\"wp-image-161105\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4.png\" alt=\"Graph showing how async and defer impact the loading of a page\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4.png 1309w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-348x425.png 348w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-768x939.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-1257x1536.png 1257w\" sizes=\"auto, (max-width: 1309px) 100vw, 1309px\"><\/figure>\n\n\n\n<p>Which should you use? For anything that you want earlier or that has dependencies, I\u2019d lean toward async.&nbsp;<\/p>\n\n\n\n<p>For instance, I tend to use async on analytics tags so that more users are recorded. You\u2019ll want to defer anything that is not needed until later or doesn\u2019t have dependencies. The attributes are pretty easy to&nbsp;add.&nbsp;<\/p>\n\n\n\n<p>Check out these examples:<\/p>\n\n\n\n<p>Normal:<\/p>\n\n\n\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<p>Async:<\/p>\n\n\n\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\" async&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<p>Defer:<\/p>\n\n\n\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\" defer&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Make files smaller<\/h3>\n\n\n\n<p>If you can get rid of any files or reduce their sizes, then your page will load faster. This means you may want to delete any files not being used or parts of the code that aren\u2019t used.<\/p>\n\n\n\n<p>How you go about this will depend a lot on your setup, but the process for removing unneeded parts of files is usually referred to as <a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\">tree shaking<\/a>.&nbsp;<\/p>\n\n\n\n<p>This is commonly done via an automated process with Webpack or Grunt with JavaScript frameworks or sometimes even systems like WordPress, but most common CMS systems may not support this.<\/p>\n\n\n\n<p>You may want to skip this or see if there are any plugins that have this option for your system.<\/p>\n\n\n\n<p>To make the files smaller, you typically want to compress them.&nbsp;<\/p>\n\n\n\n<p>Pretty much every file type used to build your website can be compressed, including CSS, JavaScript, Images, and HTML. Also, nearly every system and server support compression.&nbsp;<\/p>\n\n\n\n<p>&nbsp;It\u2019s usually done at the server or CDN level, but some plugins support this like WP Rocket for WordPress.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Serve files closer to&nbsp;users<\/h3>\n\n\n\n<p>Information takes time to travel. The further you are from a server, the longer it takes for the data to be transferred. Unless you serve a small geographical area, having a <a href=\"https:\/\/www.cloudflare.com\/learning\/cdn\/what-is-a-cdn\/\">Content Delivery Network (CDN)<\/a> is a good&nbsp;idea.<\/p>\n\n\n\n<p>CDNs give you a way to connect and serve your site that\u2019s closer to users. It\u2019s like having copies of your server in different locations around the&nbsp;world.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Host resources on the same server<\/h3>\n\n\n\n<p>When you first connect to a server, there\u2019s a process that navigates the web and establishes a secure connection between you and the server.&nbsp;<\/p>\n\n\n\n<p>This takes some time, and each new connection you need to make adds additional delay while it goes through the same process. If you host your resources on the same server, you can eliminate those extra delays.<\/p>\n\n\n\n<p>If you can\u2019t use the same server, you may want to use <a href=\"https:\/\/www.splunk.com\/en_us\/observability\/resources\/preconnect-resource-hints.html\">preconnect<\/a> or <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/dns-prefetch\">DNS-prefetch<\/a> to start connections earlier. A browser will typically wait for the HTML to finish downloading before starting a connection. But with preconnect or DNS-prefetch, it starts earlier than it normally would. Do note that DNS-prefetch has better support than preconnect.<\/p>\n\n\n\n<p>For each resource you want to get early, you add a new statement like:<\/p>\n\n\n\n<p><code>&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\/\"&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;link rel=\"dns-prefetch\" href=\"https:\/\/fonts.googleapis.com\/\" \/&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Use caching<\/h3>\n\n\n\n<p>When you cache resources, they\u2019re downloaded for the first page view but don\u2019t need to be downloaded for subsequent page views. With the resources already available, additional page loads will be much faster.<\/p>\n\n\n\n<p>Check out how few files are downloaded in the second page load in the waterfall charts below.<\/p>\n\n\n\n<p>First load of the&nbsp;page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"755\" height=\"712\" class=\"wp-image-161106\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3.png\" alt=\"First load of a page in webpagetest.org\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3.png 755w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3-451x425.png 451w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\"><\/figure>\n\n\n\n<p>Second load of the&nbsp;page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"773\" height=\"206\" class=\"wp-image-161107\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4.png\" alt=\"Second load of a page in webpagetest.org\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4.png 773w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4-680x181.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4-768x205.png 768w\" sizes=\"auto, (max-width: 773px) 100vw, 773px\"><\/figure>\n\n\n\n<p>If you can, cache on a CDN as well. Your cache time should be as long as you are comfortable with.<\/p>\n\n\n\n<p>An ideal setup is to cache for a really long period of time but purge the cache when you make a change to a&nbsp;page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Misc<\/h3>\n\n\n\n<p>There are a few other technologies that you may want to look at to help with performance. These include <a href=\"https:\/\/web.dev\/speculative-prerendering\/\">Speculative Prerendering<\/a>, <a href=\"https:\/\/blog.cloudflare.com\/automatic-signed-exchanges\/\">Signed Exchanges<\/a>, and <a href=\"https:\/\/www.cloudflare.com\/learning\/performance\/what-is-http3\/\">HTTP\/3<\/a>.<\/p>\n\n\n\n<div class=\"further-reading\"><div class=\"reading-title\">Further reading<\/div><div class=\"reading-content\">\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/web.dev\/optimize-lcp\/\">Optimize Largest Contentful Paint \u2013 web.dev<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=diAc65p15ag\">Investigating Largest Contentful Paint<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/www.youtube.com\/watch?v=diAc65p15ag\"> Paul Irish (video)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals\/\" data-ahr=\"https:\/\/ahrefs.com\/blog\/advanced-pagespeed-guide\/\">How to Improve Page Speed From Start to Finish<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals\/\" data-ahr=\"https:\/\/ahrefs.com\/blog\/advanced-pagespeed-guide\/\"> Ahrefs<\/a><\/li>\n<\/ul>\n\n\n\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts<\/h2>\n\n\n\n<p>Is there a better metric to measure visible load? I don\u2019t see anything new on the horizon at this time. We\u2019ve already seen several evolutions trying to measure the&nbsp;load.<\/p>\n\n\n\n<p>Load and DOMContentLoaded don\u2019t really tell you what a user sees. First Contentful Paint (FCP) is the beginning of the loading experience. First Meaning Paint (FMP) and Speed Index (SI) are complex and don\u2019t really identify when the main content has been loaded.<\/p>\n\n\n\n<p>If you have any questions, message me <a href=\"https:\/\/twitter.com\/patrickstox\">on Twitter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The first impression users have of your site is how fast it appears to be loaded. The largest element is usually going to be a featured image or maybe the &lt;h1&gt; tag. But it could also be any of&nbsp;these: Anything<span class=\"ellipsis\">\u2026<\/span><\/p>\n<div class=\"read-more\">Read more \u203a<\/div>\n<p><!-- end of .read-more --><\/p>\n","protected":false},"author":150,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[329],"tags":[],"coauthors":[377],"class_list":["post-161041","post","type-post","status-publish","format-standard","hentry","category-technical-seo","odd"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What Is Largest Contentful Paint (LCP) &amp; How To Improve It<\/title>\n<meta name=\"description\" content=\"Largest Contentful Paint is the time it takes to load the single largest visible element in the viewport, and it&#039;s a CWV metric Google uses.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Is Largest Contentful Paint (LCP) &amp; How To Improve It\" \/>\n<meta property=\"og:description\" content=\"Learn all about it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/\" \/>\n<meta property=\"og:site_name\" content=\"SEO Blog by Ahrefs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ahrefs\/\" \/>\n<meta property=\"article:author\" content=\"patrickstox\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-15T02:06:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-22T23:30:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1634\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Patrick Stox\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Learn all about it.\" \/>\n<meta name=\"twitter:creator\" content=\"@patrickstox\" \/>\n<meta name=\"twitter:site\" content=\"@ahrefs\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/\"},\"author\":{\"name\":\"Patrick Stox\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/person\\\/14bf754248f3c561786477e4e5fd2067\"},\"headline\":\"What Is Largest Contentful Paint (LCP) &amp; How To Improve It\",\"datePublished\":\"2023-06-15T02:06:20+00:00\",\"dateModified\":\"2025-01-22T23:30:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/\"},\"wordCount\":2638,\"publisher\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/what-is-largest-contentful-paint-lcp-by-patrick-stox-technical-seo.jpg\",\"articleSection\":[\"Technical SEO\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/\",\"name\":\"What Is Largest Contentful Paint (LCP) &amp; How To Improve It\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/lcp.png\",\"datePublished\":\"2023-06-15T02:06:20+00:00\",\"dateModified\":\"2025-01-22T23:30:01+00:00\",\"description\":\"Largest Contentful Paint is the time it takes to load the single largest visible element in the viewport, and it's a CWV metric Google uses.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/largest-contentful-paint-lcp\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/lcp.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/lcp.png\",\"width\":1600,\"height\":1634},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/\",\"name\":\"SEO Blog by Ahrefs\",\"description\":\"Link Building Strategies &amp; SEO Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\",\"name\":\"Ahrefs\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/ahrefs-logo.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/ahrefs-logo.png\",\"width\":2048,\"height\":768,\"caption\":\"Ahrefs\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Ahrefs\\\/\",\"https:\\\/\\\/x.com\\\/ahrefs\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/ahrefs\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/ahrefscom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/person\\\/14bf754248f3c561786477e4e5fd2067\",\"name\":\"Patrick Stox\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.pngbade1fd182f70b6825c334271c12533e\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.png\",\"caption\":\"Patrick Stox\"},\"description\":\"Patrick Stox is a Product Advisor, Technical SEO, &amp; Brand Ambassador at Ahrefs. He was the lead author for the SEO chapter of the 2021 Web Almanac and a reviewer for the 2022 SEO chapter. He also co-wrote the SEO Book For Beginners by Ahrefs and was the Technical Review Editor for The Art of SEO 4th Edition. He\u2019s an organizer for the Triangle SEO Meetup, the Tech SEO Connect conference, he runs a Technical SEO Slack group, and is a moderator for \\\/r\\\/TechSEO on Reddit.\",\"sameAs\":[\"https:\\\/\\\/patrickstox.com\\\/\",\"patrickstox\",\"https:\\\/\\\/x.com\\\/patrickstox\"],\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/author\\\/patrick-stox\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What Is Largest Contentful Paint (LCP) &amp; How To Improve It","description":"Largest Contentful Paint is the time it takes to load the single largest visible element in the viewport, and it's a CWV metric Google uses.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/","og_locale":"en_US","og_type":"article","og_title":"What Is Largest Contentful Paint (LCP) &amp; How To Improve It","og_description":"Learn all about it.","og_url":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/","og_site_name":"SEO Blog by Ahrefs","article_publisher":"https:\/\/www.facebook.com\/Ahrefs\/","article_author":"patrickstox","article_published_time":"2023-06-15T02:06:20+00:00","article_modified_time":"2025-01-22T23:30:01+00:00","og_image":[{"width":1600,"height":1634,"url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png","type":"image\/png"}],"author":"Patrick Stox","twitter_card":"summary_large_image","twitter_description":"Learn all about it.","twitter_creator":"@patrickstox","twitter_site":"@ahrefs","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/#article","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/"},"author":{"name":"Patrick Stox","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/person\/14bf754248f3c561786477e4e5fd2067"},"headline":"What Is Largest Contentful Paint (LCP) &amp; How To Improve It","datePublished":"2023-06-15T02:06:20+00:00","dateModified":"2025-01-22T23:30:01+00:00","mainEntityOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/"},"wordCount":2638,"publisher":{"@id":"https:\/\/ahrefs.com\/blog\/#organization"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/what-is-largest-contentful-paint-lcp-by-patrick-stox-technical-seo.jpg","articleSection":["Technical SEO"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/","url":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/","name":"What Is Largest Contentful Paint (LCP) &amp; How To Improve It","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/#primaryimage"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png","datePublished":"2023-06-15T02:06:20+00:00","dateModified":"2025-01-22T23:30:01+00:00","description":"Largest Contentful Paint is the time it takes to load the single largest visible element in the viewport, and it's a CWV metric Google uses.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/#primaryimage","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png","width":1600,"height":1634},{"@type":"WebSite","@id":"https:\/\/ahrefs.com\/blog\/#website","url":"https:\/\/ahrefs.com\/blog\/","name":"SEO Blog by Ahrefs","description":"Link Building Strategies &amp; SEO Tips","publisher":{"@id":"https:\/\/ahrefs.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahrefs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ahrefs.com\/blog\/#organization","name":"Ahrefs","url":"https:\/\/ahrefs.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/ahrefs-logo.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/ahrefs-logo.png","width":2048,"height":768,"caption":"Ahrefs"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Ahrefs\/","https:\/\/x.com\/ahrefs","https:\/\/www.linkedin.com\/company\/ahrefs\/","https:\/\/www.youtube.com\/c\/ahrefscom"]},{"@type":"Person","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/person\/14bf754248f3c561786477e4e5fd2067","name":"Patrick Stox","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.pngbade1fd182f70b6825c334271c12533e","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.png","caption":"Patrick Stox"},"description":"Patrick Stox is a Product Advisor, Technical SEO, &amp; Brand Ambassador at Ahrefs. He was the lead author for the SEO chapter of the 2021 Web Almanac and a reviewer for the 2022 SEO chapter. He also co-wrote the SEO Book For Beginners by Ahrefs and was the Technical Review Editor for The Art of SEO 4th Edition. He\u2019s an organizer for the Triangle SEO Meetup, the Tech SEO Connect conference, he runs a Technical SEO Slack group, and is a moderator for \/r\/TechSEO on Reddit.","sameAs":["https:\/\/patrickstox.com\/","patrickstox","https:\/\/x.com\/patrickstox"],"url":"https:\/\/ahrefs.com\/blog\/author\/patrick-stox\/"}]}},"as_json":null,"json_reviewers":[114],"_links":{"self":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts\/161041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/users\/150"}],"replies":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/comments?post=161041"}],"version-history":[{"count":0,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts\/161041\/revisions"}],"wp:attachment":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/media?parent=161041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/categories?post=161041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/tags?post=161041"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/coauthors?post=161041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}