{"id":17625,"date":"2021-11-15T12:19:48","date_gmt":"2021-11-15T18:19:48","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17625"},"modified":"2021-11-15T12:19:48","modified_gmt":"2021-11-15T18:19:48","slug":"preload-largest-contentful-paint-image","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/","title":{"rendered":"Lighthouse Optimizations – Preload Largest Contentful Paint Image"},"content":{"rendered":"

[vc_row full_width=”stretch_row” gap=”25″ equal_height=”yes” content_placement=”middle” css=”.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column css=”.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}”][vc_custom_heading text=”Preload Largest Contentful Paint Image<\/b>” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1637000312820{padding-top: 30px !important;padding-bottom: 30px !important;}”][\/vc_column][\/vc_row][vc_row margin_top=”40″ margin_bottom=”30px” css=”.vc_custom_1636409410012{margin-bottom: 30px !important;}”][vc_column][vc_custom_heading text=”What is Largest Contentful Paint?” font_container=”tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

Largest Contentful Paint, or LCP, is one of the core Lighthouse Web Vitals. Along with First Input Delay (FID) and Cumulative Layout Shift (CLS), these metrics are used to measure how good, or bad, a user\u2019s experience is with your web page. The LCP is the time it takes for the largest image or text block to render on the page. This is typically something like the hero image on your page. A good LCP time is under 2.5 seconds across desktop and mobile devices. Again, the sooner or faster your content loads, the faster the user can begin interacting with your page. <\/p>\n

[\/vc_column_text][vc_custom_heading text=”Benefits of Preloading Largest Contentful Paint (LCP)” font_container=”tag:h3|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

Like we had discussed in the previous section, preloading JavaScript, CSS, or web fonts can have significant performance benefits for your page, especially if those files are large. Preloading LCP is no different. Your main banner image or hero image is the largest image on your page, so setting it to preload can improve your LCP time plus give the impression to the user that your page has loaded. If your image renders along with text, it will also look more complete and will not be subject to layout shifts, which may temporarily affect usability. Preloading your LCP image is the same as before, simply add the , along with the image path, to the HTML header. <\/p>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row margin_top=”60″ margin_bottom=”0″ css=”.vc_custom_1636595147911{margin-bottom: 15px !important;}”][vc_column width=”1\/3″ css=”.vc_custom_1636595227743{padding-top: 60px !important;padding-bottom: 60px !important;padding-left: 10px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17233″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”Lighthouse<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.<\/p>\n

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Flighthouse%2F”][\/vc_column][vc_column width=”1\/3″ css=”.vc_custom_1636595173585{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17284″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”PageSpeed Terms<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.<\/p>\n

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fpagespeed%2F”][\/vc_column][vc_column width=”1\/3″ css=”.vc_custom_1636595196399{padding-top: 60px !important;padding-right: 10px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17281″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”YSlow<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.<\/p>\n

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fyslow%2F”][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row full_width=”stretch_row” gap=”25″ equal_height=”yes” content_placement=”middle” css=”.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column css=”.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}”][vc_custom_heading text=”Preload Largest Contentful Paint Image” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1637000312820{padding-top: 30px !important;padding-bottom: 30px !important;}”][\/vc_column][\/vc_row][vc_row margin_top=”40″ margin_bottom=”30px” css=”.vc_custom_1636409410012{margin-bottom: 30px !important;}”][vc_column][vc_custom_heading text=”What is Largest Contentful Paint?” font_container=”tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text] Largest Contentful Paint, or LCP, is…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":17260,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"\r\nLighthouse Optimizations - Preload Largest Contentful Paint Image | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"Preloading Largest Contentful Paint can have significant performance benefits for your web page. Learn more about this Lighthouse optimization.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Lighthouse Optimizations - Preload Largest Contentful Paint Image\" \/>\r\n<meta property=\"og:description\" content=\"Preloading Largest Contentful Paint can have significant performance benefits for your web page. Learn more about this Lighthouse optimization.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dotcom-Monitor Tools Blog\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dotcommonitor\" \/>\r\n<meta name=\"twitter:card\" content=\"summary\" \/>\r\n<meta name=\"twitter:site\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\",\"name\":\"Dotcom-Monitor Tools Blog\",\"description\":\"Let's Make the Web a Faster Place.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/\",\"name\":\"Lighthouse Optimizations - Preload Largest Contentful Paint Image | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-15T18:19:48+00:00\",\"dateModified\":\"2021-11-15T18:19:48+00:00\",\"description\":\"Preloading Largest Contentful Paint can have significant performance benefits for your web page. Learn more about this Lighthouse optimization.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lighthouse Optimizations\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lighthouse Optimizations – Preload Largest Contentful Paint Image\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lighthouse Optimizations - Preload Largest Contentful Paint Image | Dotcom-Monitor Tools Blog","description":"Preloading Largest Contentful Paint can have significant performance benefits for your web page. Learn more about this Lighthouse optimization.","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:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/","og_locale":"en_US","og_type":"article","og_title":"Lighthouse Optimizations - Preload Largest Contentful Paint Image","og_description":"Preloading Largest Contentful Paint can have significant performance benefits for your web page. Learn more about this Lighthouse optimization.","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","twitter_card":"summary","twitter_site":"@dotcom_monitor","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website","url":"https:\/\/www.dotcom-tools.com\/web-performance\/","name":"Dotcom-Monitor Tools Blog","description":"Let's Make the Web a Faster Place.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/","name":"Lighthouse Optimizations - Preload Largest Contentful Paint Image | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-15T18:19:48+00:00","dateModified":"2021-11-15T18:19:48+00:00","description":"Preloading Largest Contentful Paint can have significant performance benefits for your web page. Learn more about this Lighthouse optimization.","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/preload-largest-contentful-paint-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"Lighthouse Optimizations","item":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/"},{"@type":"ListItem","position":3,"name":"Lighthouse Optimizations – Preload Largest Contentful Paint Image"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17625"}],"collection":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/comments?post=17625"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17625\/revisions"}],"predecessor-version":[{"id":17627,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17625\/revisions\/17627"}],"up":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17260"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=17625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}