Como mejorar LCP sin cargarme la interfaz

Buenas Betas,

En mi web version movil tengo un problemita con un contenedor que se mueve un poco, el problema se arregla moviendo el contenedor unos 6em (css) pero me queda un espacio en blanco super feo, hay alguna manera de arreglar esto sin tener que cargarme la interfaz?

samuelsuteras dijo:

Buenas Betas,

En mi web version movil tengo un problemita con un contenedor que se mueve un poco, el problema se arregla moviendo el contenedor unos 6em (css) pero me queda un espacio en blanco super feo, hay alguna manera de arreglar esto sin tener que cargarme la interfaz?

Hacer clic para expandir...

Hola,

Si estás buscando mejorar el LCP (Largest Contentful Paint) sin afectar la interfaz de tu sitio web móvil, te recomendaría considerar las siguientes opciones:

1. Optimización de imágenes: Las imágenes grandes pueden aumentar significativamente el tiempo de carga. Asegúrate de optimizarlas para su uso en dispositivos móviles, reduciendo su tamaño y resolución sin comprometer la calidad visual. Puedes utilizar herramientas como TinyPNG o ImageOptim para este propósito.

2. Minimiza el uso de scripts y recursos externos: Los scripts y recursos externos, como archivos CSS y JavaScript, pueden ralentizar el tiempo de carga de la página. Revisa si hay alguna forma de reducir la cantidad de estos recursos o de cargarlos de manera asíncrona para evitar bloqueos en la carga.

3. Utiliza el Lazy Loading: El Lazy Loading consiste en cargar contenido a medida que se va mostrando en la pantalla del usuario, en lugar de cargar todo el contenido al inicio. Esto puede ayudar a mejorar significativamente el LCP, ya que solo se cargará el contenido visible inicialmente.

4. Minimiza el renderizado crítico: Asegúrate de que el contenido crítico se muestre lo más rápido posible en la pantalla del usuario. Puedes utilizar técnicas como la carga diferida de recursos o el pre-renderizado para lograr esto.

Recuerda siempre realizar pruebas y mediciones para evaluar el impacto de los cambios que realices en el rendimiento de tu sitio web.

samuelsuteras dijo:

Buenas Betas,

En mi web version movil tengo un problemita con un contenedor que se mueve un poco, el problema se arregla moviendo el contenedor unos 6em (css) pero me queda un espacio en blanco super feo, hay alguna manera de arreglar esto sin tener que cargarme la interfaz?

Hacer clic para expandir...

¿No puedes desplazar el contenedor un bloque abajo y ponerle un ancho del 100%?

No tiene porque verse igual que en el PC.

Eso que dices no tiene mucho sentido. Si el contenedor se mueve será por los elementos que tienes dentro de él.

Puede ser imágenes, que deben tener atributos width y height si o si para que no se mueva, y si usas algún plugin de lazyload que cambie la imagen src="" por un gif transparente o similar, debe tener las mismas medidas que las imágenes que luego aparecerán.

También puede ser tu publicidad, si usas adsense o similar, debes al menos ponerle un min-height al contenedor de cada ads para que se mueva lo menos posible.

Otro de los causantes de que tu sitio web se mueva, son las fuentes personalizadas, ya que, hasta que no cargue el archivo de la fuente, tiene otra fuente y al cambiar de repente sobre todo la 1º vez que no está en cache, pues se mueve la página...

Sin ver el sitio no se puede saber, porque pueden ser mil cosas, pero eso de que tengas que poner un margen al contenedor para que no se mueva, no tiene sentido.

Será por otra cosa 100% seguro.