[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=”Largest Contentful Paint<\/b>” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1636752168475{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
We touched on the Largest Contentful Paint, or LCP, metric earlier when we talked about the First Contentful Paint. The Largest Contentful Paint is another of the metrics that make up Google\u2019s Web Vitals. The Largest Contentful Paint measures the time it takes to render the largest content element, which could be an image, heading, text, etc., so that it is visible to the user. This is important because, to the user, if they perceive that content is loading, they are less likely to become annoyed from having to wait until the page loads. The faster content becomes visible within their viewport, the more likely they will stay and interact with your page instead of bouncing from your page. Compared with other metrics, like measuring the DOM load time, the Largest Contentful Paint is a more accurate measurement, as it also factors in what users are seeing and experiencing on the page.<\/p>\n
[\/vc_column_text][vc_custom_heading text=”Lighthouse Audit: 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
Like the First Contentful Paint, the Largest Contentful Paint is a significant factor within the overall Web Vitals score. In fact, the Largest Contentful Paint makes up 25 percent of the performance score, so developers will want to make sure to pay attention to this metric if it shows up as one of the recommended optimization actions in Lighthouse. Again, in terms of page speed, First Contentful Paint and Time to First Byte are useful, but the Largest Contentful Paint metric is a better representation of how your page performs in front of actual visitors. This can be all the difference between a conversion or a lost visitor. <\/p>\n
The Largest Contentful Paint, like the First Contentful Paint, is measured in seconds. Web Developers will want to aim for an LCP under 2.5 seconds or less. Anything over four seconds is considered a poor score and will require further investigation into what is causing a slow First Contentful Paint. Furthermore, this score must reflect well on both desktop and mobile devices. Mobile devices make up over half of the traffic today, so your sites and pages must also be optimized to load fast, even with less-than-ideal network conditions. <\/p>\n
[\/vc_column_text][vc_custom_heading text=”Improving Largest Contentful Paint” 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
There are a variety of issues that can affect the Largest Contentful Paint and we will discuss the methods and techniques that developers can use to improve the Largest Contentful Paint score for their web properties.<\/p>\n
[\/vc_column_text][vc_custom_heading text=”Optimizing Images” font_container=”tag:h4|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n
Images typically make up a sizeable piece of the total weight of a web page. Ensuring they are optimized is a critical step in reducing the Largest Contentful Paint metric. Within this category, there are multiple techniques that can be carried out to improve and optimize images to help with reducing the length of time it takes to load the page. The good thing about optimizing images is that it is easy to carry out compared to other, more advanced optimization techniques. Techniques like image compression, or image encoding, which uses an algorithm to reduce the size of images, without affecting the overall quality of the image to users, is just one technique. <\/p>\n
In addition to that, ensuring that image dimensions are correctly defined helps the browser know how much space is needed for each image, so it does not have to resize images based on the user’s device later, which takes additional time and system resources. This can be done by manually resizing images or using the srcset attribute, which allows developers to set different image width sizes based on the user\u2019s device. Lastly, for sites that utilize a large banner, or hero image, preloading these images allows the browser to prioritize this when rendering, which can improve your Largest Contentful Paint score. <\/p>\n
[\/vc_column_text][vc_custom_heading text=”Optimize Server Performance” font_container=”tag:h4|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n
The response time from the server plays another part in helping deliver resources so you can reduce the Largest Contentful Paint on your web pages. One of the first optimization techniques development teams can investigate is optimizing the back-end server code and database queries and making them more inefficient. Related to that, cleaning up or removing any unnecessary third-party plugins can also help, as they consume more system resources and slow down response times. Teams could also opt to invest in upgrading hardware as well, but if the back-end code itself is the bottleneck, then this is only a temporary solution, and you will find yourself back where you started.<\/p>\n
[\/vc_column_text][vc_custom_heading text=”Optimize Server Performance with a CDN” font_container=”tag:h5|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n
Lastly, server-side caching, which is typically carried out by utilizing a set of proxy servers within a CDN, is an effective method to reduce latency. Browser caching is also beneficial, but only if users engage in subsequent visits to your pages. Depending on a visitor\u2019s location, a CDN allows content to be delivered faster, as they are served from a node closer to a visitor\u2019s physical location. Additionally, CDNs (Content Delivery Networks) provide automatic caching from your origin server, which is another added benefit. However, investing in a CDN is not as easy as optimizing page content and code, caching, or improving the delivery of server-side code as we discussed in previous sections. It may require a large investment, so the cost may not outweigh the benefits, so it all depends on the goals and requirements of your business.<\/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=”Largest Contentful Paint” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1636752168475{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] We touched on the Largest Contentful Paint, or…<\/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\n