PageSpeed de Google

Evite las redirecciones a las páginas de destino. Esto significa que no debes redirigir a los usuarios a otra página de tu sitio web cuando lo carguen. Por ejemplo, no debería redirigir a todos los visitantes a una segunda versión de su página de inicio.

Elimina el código JavaScript y CSS que bloquean la representación en el contenido que aparece por encima del pliegue. Esta es, con diferencia, la comprobación más importante que realiza Google. Esto examina el código de su sitio web y garantiza que esté priorizando el contenido sobre otros códigos. A menudo, los desarrolladores de sitios web colocan scripts pesados y archivos CSS en la parte superior de un archivo HTML. Esto hace que el navegador procese/cargue estos recursos primero, en lugar de cargar primero el contenido. Esta comprobación garantiza que priorices el contenido que se encuentra por encima del pliegue. (Nota: Above-the-fold significa el primer contenido que ve un usuario cuando carga un sitio web. (Este suele ser el encabezado, la navegación y el contenido superior del cuerpo de la página).

Habilitar la compresión. Esto verifica que su servidor sitio web comprima (haga más pequeño) los datos sin procesar (HTML, CSS y Javascript) antes de transmitirlos a través de Internet a su navegador. Esto se traduce en un gran ahorro en el tamaño total de su sitio web.

Aproveche el almacenamiento en caché del navegador. La comprobación de almacenamiento en caché garantiza que le indique al navegador que almacene este contenido localmente, en lugar de volver a descargarlo la próxima vez que necesite acceder a él. Esto ahorra un tiempo valioso que a menudo se pierde conectando y descargando contenido al recargar las páginas.

Minimizar CSS. Minificar CSS significa hacer que el archivo CSS sea lo más pequeño posible eliminando espacios adicionales, saltos de línea y otros formatos. Piense en esto como algo similar a comprimir el archivo para ahorrar tamaño total.

Minimizar JavaScript. De manera similar a minimizar CSS, minimizar JS puede ahorrar mucho tamaño en el archivo individual que descarga el navegador.

Minimizar HTML. Similar a los dos anteriores, pero elimina el espacio adicional del HTML principal del sitio web.

Optimizar imágenes. La segunda comprobación más importante que realiza Google es que las imágenes que envías al navegador estén optimizadas, comprimidas y no sean demasiado grandes. Las imágenes representan aproximadamente entre el 65 y el 70% del tamaño/peso total de un sitio web. Optimizar imágenes significa comprimirlas y hacer que el tamaño de archivo sea el más pequeño posible antes de que el navegador tenga que descargarlas. Hay dos cosas importantes que hacer aquí: (1) Cerciorar de que las imágenes estén comprimidas. Esto requiere pasarlas por tool de compresión para hacerlas más pequeñas, sin reducir la calidad de las imágenes. (2) Cambiar el tamaño de las imágenes. No es necesario enviar una imagen muy grande (5000 pixeles, por ejemplo) a un navegador móvil, por lo que deberá cambiar el tamaño de la imagen.

Priorizar el contenido visible. Esto garantiza que coloques el contenido en la parte superior del HTML del sitio web. Intente no cargar contenido adicional que no sea relevante para la primera carga del sitio web.

Reducir el tiempo de respuesta del servidor. Esta comprobación examina su servidor para cerciorar de que responde muy rápidamente a los visitantes que llegan a su sitio web. Google requiere que el usuario no espere más de 200 ms (1/5 de segundo) para obtener el contenido/HTML de su servidor.

Primera pintura con contenido. Esta es una métrica que proviene de un navegador real que carga un sitio web. Cuando ejecuta una prueba Lighthouse, un navegador real visitará su sitio web, lo cargará y monitorear el rendimiento. La primera métrica Contentful Paint informa cuánto tiempo tarda en mostrar cualquier tipo de contenido después de que una página comienza a cargar. Esto puede ser una imagen, un color de fondo, etc., y el tiempo hasta el primer pintado con contenido se mide en segundos. La razón por la que esta es una métrica valiosa es que es la primera vez que un usuario sabe que algo en el sitio web se cargará: es la primera indicación de que un sitio web se está cargando.

Índice de velocidad. Se trata de una métrica que proviene de un antiguo tool de rendimiento sitio web denominado WebPageTest. Existe desde 2012 y es bastante eficaz para determinar la rapidez con la que un sitio web carga su contenido. Funciona tomando capturas de pantalla de un sitio web cada 0,5 segundos mientras se carga. Empleando estas capturas de pantalla, calcula el porcentaje de contenido cargado en el sitio web en incrementos de 0,5 segundos y emite un puntaje de velocidad general. Cuanto menor sea el número, más rápido parecerá que el sitio web se carga para el usuario. El objetivo de esta prueba es comprender realmente qué tan rápido el usuario ve el contenido y si hay algo que impide que el sitio web muestre el contenido lo más rápido posible.

Es hora de ser interactivo. Otra métrica importante es la rapidez con la que el usuario puede interactuar con la página. Por ejemplo, es posible que el usuario quiera hacer clic en un botón o desplazar por la página. Esto es especialmente importante en dispositivos móviles, donde el usuario tocará directamente la pantalla para interactuar con la página. El objetivo de los desarrolladores web siempre debe ser garantizar que una página sea interactiva siempre que contuvo en ella. Este es un desafío muy difícil debido a la forma en que funcionan los navegadores.

Primera CPU inactiva. Esta métrica se relaciona estrechamente con el tiempo de interacción, ya que es un indicador de qué tan rápido se cargan todos los recursos/contenidos iniciales dentro del sitio web y la CPU del dispositivo entra en un estado inactivo (sin hacer nada). El motivo por el que se informa esto es que los desarrolladores deberían centrar en cargar primero la mínima cantidad de contenido. Al enviar una pequeña cantidad, la CPU del dispositivo procesará todo el código y llegará a un estado inactivo más rápido.

Latencia de entrada estimada. La métrica final que informa Lighthouse no tiene nada que ver con el rendimiento de la primera carga de su sitio web. En lugar de ello, intenta proporcionarle un número (en milisegundos) en el que su sitio web responde a los toques o clics. La idea es que cuanto más rápido responda su sitio web, más usuarios lo considerarán rápido y será menos probable que abandonen el sitio.

Evite las redirecciones a las páginas de destino. Para la mayoría de los sitios web de IONOS, pasamos esta prueba al 100%. Esto no está completamente bajo el control de IONOS, ya que permitimos a los usuarios redirigir a otras páginas a través de nuestra redirección de URL. La recomendación aquí es cerciorar de no enviar enlaces a sus clientes, socios, etc., que no sean una página real de su sitio web.

Elimina el código JavaScript y CSS que bloquean la representación en el contenido que aparece por encima del pliegue. En el marco de la publicación de sitios web, IONOS optimiza la estructura de los mismos para cumplir con esta recomendación. Hacemos esto: (1) Calculando lo que llamamos CSS "crítico". Esto significa que miramos el sitio web y vemos qué estilos CSS se requieren para mostrar el sitio web. Luego colocamos este contenido en línea dentro del sitio web para que se cargue primero. (2) Luego movemos todos los scripts a la parte inferior del sitio web, para que el contenido se cargue primero.

Habilitar la compresión. IONOS permite la compresión gzip para las conexiones a nuestro sitio web. Esto garantiza que el archivo se comprima, se transfiera a través de Internet y luego el navegador lo descomprima.

Aproveche el almacenamiento en caché del navegador. IONOS establece encabezados de caché en todos los archivos que cargamos. Esto garantiza que los navegadores que descargan estos archivos (CSS, JS, imágenes) sepan cómo store temporalmente el archivo en la caché del navegador, de modo que la próxima vez que el navegador necesite acceder a ese archivo, se stores en la máquina localmente, en lugar de tener que volver a descargarlo desde el sitio web.

Minificar CSS, JS y HTML. Como parte del proceso de publicación de IONOS, minimizamos la gran mayoría de los recursos CSS. Esto garantiza que sean lo más pequeños posible una vez descargados. Es importante tener en cuenta que los activos externos, aunque normalmente se procesan a través de nuestra CDN, pueden no sufrir minimización.

Optimizar imágenes. Cada imagen jpg o png que usted carga a IONOS, la sometemos a un exhaustivo proceso de compresión y cambio de tamaño de imagen para realizar el mejor manejo de imagen posible. Realizamos los siguientes procesos:

Priorizar el contenido visible. Como parte del proceso que IONOS desarrolla cada sitio web, estructuramos el sitio para que se ajuste a esta recomendación de forma predeterminada. Esto significa colocar primero el contenido del encabezado, seguido del contenido del cuerpo de la página.

Reducir el tiempo de respuesta del servidor. Esta comprobación consiste principalmente en cerciorar de que su sitio web no sea demasiado lento, en lugar de ser lo suficientemente rápido. Dado que IONOS aloja todos los sitios web en nuestra plataforma, podemos cerciorarnos de que todos los sitios web que alojamos respondan rápidamente. Empleamos Amazon Sitio web Services, líder en la industria, que nos ayuda a mantener estos estándares.

Eliminar del contenido ubicado por encima del pliegue cualquier JavaScript y CSS que bloquee el renderizado:

Optimizar imágenes: actualmente, la optimización de imágenes de IONOS solo funciona en imágenes JPG y PNG. Si está cargando un archivo TIFF, GIF u otro formato de imagen, es posible que IONOS no pueda optimizarlo y este podría ser el motivo de esta advertencia. Recomendamos ejecutar la imagen a través de un servicio de optimización de imágenes, como EzGif, Compressor.io o TinyPNG. Otra verificación que realiza Google es cerciorar de que no tenga imágenes grandes que se redimensionen para espacios pequeños. IONOS intenta ayudar con esto colocando imágenes de menor tamaño en columnas de menor tamaño, pero este proceso no es perfecto. A veces es posible que necesites descargar una imagen, redimensionarla exactamente al tamaño de columna que deseas usar y volver a cargar esa imagen. Este es un caso bastante raro.

Cambia el tamaño de las imágenes: mientras que IONOS optimiza las imágenes para cerciorar de que se comprimen en un tamaño más pequeño, IONOS no cambia el tamaño de tu imagen en la versión desktop de tu sitio. Por ejemplo, si emplea una imagen de 3000 x 3000 pixeles en una página y la redimensiona usando la función de arrastrar para redimensionar del editor a solo 300 px, todavía significa que está cargando la imagen completa de 3000 x 3000 px. Esto puede afectar negativamente tu puntaje de PageSpeed. Puedes solucionarlo redimensionando la imagen usando el editor de imágenes incorporado o redimensionándola en un software de edición de fotografías y volviéndola a cargar.

Aproveche el almacenamiento en caché del navegador: si incluye algún código personalizado en su sitio web, a menudo se cargará desde un sitio web de terceros. Si este sitio web no habilita el almacenamiento en caché, Google lo detectará y recomendará habilitar el almacenamiento en caché del navegador. Debes comunicarte con ese servicio de terceros para que implementen este cambio en su servidor.

Es posible que su página sea demasiado grande: si tiene mucho contenido en una página, puede hacer que la página sea grande incluso luego de ejecutar el tool de optimización en su sitio. Considere usar menos imágenes o dividir su contenido moviendo el contenido a otras páginas.

Problemas actuales que no se pueden solucionar: tenga en cuenta que se trata de problemas de velocidad de página informados por Google que usted no puede solucionar y que deben procesar como solicitudes de funciones para IONOS: