{"id":17607,"date":"2021-11-15T11:53:49","date_gmt":"2021-11-15T17:53:49","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17607"},"modified":"2021-11-15T11:53:49","modified_gmt":"2021-11-15T17:53:49","slug":"lazy-load-third-party-resources-with-facades","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/","title":{"rendered":"Lighthouse Optimizations – Lazy Load Third-party Resources with Facades"},"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=”Lazy Load Third-party Resources with Facades<\/b>” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1636998757253{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=”Lazy Loading Explained” 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 discussed asynchronous loading, or lazy loading, in a previous section, but this optimization focuses on what to do with external, third-party resources, such as ads and videos. What normally happens is that these resources are loaded at the same time as the page loads, however, this can also add additional delays. If the third-party content is not critical to the page load process, then lazy loading can be a great method to reduce page load time. <\/p>\n

[\/vc_column_text][vc_custom_heading text=”What is a Facade?” font_container=”tag:h2|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

In this instance, a facade is simply an element that is meant to look like a dynamic embedded element, but instead, is just a static resource. For example, instead of embedding a video on a page, a facade would be a static image that linked to the video. In this way, you are not calling on those resources during page load and they are only accessed when the visitor selects to play or interact with the video. This can also be used for social media buttons or live chat widgets. However, just note that with certain widgets, especially for chat widgets, you may lose some functionality if you decide to make it a static resource. A Lighthouse report will detect elements like these and notify you if they can be lazy loaded with a facade. <\/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=”Lazy Load Third-party Resources with Facades” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1636998757253{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=”Lazy Loading Explained” font_container=”tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text] We discussed asynchronous loading, or lazy loading,…<\/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 - Lazy Load Third-party Resources with Facades | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"Third-party resources can affect web page load times. Learn how Dotcom-Tools can help identify web page improvements along with Lighthouse reports!\" \/>\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\/lazy-load-third-party-resources-with-facades\/\" \/>\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 - Lazy Load Third-party Resources with Facades\" \/>\r\n<meta property=\"og:description\" content=\"Third-party resources can affect web page load times. Learn how Dotcom-Tools can help identify web page improvements along with Lighthouse reports!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/\" \/>\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\/lazy-load-third-party-resources-with-facades\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/\",\"name\":\"Lighthouse Optimizations - Lazy Load Third-party Resources with Facades | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-15T17:53:49+00:00\",\"dateModified\":\"2021-11-15T17:53:49+00:00\",\"description\":\"Third-party resources can affect web page load times. Learn how Dotcom-Tools can help identify web page improvements along with Lighthouse reports!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/#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 – Lazy Load Third-party Resources with Facades\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lighthouse Optimizations - Lazy Load Third-party Resources with Facades | Dotcom-Monitor Tools Blog","description":"Third-party resources can affect web page load times. Learn how Dotcom-Tools can help identify web page improvements along with Lighthouse reports!","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\/lazy-load-third-party-resources-with-facades\/","og_locale":"en_US","og_type":"article","og_title":"Lighthouse Optimizations - Lazy Load Third-party Resources with Facades","og_description":"Third-party resources can affect web page load times. Learn how Dotcom-Tools can help identify web page improvements along with Lighthouse reports!","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/","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\/lazy-load-third-party-resources-with-facades\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/","name":"Lighthouse Optimizations - Lazy Load Third-party Resources with Facades | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-15T17:53:49+00:00","dateModified":"2021-11-15T17:53:49+00:00","description":"Third-party resources can affect web page load times. Learn how Dotcom-Tools can help identify web page improvements along with Lighthouse reports!","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/lazy-load-third-party-resources-with-facades\/#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 – Lazy Load Third-party Resources with Facades"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17607"}],"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=17607"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17607\/revisions"}],"predecessor-version":[{"id":17609,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17607\/revisions\/17609"}],"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=17607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}