We worked with a client who had some of the iframes stop displaying on multiple pages. The project we recently carried out for this client consisted of migrating wordpress to AWS and we are currently working on improving the loading speed of the site and including security headers in WordPress.
What we found strange is that this particular issue didn't show up in the early days of the migration, so the first thing we did was check that the iframe content was correct, and yes, it was. However, several times the iframe would stop displaying and a 503 error would appear in the console:
Therefore, we cannot rule out that there is a problem with the provider and on the other hand, in most of the attempts we made, no errors appeared. The iframe had been inserted by the client as html text so we could clearly see the html code.
How we found the reason why the iframe was not displayed
In the front the Google inspector showed that a class had been added that was not in the original HTML; "class=lazyloaded". This is a class inserted by EWWW Image Optimizer that allows delaying the loading of elements that are not displayed in the viewport to improve site load time. Lastly, in the WordPress admin the iframe was loading perfectly (except when the 503 error we mentioned earlier occurred) and this class had not been added yet.
Lastly, to make sure we only changed the essentials, we moved the iframe from place to another place where it wouldn't show up in the viewport immediately. In this case everything worked correctly on the front. So it only remained to ask EWWW Image Optimizer not to delay the loading of this element.
How to exclude an element from lazy loading with EWWW Image Optimizer
First you must locate the element you want to exclude, you can identify it with an HTML element (div, span) or with a class (more recommended). In this particular case, the client has several iframes from several of his clients and those of this client are the only ones that presented the problem. Since it was easy to modify the HTML for this element we just added a class that was unique; "class-or-element-to-exclude".
Then you go to the EWWW Image Optimizer settings and add the class in the exclusions part
Then save the changes and clear the cache.
This is a great advantage of this plugin, in a case like this where the problem probably comes from the content of the iframe, EWWW Image Optimizer allows you to exclude elements that may cause conflicts.
