Trabajamos con un cliente al que algunos de los iframes dejaron de mostrárseles en varias páginas. El proyecto que realizamos recientemente para este cliente consistió en migrar wordpress a AWS y actualmente estamos trabajando en mejorar la velocidad de carga del sitio e incluir los encabezados de seguirdad a WordPress.
Lo que nos pareció extraño es que este problema en particular no se presentó en los primeros días de la migración, por lo cual lo primero que hicimos fue comprobar que el contenido del iframe era correcto y sí, lo era. Sin embargo, varias veces el iframe dejaba de mostrarse y aparecía un error 503 en la consola:
Por tanto, no podemos descartar que exista algún problema con el proveedor y por otro lado, en la mayoría de los intentos que hicimos no aparecía ningún error. El iframe había sido insertado por el cliente como texto html por lo que podíamos ver claramente el código html.
Cómo encontramos la razón por la que no se mostraba el iframe
En el fornt el inspector de Google mostraba que se había añadido una clase que no estaba en el HTML original; «class=lazyloaded». Esta es una clase insertada por EWWW Image Optimizer que permite demorar la carga de los elementos que no se muestran en el viewport para mejorar el tiempo de carga del sitio. Por último, en el adminisitrador de WordPress el iframe se cargaba perfectamente (excepto cuando ocurría el error 503 que mencionamos anteriormente) y esta clase aún no se había añadido.
Por último para asegurarnos de cambiar solo lo imprescindible movimos el iframe de lugar a otro punto en el que no se mostrara en el viewport de inmediato. En este caso todo funcionaba correctamente en el front. Así que solo quedaba pedir a EWWW Image Optimizer que no demorara la carga de este elemento.
Como excluir un elemento de la carga diferida con EWWW Image Optimizer
En primer lugar debes ubicar el elemento que quieres excluir, puedes identificarlo con un elemento HTML (div, span) o con una clase (más recomendado). En este caso en particular el cliente tiene varios iframes de varios clientes suyos y los de este cliente son los únicos que presentaban el problema. Como era sencillo modificar el HTML para este elemento solo añadimos una clase que fuera única; «clase-o-elemento-a-excluir».
Luego vas a los ajustes de EWWW Image Optimizer y añades la clase en la parte de exclusiones
Luego guardas los cambios y limpia la caché.
Esta es una gran ventaja de este plugin, en un caso como este donde el problema provenga probablemente del contenido del iframe, EWWW Image Optimizer te permite excluir elementos que puedan traer conflictos.
