Soporte » Diseño – Temas y plantillas » Imágenes destacadas cargan en diferido (loading) y esto se “penaliza”

  • Resuelto atutrabajo

    (@atutrabajo)


    Hola.

    Antes que nada, juro que antes de venir por acá probé con “de todo” (Incluso tratado de meterme en el código de Gutenberg pero NO encontré lo que buscaba).

    Dicho esto, a continuación, paso a describirles el problema:

    1) Estoy rediseñando mi sitio (Por eso la url está un poco “rara”, je. Pero es temporal)

    2) Hasta ahora “casi” todo marcha sobre ruedas. Excepto por 2(dos) “problemitas”…

    2.1) Los estilos de fuente (en particular el “peso”) se ven distintos que en el editor.

    2.2) Las imagenes destacadas (cargadas a través del bloque de “Imagen destacada de la entrada”), carga en diferido (El sistema le agrega la carga diferida nativa de WordPress, a través de loading=”lazy”)

    El 1er. problema (2.1) se lo pasé a Elementor pues, en mi sitio, estoy usando la plantilla “Hello Elementor” pero – hasta ahora – NO obtuve NINGUNA respuesta.

    Específicamente lo que ocurre es lo siguiente:

    2.1.1) En la siguiente captura de pantalla, puede ver como queda una entrada cuando la edito mediante Gutenberg…

    https://ibb.co/C68D5Y5

    Es decir (en dicho editor) el texto se ve como me interesa. Esto es;

    2.1.1.1) Una frase en, abre sans; tamaño de fuente: 16px; altura de línea: 26px; peso de fuente: 400; (O – lo que es lo mismo – un texto “normal”).

    2.1.1.2) A continuación, otra frase pero, con font-weight: 700; (Es decir “negrita”).

    Hasta aqui, pareciera que va todo bien. Peeero…

    2.1.2) Aquí tienen como se ve el mismo texto pero, del lado del visitante

    https://ibb.co/Jxdq06c

    Nota: En este 1er. ejemplo, estoy entrando desde una ventana de incognito por las dudas pueden “sospechar” que es un problema de cache. Aunque SIEMPRE las limpias. Pero bueno!

    Si se dan cuenta, la frase (lorem ipsum)…

    …”Curabitur et arcu elit. Vestíbulo lobortis sodales lorem”…

    ¡NO Destaca!

    Esto es así pues, por alguna razón que desconozco, desde que comenzó el rediseño con esta plantilla (Hello Elementor)… ¡TODOS mis textos se ven en “negrita”!

    Sin embargo, a continuación les mostraré el mismo ejemplo pero, desde una ventana “normal” de Google Chrome en la que, instale una extensión que muestra el tipo y los estilos de fuente (Para que vean mejor lo que estoy tratando de explicar)…

    https://ibb.co/26XcGD8

    Como pueden ver, el texto de arriba dice que es;

    abre sans; tamaño de fuente: 16px; altura de línea: 26px; peso de fuente: 400;

    Es decir NORMAL.

    En cambio, la frase antes mencionada es…

    abre sans; tamaño de fuente: 16px; altura de línea: 26px; peso de fuente: 700;

    Es decir NEGRITA.

    Y, sin embargo, para cualquier lector ¡NO hay – ni habrá – NINGUNA diferencia!

    Creanmé que, para este proyecto es imperativo poder resaltar algunas frases y/o palabras pues, cuando empiece a transcribir los borradores que ya terminé, lo haré con textos larguísimos (literal).

    2.2.1) Respecto a las imágenes destacadas, el problema es el siguiente…

    https://ibb.co/xjWh15z

    Como pueden observar, Google me está “penalizando” pues…

    …”La imagen del renderizado del mayor elemento con contenido se ha cargado en diferido”…

    Y esto es así porque (y en eso tengo que darles la razón)…

    …”Las imágenes de la parte visible a primera vista que se cargan en diferido se renderizan más tarde en el ciclo de vida de la página, lo que puede retrasar el renderizado del mayor elemento con contenido”…

    Resumiendo, les pregunto:

    a) ¿Hay alguna manera de conseguir que, partes de mis textos destaquen para el lector?

    b) ¿Cómo hago para evitar el lazing=”loading” en las imágenes destacadas?

    c) ¿Vale la pena que siga las siguientes recomendaciones similares que, el equipo de Soporte de Elementor, publicó en sus foros, en respuestas a usuarios con problemas?

    c.1) Desactivar todos los plugins, excepto Elementor (Sepan que… ¡Tengo 20!)

    c.2) Active uno por uno hasta que encuentre el que “pueda” estar dando conflicto (Ni siquiera estén seguros)

    c.3) Si lo anterior no funciona, cambie cambiando de plantilla

    Como pueden ver, en mi modesta opinión ¡NO tienen idea!

    Pero en fin.

    Aguardo sus comentarios.

    Desde ya, muchas gracias.

    Saludos.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 12 respuestas - de la 1 a la 12 (de un total de 12)
  • Moderador almendron

    (@almendron)

    1) Respeto a las fuentes, si desactivas el cache, incluyendo «minify», es posible que pueda decirte donde está el problema.

    2) Las recomendaciones que te han dado son las correctas. Es el procedimiento estándar para cuando se desconoce cuál es el origen del problema.

    3) Cómo desactivar la carga diferida selectivamente: https://ayudawp.com/desactivar-lazy-load-selectivamente/

    Lo demás ya lo iremos viendo.

    Iniciador del debate atutrabajo

    (@atutrabajo)

    Hola. Antes que nada, gracias por responder tan rápido:)

    Te comento que, respecto de la imagen, el tutorial que me enviaste me vino de perillas pues, pude solucionar el problema con uno de los códigos mencionados, en el mismo.

    Con respecto a la fuente te comento que…

    Probé de todo y descubrí que, el problema está en la plantilla.

    El problema es que, estoy usando Hello Elementor que, como saben es… ¡De Elementor!

    ¿Que como lo descubrí?

    Simple. Cambié de plantilla por la predeterminada por WordPress (Twenty Two) y ¡tanaaan!

    Si bien se resolvió el problema de las fuentes, se me DESCONFIGURÓ todo el sitio.

    De hecho, descubrí que, específicamente, el problema se genera en ESTE archivo de Elementor…

    https://stage9.atutrabajo.org/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.6.6

    ¿Que como lo sé? Porque instalé temporalmente el plugin Asset Cleanup y, me puse a analizar uno por uno los archivos generados y, a posteriori, con mi sitio abierto en otra ventana (de incognitoy) y con las caches desactivas, iba eliminando de a uno y viendo si afectaba o no a mi sitio.

    Y, cuando eliminé el que les envio… ¡tanaaan! La fuente quedó como tenía que quedar. Peeero… El sitio se desonfiguró.

    ¿Por favor, se podrían fijar si, analizando el archivo en cuestión, pueden aportar alguna solución?

    Desde ya, muchas gracias.

    Saludos.

    Moderador almendron

    (@almendron)

    Fuentes; si desactivas el cache, incluyendo «minify», es posible que pueda decirte donde está el problema. Es posible que no haya que modificar ningún archivo.

    Iniciador del debate atutrabajo

    (@atutrabajo)

    Hola. Antes que nada, mil disculpas por no responderte antes.

    Pasa que estoy (muy) atrasado con el proyecto y, antes de «entregarte» el sitio como pedís (sin caché ni minificado), quería actualizar un par de cosas.

    Dicho esto, te comento que:

    – En cuanto al código que te mencioné para desactivar lazy loading nativo de la 1ra. imagen, es el ÚNICO que a mi me funcionó de TODOS los que probé (Y los probé casi todos).

    Sin embargo, dicho código me generaba el siguiente conflicto…

    Si te das cuenta, mi sitio está en un subdominio (stage9). Esto es así porque, el sitio original (sin el stage9) está online.

    En este subdominio lo que hice fué hacer un staging. Es decir, me bajé el sitio completo para poder rediseñarlo y luego (una vez terminado el rediseño), resubirlo para reemplazar al original en cuestión.

    En ese sentido, una de las 1ras. cosas que hice fué cambiarle la plantilla por la de Hello Elementor, básicamente porque, como seguro sabés, esta plantilla ES… ¡de Elementor!.

    Pero además porque, es la UNICA (gratis, obvio) que NO tiene cabecera ni pié de página.

    Lo cuál me permitió (con la «ayuda» del plugin Elementor Header&Footer), diseñar la «hermosa» cabecera y el pié de página que podés ver en mi sitio.

    Ergo, NO puedo (ni quiero) cambiarlo pues, como ya mencionó, es la única que me permite diseñar un header y un footer desde 0.

    No obstante lo anterior, la Página de Inicio es la UNICA que estoy rediseñando con Elementor. Para tooodo el resto del sitio, estoy usando Gutenberg (el editor de WordPress).

    Y ahí viene la «disyuntiva» que te mencioné anteriormente. Esto es…

    Con el código en cuestión, estaba diciéndole que a TODAS las 1ras. imágenes les quite «lazy loading». Y esto hacía que, cuando quería editar mi homepage con Elementor ¡zas! me daba error y NO me dejaba editar.

    Posteriormente, como dije, probé con otros códigos (Excluir por; Clase, URL, etc.) pero NINGUNO me funcionó.

    Concretamente. TODOS los (otros) códigos que probé, funcionaban sin «conflicto» con el editor de Elementor… ¡Pero en la práctica NO funcionaban!

    Conclusión: Me cansé de probar cosas, usé el único código que me sirvió del tutorial (desactivar lazyloading DEFINITIVAMENTE y de todo el sitio) y, activé el que trae mi plugin de caché (W3TC) y ¡tanaaan! (Hasta ahora, se acabaron los problemas!

    Te quería comentar esto para que lo tengas en cuenta por si, alguno/a tiene la «combinación» que te mencioné (homepage con Elementor y el resto con Gutenberg).

    Dicho esto y volviendo al tema de las fuentes, ya me hice un backup con todos los cambios que hice después de que me contactaras.

    Asi que podés hacer todos los experimentos que quieras.

    Pero eso si. Por favor, avisame lo antes posible pues, lo que me queda es – justamente – empezar a cargar los textos «verdaderos». Y no lo voy a hacer hasta que vuelva a reconectar TODO (Mi plugin de caché – W3TC – con su respectivo minificado + Cloudflare).

    Aguardo tus comentarios.

    De nuevo, gracias.

    Saludos.

    Iniciador del debate atutrabajo

    (@atutrabajo)

    Otro si, digo.

    Por las dudas…

    Me acabo de dar cuenta de que, quizás no te des cuenta de que, en rigor de verdad, lo que necesito que analices es stage9.atutrabajo.org y NO el original (atutrabajo.org).

    Saludos.

    Moderador almendron

    (@almendron)

    Y yo necesito que desactives el cache de stage9.atutrabajo.org, incluyendo «minify», para intentar ver de donde procede el problema que aún lo tengo claro.

    Iniciador del debate atutrabajo

    (@atutrabajo)

    Hola. Gracias por responder tan rápido.

    Eso es lo que te quise decir de entrada…

    ¡Ya está TODO desactivado! (Desactivé W3TC + Pausé Cloudflare).

    Ergo. En ESTE momento NO hay ni caché ni minificado (Acabo de chequearlo).

    Por eso te quise avisar (Porque no puedo continuar hasta tanto vuelva a conectar todo).

    Aguardo tus comentarios.

    De nuevo, gracias.

    Saludos.

    Moderador almendron

    (@almendron)

    El problema lo tienes en unos estilos añadidos «in line». Tienen que ver con «elementor-kit»:

    <style id=’elementor-frontend-inline-css’ type=’text/css’>….</style>

    Solo desactivando font-family en las dos siguientes reglas

    .elementor-5290 .elementor-element.elementor-element-ec17c43 {
    	color: #002200;
    	/* font-family: "Open Sans", Sans-serif; */
    	font-size: 16px;
    	font-weight: 400;
    	font-style: normal;
    	line-height: 26px;
    }
    .elementor-kit-12846 {
    	--e-global-color-primary: #6EC1E4;
    	--e-global-color-secondary: #54595F;
    	--e-global-color-text: #333333;
    	--e-global-color-accent: #61CE70;
    	--e-global-color-e8f34d0: #D9A845;
    	--e-global-color-d6dfb0f: #F4F5F8;
    	--e-global-color-b2799af: #F4F5F8;
    	--e-global-color-54b5acd: #9DC7EA;
    	--e-global-color-1c8d693: #937185;
    	--e-global-color-f79e2df: #54595F;
    	--e-global-typography-primary-font-family: "Open Sans";
    	--e-global-typography-secondary-font-family: "Open Sans";
    	--e-global-typography-text-font-family: "Open Sans";
    	--e-global-typography-text-font-size: 16px;
    	--e-global-typography-text-font-weight: 400;
    	--e-global-typography-text-line-height: 26px;
    	--e-global-typography-accent-font-family: "Open Sans";
    	color: #333333;
    	/* font-family: "Open Sans", Sans-serif; */
    	font-size: 16px;
    	font-weight: 400;
    	line-height: 26px;
    }

    me coge ahora la siguiente

    body {
    	font-family: ‘Open Sans’, Arial, sans-serif;
    }

    y ya funciona.

    Iniciador del debate atutrabajo

    (@atutrabajo)

    Hola. Francamente sos (casi) un genio 🙂

    Te cuento un poquito:

    1) Meti el CSS que me mandaste en el style.css de mi child theme y NO funcionó…

    2) Lo metí en el style.css del tema padre y TAMPOCO, je.

    3) Probé con Personalizar/CSS adicional y NO hubo caso.

    Entonces, volví a leer lo que mandaste y me di cuenta de lo siguiente…

    Lo que me estás mandando, se parece a lo que cargué en el style.css del childtheme.

    Pero que TAMBIEN volví a cargar en: Elementor/Plantillas/Plantillas guardadas/Kit predeterminado (Que es lo que mencionás en tu último texto).

    Asi que volví a Editar eso y, en Fuentes Globales puse «Por defecto» y… ¡tanaan!

    Por supuesto que lo que está editado con Gutenberg se arregló enseguida pues, NO depende del Editor de Elementor.

    E incluso, una parte del texto de la homepage TAMBIÉN se arregló, je (Se ve que me había cansado de poner Open sans, Open sans y, lo dejé – justamente – por defecto, je)

    En cuanto al resto, sencillamente cambié Tipo de letra «Open sans» Por «Defecto» y… ¡tanaaan!

    De nuevo, sos un capo.

    Por favor, todavía lo dejé sin caché ni minify para que lo revises a ver si tengo que «toquetear» algo más.

    Pero, me parece que – ahora si – estaría todo ok.

    ¿Me podrás confirmar para que pueda volver a reconectar todo? (W3TC + Clouflare)

    Desde ya, muchas gracias.

    Saludos.

    Moderador almendron

    (@almendron)

    Yo lo veo bien. Un saludo.

    Iniciador del debate atutrabajo

    (@atutrabajo)

    Muchísimas gracias.

    Nos vemos!

    Moderador almendron

    (@almendron)

    De nada. Un saludo.

Viendo 12 respuestas - de la 1 a la 12 (de un total de 12)
  • Debes estar registrado para responder a este debate.