![html code for iframe google site html code for iframe google site](https://cdn2.wpbeginner.com/wp-content/uploads/2020/12/embed-iframe-code-main.png)
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.
![html code for iframe google site html code for iframe google site](http://www.open-general.com/faq/img/faq00054d.png)
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.
![html code for iframe google site html code for iframe google site](https://i.ytimg.com/vi/628nO9hOyT0/maxresdefault.jpg)
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.