PageSpeed de Google

IONOS optimizó los sitios web publicados en la plataforma para que logren una puntuación más alta en la prueba Google PageSpeed. Esta prueba evalúa muchos detalles técnicos sobre cómo se construyen las páginas web y comprueba que estas se ajusten a las mejores prácticas que permiten que los sitios web se carguen rápidamente. La comprobación más importante en la prueba PageSpeed examina la forma en que está estructurado el código del sitio web. Google comprueba para asegurarse de que el código esté estructurado de una manera que permita que el navegador cargue más rápido el contenido.

Por qué IONOS realizó esta optimización

En IONOS, creemos que la velocidad de los sitios web es uno de los mayores problemas que enfrenta la web en la actualidad. Los sitios web que se cargan lentamente tienen mayores tasas de rebote, niveles más bajos de aceptación y contribuyen a que toda la web tenga una mala reputación por ser lenta. Sabemos que los sitios web que responden más rápido brindan un gran valor a los visitantes del sitio al ofrecer a cada persona una mejor experiencia de navegación.

¿Por qué Google creó esta herramienta?

Google creó la herramienta PageSpeed porque sentía que muchos sitios web se cargan demasiado lento y no entregan contenido a los usuarios lo suficientemente rápido. Google sabe que es más probable que los usuarios se interesen en sitios web que entregan contenido visible más rápido, lo que permite a Google y al sitio web ofrecer una mejor experiencia general. Por lo general, esto significa tener un sitio web que se cargue en menos de tres segundos. Puesto que el producto principal de Google (la búsqueda) depende de los sitios web de otras personas, la empresa quiere asegurarse de que los webmasters/diseñadores/desarrolladores creen sitios web que se carguen rápido.

Lo que Google comprueba

Google tiene una lista de optimizaciones que comprueba tanto en las versiones de los sitios web para equipos de escritorio como para móviles. Luego, se basa en el grado de optimización del sitio con respecto a cada una de estas comprobaciones para otorgar una puntuación total (hasta un máximo de 100) para la velocidad del sitio web. Esto es lo que Google comprueba:

• Evitar redireccionamientos a páginas de destino. Esto significa que no debe redirigir a los usuarios a otra página de su sitio web cuando la cargan. Por ejemplo, no debe redireccionar a todos los visitantes a una segunda versión de su página principal.
• Eliminar del contenido ubicado por encima del pliegue cualquier JavaScript y CSS que bloquee el renderizado. Esta es, por mucho, la comprobación más importante que realiza Google. Se examina el código del sitio web para asegurar que se esté priorizando el contenido sobre cualquier otro código. Con frecuencia, 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 asegura que se priorice el contenido ubicado por encima del pliegue. (Nota: Por encima del pliegue se refiere al primer contenido que un usuario ve al cargar una página web. Suele ser el encabezado, el menú de navegación y el contenido más alto del cuerpo de la página).
• Habilitar compresión. Esto comprueba que el servidor web comprime (reduce el tamaño) los datos sin procesar (HTML, CSS y Javascript) antes de transmitirlos a través de Internet a su navegador. Esto produce un gran ahorro en el tamaño total del sitio web.
• Aprovechar el almacenamiento en caché del navegador. La comprobación del almacenamiento en caché asegura que el navegador esté configurado para guardar este contenido de manera local, en lugar de volver a descargarlo la próxima vez que sea necesario acceder a él. Esto permite ahorrar un tiempo valioso que suele emplearse conectando y descargando contenido cada vez que se vuelve a cargar una página.
• Minimizar CSS. Minimizar CSS significa que el archivo CSS se reduce a su menor tamaño posible al eliminar espacios adicionales, saltos de línea y otros formatos. Esto es similar a comprimir el archivo para reducir el tamaño total.
• Minimizar JavaScript. Al igual que minimizar CSS, minimizar JS puede generar un gran ahorro en el tamaño del archivo individual que es descargado por el navegador.
• Minimizar HTML. Similar a los dos anteriores, pero elimina el espaciado adicional del HTML principal del sitio web.
• Optimizar las imágenes. Es la segunda comprobación más importante que realiza Google y asegura que las imágenes que se envían al navegador estén optimizadas, comprimidas y que no sean demasiado grandes. Las imágenes representan aproximadamente el 65-70% del tamaño/peso total de un sitio web. La optimización de las imágenes significa que las imágenes son comprimidas hasta alcanzar el menor tamaño de archivo posible antes de hacer que el navegador las descargue. Aquí se deben completar dos pasos importantes: (1) Asegurar que las imágenes estén comprimidas. Se requiere el uso de herramientas de compresión para reducir el tamaño de las imágenes, sin reducir su calidad. (2) Modificar el tamaño de las imágenes. No es necesario proporcionar una imagen muy grande (por ejemplo, de 5.000 píxeles) a un navegador móvil, por lo que se debe modificar el tamaño de la imagen.
• Priorizar el contenido visible. Esto garantiza que el contenido esté colocado en la parte superior del HTML del sitio web. Trate de 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 el servidor para asegurarse de que esté respondiendo muy rápido a los visitantes que llegan al sitio web. Google requiere que el usuario no espere más de 200 ms (1/5 de un segundo) para recibir contenido/HTML desde el servidor.

Con la introducción del proyecto Lighthouse de código abierto en noviembre de 2018, la velocidad de la página de Google ahora examina una gran variedad de propiedades de los sitios web además de la velocidad (como la SEO, la accesibilidad, PWA y las Mejores prácticas). Además de las pruebas anteriores, Lighthouse ahora comprueba lo siguiente:

• First Contentful Paint. Esta es una métrica que proviene de un navegador real que carga un sitio web. Cuando ejecute una prueba de Lighthouse, un navegador real irá a visitar su sitio web, lo cargará y supervisará el rendimiento. La métrica First Contentful Paint informa sobre el tiempo que tarda cualquier tipo de contenido en mostrarse después de que una página ha comenzado a cargarse. Esto puede ser una imagen, un color de fondo, etc. El tiempo de First Contentful Paint se mide en segundos. El motivo por el que esta es una métrica valiosa es que es la primera vez que un usuario sabe que algo se cargará en el sitio web; es la primera indicación de que un sitio web se está cargando.
• Speed Index. Esta es una métrica que proviene de una antigua herramienta de rendimiento web denominada WebPageTest. Ha existido 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. Con estas capturas de pantalla, calcula el porcentaje de contenido cargado en la página web a intervalos de 0,5 segundos y emite una puntuación de velocidad general. Cuanto más bajo sea el número, más rápido parecerá que se carga el sitio web para el usuario. El objetivo de esta prueba es comprender realmente la rapidez con la que el usuario ve el contenido y si hay algo que impide que el sitio web muestre el contenido lo más rápido posible.
• Time to Interactive. Otra métrica importante es la rapidez con la que el usuario puede interactuar con la página. Por ejemplo, el usuario puede querer hacer clic en un botón o desplazarse por la página. Esto es importante en particular para los dispositivos móviles, donde el usuario tocará directamente una pantalla para interactuar con la página. El objetivo de los desarrolladores web siempre debe ser garantizar que una página sea interactiva cada vez que haya contenido en ella. Este es un desafío muy difícil de superar debido a la forma en la que funcionan los navegadores.
• First CPU Idle. Esta métrica se relaciona con Time to Interactive, ya que es un indicador de la rapidez con la que se cargan todos los contenidos/recursos iniciales dentro del sitio web y la CPU del dispositivo entra en un estado de inactividad (no hace nada). El motivo por el que se informa esto es que los desarrolladores deben centrarse en cargar primero la cantidad mínima de contenido. Cuando se envía una pequeña cantidad, la CPU del dispositivo procesará todo el código y pasará a un estado de inactividad más rápido.
• Estimated Input Latency. La última métrica sobre la que informa Lighthouse no tiene nada que ver con el rendimiento de la primera carga de su sitio web. En cambio, intenta darle el número (en milisegundos) con el que su sitio web responde a 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 es menos probable que abandonen el sitio.

Después de hacer estas pruebas, Lighthouse también le dará recomendaciones por orden de prioridad sobre cómo puede mejorar la puntuación general de velocidad. Esto aparece en la segunda mitad de la página y brinda detalles muy técnicos sobre lo que puede hacer y los beneficios que pueden proporcionar estos cambios.

Lo que hace IONOS

IONOS ha optimizado los sitios web creados en nuestra plataforma para que obtengan una alta puntuación, específicamente en la prueba PageSpeed de Google. Eso significa que hemos examinado las pruebas mencionadas anteriormente y optimizado nuestros sitios web para cada una de ellas. El siguiente es un resumen de cómo manejamos cada una de estas comprobaciones:

• Evitar redireccionamientos a páginas de destino. Para la mayoría de los sitios web de IONOS, pasamos esta verificación en un 100%. Esto no está totalmente bajo el control de IONOS, ya que permitimos que los usuarios redireccionen a otras páginas a través de nuestro redireccionamiento de URL. En este caso, lo que se recomienda es asegurarse de no enviar enlaces a sus clientes, socios, etc., que no sean una página real de su sitio web.
• Eliminar del contenido ubicado por encima del pliegue cualquier JavaScript y CSS que bloquee el renderizado. Como parte de la publicación de los sitios web, IONOS optimiza la estructura de los sitios web para ajustarlos a esta recomendación Para ello: (1) Calculamos lo que llamamos CSS "crítico". Eso significa que examinamos el sitio web y vemos qué estilos CSS se requieren para mostrar el sitio. Luego colocamos ese contenido en línea dentro del sitio web para que se cargue primero. (2) Posteriormente, movemos todos los scripts a la parte inferior del sitio web, para que el contenido se cargue primero.
• Habilitar compresión. IONOS habilita la compresión gzip para las conexiones a nuestro sitio web. Esto garantiza que el archivo sea comprimido, transferido a través de Internet y luego descomprimido por el navegador.
• Aprovechar el almacenamiento en caché del navegador. IONOS establece encabezados de caché en todos los archivos que cargamos. Esto garantiza que los navegadores que descarguen esos archivos (CSS, JS, imágenes) sepan cómo almacenar temporalmente el archivo en la memoria caché del navegador de modo que la próxima vez que el navegador necesite acceder a ese archivo, este se encuentre almacenado localmente en la máquina en lugar de tener que volver a descargarlo desde el sitio web.
• Minimizar CSS, JS y HTML. Como parte de nuestro proceso de publicación en IONOS, minimizamos todos los recursos CSS. Esto garantiza que tengan el menor tamaño posible cuando sean descargados.
• Optimizar las imágenes. Ejecutamos un extenso proceso de cambio de tamaño y compresión de imagen para cada imagen jpg o png que carga a IONOS con el objetivo de manejar la imagen de la mejor manera posible. Ejecutamos los siguientes procesos:
  • Primero, sometemos la imagen a un algoritmo de compresión sin pérdida y la guardamos en nuestro CDN. Esto reduce el tamaño base de la imagen.
  • A continuación, cambiamos el tamaño de la imagen a cinco versiones diferentes.
  • Después de cambiar el tamaño, sometemos todas las imágenes a un algoritmo de compresión con pérdida. Esto reduce ligeramente la calidad de la imagen, pero proporciona grandes ahorros en cuanto al tamaño de las imágenes. En la gran mayoría de los casos, la pérdida de calidad no es visible para el ojo humano.
  • Después de la compresión con pérdida, volvemos a someter la imagen a una compresión sin pérdida para asegurarnos de que tenga el menor tamaño posible.

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

• Reducir el tiempo de respuesta del servidor. Esta comprobación es, sobre todo, para garantizar que el sitio web no sea demasiado lento, en vez de lo suficientemente rápido. Puesto que IONOS aloja todos los sitios web en nuestra plataforma, podemos asegurarnos de que todos los sitios que alojamos respondan rápidamente. Como ayuda para mantener estos estándares, utilizamos los Servicios web de Amazon, líderes en la industria.

Qué hacer si su sitio no pasa la prueba

Aunque sea la intención de IONOS que todos los sitios web que operamos siempre logren una puntuación alta, no es algo que podamos prometer. Esto se debe a que nuestros clientes pueden agregar su propio código, contenido y diseños al sitio web, por lo que no tenemos un control total sobre lo que pueden o no pueden agregar. Por esta razón, hay algunos escenarios en los que los sitios web de IONOS no logran una puntuación muy cercana a 100. La siguiente es una lista de errores/problemas que la prueba Google PageSpeed nos notifica, en función de cómo se creó el sitio web:

• Eliminar del contenido ubicado por encima del pliegue cualquier JavaScript y CSS que bloquee el renderizado:
  • Elemento de mapa por encima del pliegue. Si coloca un elemento de mapa en la parte superior de su sitio web, lo más probable es que obtenga un resultado negativo en su clasificación PageSpeed. Para corregir esto, mueva el elemento de mapa a la parte inferior de la página.
  • Vitrina de la tienda por encima del pliegue. Si coloca una Store en la parte superior, esta advertencia puede aparecer frecuentemente. IONOS está trabajando para solucionar esta situación, pero por ahora, la única recomendación que tenemos es mover el contenido a un lugar inferior de la página. Una posible manera de hacerlo es agregando una imagen y texto útil por encima del elemento de Store, de modo que la Store en sí no quede en el área "por encima del pliegue" del sitio web.
  • Código/script personalizado en el encabezado. Si colocó código personalizado en la sección del encabezado del sitio web, a menudo aparecerá una advertencia de error de Google de que eso está ralentizando el renderizado de la página. Hay dos opciones para corregir esto: (1) Coloque el código en el archivo body-end.html del sitio web en lugar de colocarlo en el encabezado. De esta manera, el código se desplaza a la parte inferior, lo que lo obliga a cargarse después y no al principio. (2) Asegúrese de que el script incrustado aquí se cargue de forma asíncrona. Esto significa que el navegador lo carga en segundo plano mientras continúa cargando el resto del contenido del sitio web. Para habilitar la asincronización en los scripts, debe modificarlo de esta manera:
    • Código antiguo: <script src=”https://ejemplo.com/script.js”></script>
    • Nueva asincronización: <script src=”https://example.com/script.js” async defer></script>
  • Note que el código anterior le dice al navegador que cargue este código de forma asíncrona, lo que debería ayudar a pasar esta prueba PageSpeed de Google.
  • Incrustación de iframe. Si incrusta un iframe personalizado en un sitio web por encima del pliegue, lo más probable es que aparezca este mensaje de error. Mueva este contenido más abajo en la página o elimínelo por completo.
• Optimizar las imágenes: Actualmente, la optimización de imágenes de IONOS funciona solo con imágenes JPG y PNG. Si carga una imagen TIFF, GIF o cualquier otro formato de imagen, es probable que IONOS no pueda optimizarla y esa podría ser la razón de esta advertencia. Recomendamos ejecutar la imagen a través de un servicio de optimización de imagen, como EzGif, Compressor.io o TinyPNG. Otra comprobación que realiza Google es asegurarse de que no posea imágenes de gran tamaño que cambian de tamaño para adecuarse a espacios de menor tamaño. IONOS trata de ayudar con esto, al colocar las imágenes más pequeñas en columnas de menor tamaño, pero este proceso no es perfecto. A veces podría ser necesario descargar una imagen, modificar su tamaño exactamente para el tamaño de columna que desee utilizar y volver a cargar esa imagen. Este caso es bastante raro.
• Cambiar tamaño de imágenes: Aunque IONOS optimiza las imágenes para asegurarse de que estén comprimidas en un tamaño más pequeño, IONOS en realidad no cambia el tamaño de su imagen por usted en la versión de escritorio de su sitio. Por ejemplo, si utiliza una imagen de 3000 x 3000 píxeles en una página y le cambia el tamaño a solo 300 px usando la función de "arrastrar para cambiar tamaño" del editor, eso no impedirá que se siga cargando toda la imagen de 3000 x 3000 px. Esto puede afectar negativamente la puntuación de "pagespeed". Para resolver el problema, cambie el tamaño de la imagen usando el editor de imágenes incorporado o cámbielo en el software de edición de fotografías y vuelva a cargar la imagen.
• Aprovechar el almacenamiento en caché del navegador: Si incluye código personalizado en su sitio web, con frecuencia se cargará desde un sitio web de terceros. Si ese sitio web no tiene habilitado el almacenamiento en caché, Google detectará eso y recomendará habilitar el almacenamiento en caché del navegador. Debe ponerse en contacto con ese servicio de terceros para que realicen ese cambio en su servidor.
• Su página podría ser demasiado grande: Si tiene mucho contenido en una página, pudiera ser que la página sea grande incluso después de que usemos la herramienta de optimización en su sitio. Considere usar menos imágenes o dividir su contenido moviendo partes del mismo a otras páginas.
• Problemas sin solución actualmente: Cabe destacar que se trata de problemas de "pagespeed" informados por Google que no pueden ser resueltos por usted y deben ser procesados como solicitudes de funciones para IONOS:
  • Aprovechar el caché del navegador
  • Minimizar HTML / CSS / JS
  • Optimizar entrega de CSS

Casos en los que IONOS no optimiza el sitio

Hay algunos casos en los que IONOS no trata de optimizar el sitio web al momento de publicarlo. Si se colocó código personalizado que utiliza jQuery (($(‘#ex’)) o la JS API: dmAPI.runOnReady(‘code’,function(){}); en el encabezado del sitio web. La razón por la que no lo optimizamos es porque este tipo de código a menudo requiere de jQuery o las funciones dmAPI para existir, pero debido a que nuestra optimización mueve este código más abajo en la página, el mismo dejará de funcionar y, por lo tanto, se interrumpirá el código que se instaló.