![]() Place third-party script tags after the key first-party tags and use async or defer attributes to load them asynchronously. Scripts can affect the loading sequence because the DOM construction pauses while scripts are executed. Requests for third-party embeds can get in the way of loading first-party content, so the position of a third-party script tag is important. For example, the news text on a news page should load before embeds for a Twitter feed or advertisements. In a well-designed page, the key first-party content will be the focus of the page, while the third-party embeds will occupy side-bars or appear after the first-party content.įor the best user experience, the main content should load quickly and before any other supporting content. To efficiently use third-party embeds and reduce their performance impact, follow the guidelines below. Third-party embeds can negatively impact performance, but they also offer important functionalities. You can use this opportunity to remove any redundant code. It is a good practice to periodically audit the performance impact of your embeds and third-party code because embed source code may change. The audit is available through Chrome DevTools under the Lighthouse tab. Reduce the impact of third-party code Lighthouse audit shows the list of third-party providers a page uses, with size and main-thread blocking time. Performance monitoring tools such as Lighthouse and Chrome DevTools help to measure the impact of third-party embeds on performance. They take more time to load and keep the main thread busy when executing. Many popular embeds include over 100 KB of JavaScript, sometimes even going up to 2 MB. ![]() This can make the third-party embeds heavy and affect the performance of the page by delaying its first-party content. ![]() Some providers also use a script snippet that dynamically injects an to pull other content in. Third-party providers offer HTML snippets often consisting of an that pulls in a page composed of markup, scripts, and stylesheets. Third-party embeds are typically loaded in elements on the page. * Restaurant, park, and event venue pages often embed maps. * Organizations with active Twitter or social media accounts embed feeds from these accounts to their web pages to engage and reach out to more people. * Websites related to sports, news, entertainment, and fashion use videos to augment textual content. What is an embedĪ third-party embed is any content displayed on your site that is:Įmbeds are frequently used in the following: This ensures that all the critical content gets indexed by search engines. Note: It's best to use the techniques described in this post to load only offscreen or non-primary page content. This article discusses performance best practices that you can use when loading third-party embeds, efficient loading techniques, and the Layout Shift Terminator tool that helps reduce layout shifts for popular embeds. Third-party embeds may also cause layout shifts as they load. It can be render-blocking, contend with other critical resources for network and bandwidth, or affect the Core Web Vitals metrics. Third-party content can impact the performance of a page in many ways. The most common examples of third-party content embeds are video players, social-media feeds, maps, and advertisements. Many sites use third-party embeds to create an engaging user experience by delegating some sections of a web page to another content provider.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |