Mejores prácticas para optimizar el tiempo de carga de una página

¡Vea algunos consejos que mejorarán la velocidad de carga de su página!

Si tu página tiene una carga lenta o el resultado de PageSpeed Insights no es el que deseas, ten en cuenta que hay algunos puntos que se pueden mejorar.

Para comenzar, puedes analizar y eliminar los siguientes elementos de tu página:

Imágenes más grandes que el contenedor en el cual están insertadas;
Imágenes de fondo muy pesadas (más de 1200 px de ancho);
Imágenes JPG transparentes;
Gif animados;
Contenedores vacíos;
Javascripts grandes;
Muchos estilos adicionales insertados en la etiqueta <head>;
Enlaces a archivos CSS externos;
Una gran cantidad de componentes interactivos;

Eliminar o reducir la cantidad de estos elementos en la primera sección de tu página, puede ser muy útil para reducir el tiempo de carga. Esto sucede ya que es precisamente esta área de una publicación la que se carga primero mientras un visitante accede a tu página.

Imágenes

Tus páginas responsivas cambiarán automáticamente la forma en que se ve el contenido en diferentes tipos de pantalla, pero no necesariamente optimizarán el tamaño del archivo para dispositivos móviles.

Por este motivo, asegúrate de que las imágenes sean lo menos pesadas posibles. Así mantendrás el contenido interactivo en un formato adecuado para garantizar una buena velocidad de página en dispositivos móviles.

Recomendamos utilizar archivos PNG en lugar de JPG siempre que sea posible, ya que los PNG son generalmente de menor tamaño.

Si necesitas comprimir una imagen, puedes utilizar la herramienta de reducción de imágenes de Ion.

Además, si estás utilizando una imagen más grande que el contenedor en la cual está insertada, carga una versión más pequeña (ancho) para que no sea necesario cambiar o reducir la calidad de la imagen.

Imágenes transparentes

Las imágenes JPG transparentes insertadas en la plataforma, se transformarán automáticamente en imágenes PNG.

Esto sucede ya que el formato JPG no permite que la imagen tenga un fondo transparente y para ayudar a mantener la calidad, se genera un nuevo archivo, pero ahora en formato PNG. El problema es que esta transformación dentro de la plataforma aumentará el tamaño del archivo, haciéndolo más pesado y afectando el tiempo de carga de la página.

Por lo tanto, siempre, prioriza la carga de imágenes que ya estén en formato PNG.

Contenido interactivo

Estos componentes son una excelente manera de agregar interactividad a tus páginas. Sin embargo, cada componente agregado afectará la velocidad de tu sitio.

Si el tiempo de carga de tu página está alto, debes utilizar estos componentes interactivos de manera más estratégica, reduciendo la cantidad de elementos innecesarios en tu publicación.

Guiones

Los códigos Javascript que están en el <head> tendrán un efecto directo en la carga de la página, ya que se dispara antes que el resto de tu contenido. En otras palabras, son los primeros que serán procesados cuando un nuevo visitante ingresa a tu página.

Si no puedes eliminar el javascript del Head, comunícate con el proveedor de este script para ver si hay una versión asincrónica del script o si se puede mover el mismo código al </ body>. La etiqueta en esta ubicación no afectará tanto la velocidad de carga de la página.

Móvil

Una buena práctica es pensar siempre en cómo funcionará cada elemento en los dispositivos móviles. Si hay varios contenidos en la página que no se pueden ocultar en la versión móvil, lo ideal es crear una página optimizada para móviles y redirigir a los visitantes móviles a esa versión de tu publicación.

Consejos adicionales:

Para ver en profundidad qué elementos están afectando el tiempo de carga de una página, puedes eliminar momentáneamente todos los scripts de la página para hacer una prueba.

Así será posible tener una base con relación al tiempo que tarda la página en cargarse, ignorando los elementos del script.

Si tu página aún tiene un tiempo de carga mayor que al esperado, consulta los elementos que están en la primera sección de tu publicación. Algunos de ellos probablemente presentarán alguna de las características mencionadas al principio de este artículo.

* Importante: Existen algunos scripts y otros elementos que Google recomienda eliminar, sin embargo, estos son fundamentales para el correcto funcionamiento de Ion.

Al optimizar tus experiencias, te recomendamos que te centres en las imágenes, el contenido interactivo y los scripts de seguimiento proporcionados por plataformas externas.

Si tiene alguna pregunta, póngase en contacto con nosotros en help@rockcontent.com. 😀