Invision Community 4: SEO, prepare for v5 and dormant account notifications By Matt Monday at 02:04 PM
Steven W. Posted February 25 Posted February 25 (edited) 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. AlexWebsites 1
Steven W. Posted February 25 Author Posted February 25 The OP is supposed to say "Embedded iframes (like YouTube videos)" -- but it is no longer editable. AlexWebsites 1
Rick Vasquez Posted February 27 Posted February 27 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 AlexWebsites and Steven W. 2
PanSevence Posted February 27 Posted February 27 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. Steven W. 1
Stuart Silvester Posted February 27 Posted February 27 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. SeNioR-, Marc, PanSevence and 1 other 4
Steven W. Posted February 27 Author Posted February 27 (edited) 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 Posted February 27 Posted February 27 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. SeNioR-, AlexWebsites, Steven W. and 2 others 5
Steven W. Posted February 28 Author Posted February 28 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"}¢er={$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. Afrodude 1
Stuart Silvester Posted February 28 Posted February 28 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. Marc and David N. 2
Recommended Posts