The impact of iframe on search engine optimization

The impact of iframe on search engine optimization

Video is an effective way to optimize behavioral factors, and therefore iframe is used on most websites that are optimized for promotion in search engines.

The problem with the use of iframe is to slow down the speed at which the website loads. But the loading=lazy attribute has appeared, which solves the problem.

Delayed YouTube video upload saves ~500 kilobytes when the site is first loaded.

Insertion with Instagram with delayed loading saves ~100 kilobytes in the unzipped form at the first download.

By default, embedding a Facebook Like plug-in into a page uses ~215 kilobytes, but now lazy loading is supported - likes buttons.

The Google robot engine is updated after the browser version, so it already supports the new attribute.

Using lazy content downloads from external sources reduces the Largest Contentful Paint metric, which improves the Page Experience factor.

From 2021, the factor will influence the ranking of sites in search engine output.

?? Lazy iframe load in 2020

Google has announced the laoding=lazy attribute for iframe. Without the support of popular browsers, there was little point in using it, but the situation has already changed. Almost all popular browsers support the attribute:

?? Chrome;

?? Edge;

?? Safari;

?? Firefox.

The main advantages of the loading=lazy attribute are efficiency, ease of implementation, and memory savings.

According to Google Analytics, lazy frame loading leads to traffic savings of 2-3%, First Contentful Paint optimization of 1-2%, and First Input Delay optimization.

?? How does loading=lazy work

Embedding content on a page via iframe covers many scenarios. For example:

Embedding YouTube videos and/or publications from social networks;

Placement of advertisements.

In each scenario, the loading=lazy attribute solves the problem of how quickly pages that use insertion via iframe are loaded.

The processing mechanism is embedded in the browser. The attribute tells the browser that the loading of an iframe should be delayed until it is on-demand. In other words, as long as iframe does not reach the viewport. The loading attribute supports three values:

?? lazy - downloading content on demand;

?? eager - mandatory upload;

?? auto - download by browser decision.

The attribute must be prescribed because by default the browsers and Google crawler process pages using the eager method.

There are criteria in which lazy iframe loading will not work. This is done to avoid problems with incorrect applications.

In most cases, the browser will not use a lazy load if any of the conditions are met:

Size in width and height iframe is 4 pixels or less;

The block is hidden using display tags: none or visibility: hidden;

if the frame is taken out of the screen through a negative X or Y position.

?? How to embed on the site

Example:

<iframe src="https://example.com" loading="lazy" width="1000" height="1000"></iframe>

In scenarios where downloading via JavaScript is required.

var iframe = document.createElement('iframe');

iframe.src = 'https://megaindex.com';

iframe.loading = 'lazy';

document.body.appendChild(iframe);

?? How do I check? Check code for lazy loading:

<iframe src="https://indexoid.com" loading="lazy" onload?="alert('loaded!');" />

Recommended materials on the MegaIndex blog by clicking the links below:

New Way: How to Speed Up Site Uploads and Improve Behavioural Factors? Lazy rendering of content through content-visibility;

A new attribute for the img tag has appeared, which allows to speed up site loading. Example of implementation.

?? Conclusions

A new attribute for the img tag has appeared, which allows us to speed up site loading. Example of implementation.

The main problem with iframe is the slowdown of the website. The loading=lazy attribute helps solve the problem.

The improvement is progressive, which means there will be no consequences from using the attribute when opening a website in unpopular browsers.

By default, the search engine robot processes iframe blocks at the eager value, i.e. the content is loaded in its entirety.

Most use mobile devices. The Internet on mobile devices is in most cases slow.

Use the loading=lazy attribute now. As a result:

Improve the conversion rate by increasing speed;

Improved behavioral factors through increased speed;

Reduced user costs for traffic;

Reduced load on the website server;

Reduced device battery consumption;

Improved Page Experience factor value;

Reducing the cost of outgoing traffic to the server.

To embed the code of the analytics systems, the value loading=eager should be applied.

A link to the service is Site Analysis.

Any questions, remarks, or comments on the use of lazy loading on the pages of the site? Write in the comments below.