Speed Optimization: Embedded Iframes

[Steven W.]

Recently, while administering a large board running IPS 4.x, I saw that there are a lot of performance optimizations already in place which is great.  I also saw a few instances of front and back-end performance issues, and in some cases, outright crashing; one of these boils down to 2 things:

• Embedded iframes (like tweets) do not use the deferred loading=lazy attribute, so on topics with many embeds, pages slow to a crawl or outright crash (esp. Apple devices)
• Embedded iframes seem to point to an iframe loader as a sort of internal proxy, which increases load on the server, particularly for large sites, probably predating loading=lazy

I have implemented this optimization here: https://vbresults.com/downloads/speed-optimizations-ip-community-4 — and the IPS team can merge it into the core if they see fit.  I'd like to expand on this by dis-intermediating the iframe where possible, but understand there are other reasons for it like the layout.

Edited February 25 by Steven W.

[Steven W.]

The OP is supposed to say "Embedded iframes (like YouTube videos)" -- but it is no longer editable.

[Rick Vasquez]

I was having this issue on some threads on my board, specifically where we talk about music and lots of youtube videos are linked. This plugin helped solve the problem immediately after installing. It seems like all the youtube videos attempting to load at the same time is crashing some memory limit in safari/webkit on iOS

[PanSevence]

I also noticed this type of issue when I add videos in topics, they are immediately downloaded instead of only after being opened, which causes the topics to take a very long time to load, we need a fix.

[Stuart Silvester]

It may be worth both of you checking that you have lazy loading enabled - AdminCP > System > Settings > Posting.

Embeds, images, videos, audio are lazy-loaded via a Javascript method if lazy loading is enabled, the native options didn't exist when this was implemented but we have moved to a native solution in v5.

[Steven W.]

2 hours ago, Stuart Silvester said:

It may be worth both of you checking that you have lazy loading enabled - AdminCP > System > Settings > Posting.

Embeds, images, videos, audio are lazy-loaded via a Javascript method if lazy loading is enabled, the native options didn't exist when this was implemented but we have moved to a native solution in v5.

In 4.x, that lazy loading setting does not work on all iframe embeds, including but not limited to YouTube videos.  Here is an example:

Here is the code:

<iframe allowfullscreen="" frameborder="0" height="113" src="https://www.youtube-nocookie.com/embed/XtX0Yn6sQtI?feature=oembed" title="Welcome to Invision Community Five" width="200"></iframe>

This is not lazy loaded.  The plugin adds loading=lazy to iframe embeds like this.

Edited February 27 by Steven W.

[Stuart Silvester]

Ah, I see. That looks like a bug that was introduced when we switched the domain to use youtube-nocookie.com. We'll get that fixed.

[Steven W.]

I'm not sure if this has ever been implemented for some iframes, because the core -> global -> embed -> iframe template also doesn't have this, and is not related to the YouTube embed:

<div class='ipsEmbeddedOther' contenteditable="false">
	<iframe src="{$url|raw}" data-controller="core.front.core.autosizeiframe" {{if $embedId}}data-embedId='{$embedId}'{{endif}} allowfullscreen=''></iframe>
</div>

The same is true for Google Maps core -> global -> embed -> googleMaps:

<div class='ipsEmbeddedOther' contenteditable="false">
	<iframe height="450"
	{{if $mapType == 'place'}}
		src="https://www.google.com/maps/embed/v1/place?key={setting="google_maps_api_key"}&q={$q}"
	{{elseif $mapType == 'dir'}}
		{{if isset( $q['waypoints'] )}}
			src="https://www.google.com/maps/embed/v1/directions?key={setting="google_maps_api_key"}&origin={$q['origin']}&waypoints={$q['waypoints']}&destination={$q['destination']}"
		{{else}}
			src="https://www.google.com/maps/embed/v1/directions?key={setting="google_maps_api_key"}&origin={$q['origin']}&destination={$q['destination']}"
		{{endif}}
	{{elseif $mapType == 'search'}}
		src="https://www.google.com/maps/embed/v1/search?key={setting="google_maps_api_key"}&q={$q}"
	{{elseif $mapType =='coordinates'}}
		src="https://www.google.com/maps/embed/v1/view?key={setting="google_maps_api_key"}&center={$q}&zoom={$zoom}"
	{{endif}}>
	</iframe>
</div>

As well as Brightcove videos core -> global -> embed -> brightcove:

<div class="ipsEmbeddedBrightcove">
  <div class="ipsEmbeddedBrightcove_inner">
    <iframe src="{$url|raw}"
      allowfullscreen
      webkitallowfullscreen
      mozallowfullscreen
	  class="ipsEmbeddedBrightcove_frame">
    </iframe>
  </div>
</div>

The plugin I made lazy loads all of these iframes.

[Stuart Silvester]

The text parser adds our lazy-loading attributes to iframes where necessary. They're not in the templates. The issue fixed was that the text parser was not adding the attributes to YouTube embeds. Not all iframes will be lazy-loaded (the majority are), that's working as intended right now but all iframes will be natively lazy-loaded in v5.