¿Como mejorar CLS de WebVitals y reservar espacio de carga?

  • Autor Autor Sommera
  • Fecha de inicio Fecha de inicio
Sommera

Sommera

1
Pi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
Suscripción a IA
Optimizando un sitio con el que ya he logrado considerables mejoras tengo un percance y estoy 'bloqueado' sobre como mejorar el CLS. Esto se refiere a como se mueven ciertas partes de el sitio una vez cargadas, es decir, cargan y se desplazan.

Screenshot_2021-05-17 GTmetrix Performance Report.webp


El problema especifico viene por el lado de el bloque de anuncios, primero estaba cargaba desde un plugin Wordpress y luego -mejoro- cargándolo desde una organización interna de el template, es decir salteándose el uso de un plugin (un paso menos) pero igual sigue teniendo este conflicto y no es la forma mas optima ya que no se soluciono definitivamente.

Leí que se podía reservar ese espacio de el anuncio y con esto no se desplazaría una vez cargado.

¿Alguno tiene idea sobre como hacer esto? Intente reservando un espacio fijo desde la sección que carga el bloque pero pareciera no funcionar ademas de que los bloques de anuncios son adaptables y suelen variar el tamaño.

¿Experiencias y potenciales soluciones para mejorar la carga de CLS?
 
Si estas hablando de adsense, ellos están configurados como diferida la carga. Puedes aplazarlo al footer pero en algunos temas no funciona bien.

Creo que seria de mas ayuda que digas si usas WP y que themes con plugins.

Desde ya te digo que el server carga lento, deberian andar menos de 300ms.

Ojala otros te puedan ayudar.
 
YoGeekOnline dijo:
Si estas hablando de adsense, ellos están configurados como diferida la carga. Puedes aplazarlo al footer pero en algunos temas no funciona bien.

Creo que seria de mas ayuda que digas si usas WP y que themes con plugins.

Desde ya te digo que el server carga lento, deberian andar menos de 300ms.

Ojala otros te puedan ayudar.
Hacer clic para expandir...

Si, es Adsense.

¿Que código seria aplazar al footer? ¿El anuncio en si mismo?

Es Wordpress y plugins creo que no son relevantes los que tengo sino que lo seria si hay uno que sirve para el objetivo de solucionarlo.

Preferiria cargarlo sin demora del CLS desde el template, con código directo. Adicional al codigo de Adsense se deberia agregar algo para 'reservar el espacio', porque actualmente esta cargando directamente.
 
A veces depende del theme tiene que estar bien optimizado para móvil.
 
No se si me sepa explicar no se mucho al respecto, bueno Busca en los archivos del tlheme, el archivo que contenga el codigo de la caja donde va incluido el bloque de anuncio. y asignale un tamaño fijo.

Yo lo hice con mis webs y baje el CLS de 0.3 a 0

Ejemplo, un bloque de anuncios va en el header? entonces buscas en tu theme, el archivo "header.php" lo abres y buscas el codigo de la caja, en mi caso era

<?php if ( xbox_get_field_value( 'wpst-options', 'header-ad-mobile' ) != '' ) : ?>
<div class="happy-header-mobile">
<?php echo wpst_render_shortcodes( xbox_get_field_value( 'wpst-options', 'header-ad-mobile' ) ); ?>
</div>
<?php endif; ?>
</header><!-- #masthead -->

<?php
,
Hacer clic para expandir...

Lo que hice fue agregarle dimensiones fijas para que no cambie la pagina cuando aparezca el anuncio

<?php if ( xbox_get_field_value( 'wpst-options', 'header-ad-mobile' ) != '' ) : ?>
<div class="happy-header-mobile" style="width:308px; height:402px;>
<?php echo wpst_render_shortcodes( xbox_get_field_value( 'wpst-options', 'header-ad-mobile' ) ); ?>
</div>
<?php endif; ?>
</header><!-- #masthead -->

<?php
Hacer clic para expandir...
 
kame dijo:
No se si me sepa explicar no se mucho al respecto, bueno Busca en los archivos del tlheme, el archivo que contenga el codigo de la caja donde va incluido el bloque de anuncio. y asignale un tamaño fijo.

Yo lo hice con mis webs y baje el CLS de 0.3 a 0

Ejemplo, un bloque de anuncios va en el header? entonces buscas en tu theme, el archivo "header.php" lo abres y buscas el codigo de la caja, en mi caso era



Lo que hice fue agregarle dimensiones fijas para que no cambie la pagina cuando aparezca el anuncio
Hacer clic para expandir...

Gracias por la respuesta.

Voy a probar de intentar dejar un lugar fijo pero a su vez adaptable por defecto dependiendo el dispositivo y que ahi dentro muestre el bloque porque sino va a quedar un espacio o diferencia entre el anuncio y la siguiente parte del contenido.
 
Fixeado, 'reservando espacio' lo que evita que se desplace con un CSS que tiene un alto de 300px y un width de 100% y una llamada a esta en el codigo de anuncio.

Screenshot_2021-05-18 GTmetrix Performance Report(1).webp



@kame

Tendría que ver de optimizarlo dependiendo la pantalla de el dispositivo y no fijo aunque casi no hay bloques con mas de 300px de alto salvo 2 disponibles en PC que casi ni se muestran...
 
Sommera dijo:
Optimizando un sitio con el que ya he logrado considerables mejoras tengo un percance y estoy 'bloqueado' sobre como mejorar el CLS. Esto se refiere a como se mueven ciertas partes de el sitio una vez cargadas, es decir, cargan y se desplazan.

Ver el archivo adjunto 523095

El problema especifico viene por el lado de el bloque de anuncios, primero estaba cargaba desde un plugin Wordpress y luego -mejoro- cargándolo desde una organización interna de el template, es decir salteándose el uso de un plugin (un paso menos) pero igual sigue teniendo este conflicto y no es la forma mas optima ya que no se soluciono definitivamente.

Leí que se podía reservar ese espacio de el anuncio y con esto no se desplazaría una vez cargado.

¿Alguno tiene idea sobre como hacer esto? Intente reservando un espacio fijo desde la sección que carga el bloque pero pareciera no funcionar ademas de que los bloques de anuncios son adaptables y suelen variar el tamaño.

¿Experiencias y potenciales soluciones para mejorar la carga de CLS?
Hacer clic para expandir...
Cómo se hace lo que resalto en negrita?
 
Caprese dijo:
Cómo se hace lo que resalto en negrita?
Hacer clic para expandir...

Podes pegar directamente el código de los anuncios en la sección de el template que tengas (single, archive, page...) o -dependiendo el theme- configurarlo por ahí (depende especificamente de la plantilla).
 
Última edición:
Que pasa con las páginas que usan adsense automático? Tengo mis métricas para dispositivos móviles en 98/100 y justo el CLS lo tengo en 0,15, quería rebajarlo a 0,1 pero supongo que adsense automático será un problema para ésto no?

Saludos.
 
valeronsito dijo:
Que pasa con las páginas que usan adsense automático? Tengo mis métricas para dispositivos móviles en 98/100 y justo el CLS lo tengo en 0,15, quería rebajarlo a 0,1 pero supongo que adsense automático será un problema para ésto no?

Saludos.
Hacer clic para expandir...
Sin título.webp


Tengo anuncios automáticos Movil 99/100
 
A mi lo que me ocurre es que tengo buen CLS en ordenadores pero no en móvil
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Caprese
Mejora la carga de los banners para solucionar problemas de CLS en Webmaster Tools
Respuestas
1
Visitas
225
León Chávez
L
Atrás
Arriba