Velocidad de página de Google

Guesty ha optimizado los sitios web publicados en la plataforma para obtener una alta puntuación en la prueba PageSpeed de Google. Esta prueba examina numerosos detalles técnicos de la creación de páginas web y verifica que cumplan con las mejores prácticas para una carga rápida. La comprobación más importante de la prueba PageSpeed examina la estructura del código de los sitios web. Google verifica que el código esté estructurado de forma que el navegador cargue el contenido más rápido.

¿Por qué Guesty se optimizó para esto?

En Guesty, creemos que la velocidad de carga de los sitios web es uno de los mayores problemas de la web actual. Los sitios web con carga lenta tienen tasas de rebote más altas, menor interacción y dan a toda la web una mala reputación de lentitud. Sabemos que los sitios web con respuesta más rápida aportan mucho valor a los visitantes, ofreciendo a cada usuario una mejor experiencia de navegación.

¿Por qué Google creó esta herramienta?

Google creó la herramienta PageSpeed porque consideraba que muchos sitios web cargaban demasiado lento y no ofrecían el contenido a los usuarios con la suficiente rapidez. Google sabe que los usuarios tienden a interactuar con sitios web que ofrecen contenido visible más rápido, lo que permite que tanto Google como el sitio web brinden una mejor experiencia general. Normalmente, esto significa que un sitio web carga en menos de tres segundos. Dado que el producto principal de Google (la búsqueda) se basa en sitios web de otros usuarios, quiere asegurarse de que los webmasters, diseñadores y desarrolladores creen sitios web que carguen rápidamente.

¿Qué comprueba Google?

Google tiene una lista de optimizaciones que revisa tanto en la versión de escritorio como en la versión móvil de su sitio web. Luego, utiliza la optimización de su sitio para cada una de estas comprobaciones para obtener una puntuación general (sobre 100) de la velocidad de su sitio web. Esto es lo que Google revisa:

• Evite las redirecciones en la página de destino. Esto significa que no debe redirigir a los usuarios a otra página de su sitio web al cargarlo. Por ejemplo, no debe redirigir a todos los visitantes a una segunda versión de su página de inicio.
• Elimine el JavaScript y CSS que bloquean la visualización en el contenido de la mitad superior de la página. Esta es, sin duda, la comprobación más importante que realiza Google. Analiza el código de tu sitio web y garantiza que priorices el contenido sobre otros elementos del código. A menudo, los desarrolladores web colocan scripts y archivos CSS pesados al principio de un archivo HTML. Esto hace que el navegador procese o cargue primero estos recursos, en lugar de cargar primero el contenido. Esta comprobación garantiza que priorices el contenido de la mitad superior de la página. (Nota: La mitad superior de la página se refiere al primer contenido que ve un usuario al cargar una página web. Suele ser el encabezado, la navegación y el contenido superior del cuerpo de la página).
• Habilitar la compresión. Esto garantiza que su servidor web comprima (reduzca el tamaño) los datos sin procesar (HTML, CSS y Javascript) antes de transmitirlos por internet a su navegador. Esto se traduce en un importante ahorro en el tamaño total de su sitio web.
• Aprovechar el almacenamiento en caché del navegador. La comprobación del almacenamiento en caché garantiza que el navegador guarde este contenido localmente, en lugar de volver a descargarlo la próxima vez que necesite acceder a él. Esto ahorra tiempo valioso que a menudo se pierde conectando y descargando contenido al recargar la página.
  Minificar CSS. Minificar CSS significa reducir al mínimo el tamaño del archivo CSS eliminando espacios, saltos de línea y otros formatos. Es similar a comprimir el archivo para reducir su tamaño.
• Minificar JavaScript. Al igual que minificar CSS, minificar JS puede ahorrar mucho espacio en los archivos individuales 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 garantiza que las imágenes que envías al navegador estén optimizadas, comprimidas y no sean demasiado grandes. Las imágenes cuentan aproximadamente el 65-70 % del tamaño/peso total de un sitio web. Optimizar imágenes significa comprimirlas y reducir su tamaño de archivo al mínimo antes de que el navegador las descargue. Hay dos pasos importantes que debes hacer: (1) Asegurarse de que las imágenes estén comprimidas. Esto implica pasarlas por herramientas de compresión para reducir su tamaño, sin reducir la calidad. (2) Ajustar el tamaño de las imágenes. No es necesario enviar una imagen muy grande (por ejemplo, 5000 píxeles) a un navegador móvil; por lo tanto, debes ajustar su tamaño.
• Prioriza el contenido visible. Esto garantiza que el contenido se ubique en la parte superior del HTML del sitio web. Intenta no cargar contenido adicional que no sea relevante para la primera carga del sitio web.
• Reduce el tiempo de respuesta del servidor. Esta comprobación examina tu servidor para garantizar que responda con rapidez a los visitantes de tu sitio web. Google exige que el usuario no espere más de 200 ms (1/5 de segundo) para recibir el contenido/HTML de tu servidor.

Con la introducción del proyecto Lighthouse de código abierto en noviembre de 2018, Google PageSpeed ahora analiza una amplia gama de aspectos del sitio web, además de la velocidad (como SEO, accesibilidad, PWA y buenas prácticas). Además de las pruebas mencionadas, Lighthouse ahora verifica:

• Primer pintura de contenido. Esta métrica se obtiene de un navegador real al cargar un sitio web. Al ejecutar una prueba Lighthouse, un navegador real visitará su sitio web, lo cargará y supervisará su rendimiento. La métrica primer pintura de contenido informa sobre el tiempo que tarda en mostrarse cualquier tipo de contenido después de que una página empieza a cargar. Puede ser una imagen, un color de fondo, etc., y el tiempo de primer pintura de contenido se mide en segundos. Su valor radica en que es la primera vez que un usuario sabe que algo en el sitio web se cargará; es el primer indicio de que un sitio web se está cargando.
• Índice de velocidad. Esta métrica proviene de una antigua herramienta de rendimiento web llamada WebPageTest. Existe desde 2012 y es bastante eficaz para determinar la velocidad de carga del contenido de un sitio web. Funciona tomando capturas de pantalla de un sitio web cada 0,5 segundos durante la carga. Con estas capturas, calcula el porcentaje de contenido cargado en la página web en incrementos de 0,5 segundos y emite una puntuación de velocidad general. Cuanto menor sea el número, más rápido parece cargar el sitio web para el usuario. El objetivo de esta prueba es comprender con precisión la velocidad con la que el usuario ve el contenido y si hay algún obstáculo que impida que el sitio web muestre el contenido lo más rápido posible.
• Tiempo de interacción. Otra métrica importante es la rapidez con la que el usuario puede interactuar con la página. Por ejemplo, el usuario quiere hacer clic en un botón o desplazarse 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, independientemente de su contenido. Esto supone un reto muy complejo debido al funcionamiento de los navegadores.
• Primer tiempo de inactividad de la CPU. Esta métrica está estrechamente relacionada con el tiempo de interacción, ya que indica la rapidez con la que se cargan todos los recursos/contenidos iniciales del sitio web y la CPU del dispositivo entra en estado de inactividad (sin realizar ninguna acción). Esto se informa porque los desarrolladores deben centrarse en cargar primero la cantidad mínima de contenido. Al enviar una pequeña cantidad, la CPU del dispositivo procesará todo el código y entrará en estado de inactividad más rápidamente.
• Latencia de entrada estimada. La última métrica que Lighthouse reporta no tiene nada que ver con el rendimiento de tu sitio web en la primera carga. En cambio, intenta darte un número (en milisegundos) en el que tu sitio web responde a los clics. La idea es que cuanto más rápido responda tu sitio web, más usuarios lo considerarán rápido y será menos probable que lo abandonen.

Tras realizar estas pruebas, Lighthouse también ofrecerá recomendaciones priorizadas sobre cómo mejorar la puntuación de velocidad general. Esto aparece en la segunda mitad de la página y ofrece detalles técnicos sobre lo que puede hacer y los beneficios que estos cambios pueden ofrecer.

¿Qué hace Guesty?

Guesty ha optimizado los sitios web creados en nuestra plataforma para obtener una alta puntuación, especialmente en la prueba Google PageSpeed. Esto significa que hemos analizado las pruebas de propiedad anunciadas anteriormente y optimizado nuestros sitios web para cada una de ellas. A continuación, se detalla cómo gestionamos cada una de estas comprobaciones:

• Evite las redirecciones en la página de destino. En la mayoría de los sitios web de Guesty, superamos esta comprobación al 100 %. Esto no está completamente bajo el control de Guesty, ya que permitimos que los usuarios redirijan a otras páginas mediante nuestra redirección de URL. Le recomendamos asegurarse de no enviar enlaces a sus clientes, socios, etc., que no sean una página real de su sitio web.
• Eliminar el JavaScript y CSS que bloquean la visualización en el contenido de la mitad superior de la página. Como parte de la publicación de sitios web, Guesty optimiza la estructura de los sitios web para que cumplan con esta recomendación. Esto se logra mediante: (1) el cálculo de lo que llamamos CSS "crítico". Esto significa que examinamos el sitio web y determinamos qué estilos CSS son necesarios para mostrarlo. A continuación, insertamos este contenido en línea dentro del sitio web para que cargue primero. (2) Después, movemos todos los scripts al final del sitio web para que el contenido se cargue primero.
• Habilitar compresión. Guesty habilita la compresión gzip para las conexiones a nuestro sitio web. Esto garantiza que el archivo se comprima, se transfiera por internet y luego el navegador lo descomprima.
• Aprovechar el almacenamiento en caché del navegador. Guesty 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 almacenarlos temporalmente en la caché del navegador, de modo que la próxima vez que el navegador necesite acceder a ellos, se almacenen localmente en el equipo, en lugar de tener que volver a descargarlos del sitio web.
• Minificar CSS, JS y HTML. Como parte del proceso de publicación de Guesty, minimizamos la gran mayoría de los recursos CSS. Esto garantiza que sean lo más pequeños posible al descargarlos. Es importante tener en cuenta que los recursos externos, aunque normalmente se envían a través de nuestra CDN, podrían no estar sujetos a la minificación.
• Optimizamos imágenes. Cada imagen JPG o PNG que subes a Guesty se somete a un exhaustivo proceso de compresión y redimensionamiento para optimizar su procesamiento. Realizamos los siguientes procesos:
  
  • Primero, procesamos la imagen con un algoritmo de compresión sin pérdida y la guardamos en nuestra CDN. Esto reduce el tamaño base de la imagen.
  • Luego redimensionamos la imagen en cinco versiones diferentes.
  • Tras redimensionar, aplicamos a todas las imágenes un algoritmo de compresión con pérdida. Esto reduce ligeramente la calidad de la imagen, pero permite un ahorro considerable de tamaño. En la gran mayoría de los casos, la pérdida de calidad es imperceptible para el ojo humano.
  • Después de la compresión con pérdida, ejecutamos la imagen a través de otra compresión sin pérdida para garantizar que tenga el tamaño más pequeño posible.
• Prioriza el contenido visible. Como parte del proceso de creación de cada sitio web en Guesty, lo estructuramos para que cumpla con esta recomendación de forma predeterminada. Esto significa colocar primero el contenido del encabezado y luego el contenido del cuerpo de la página.
• Reducir el tiempo de respuesta del servidor. Esta comprobación se centra principalmente en asegurar que su sitio web no sea demasiado lento, sino lo suficientemente rápido. Dado que Guesty aloja todos los sitios web en nuestra plataforma, podemos garantizar que todos los sitios web que anfitrionamos respondan rápidamente. Utilizamos Amazon Web Services, líder en la industria, lo que nos ayuda a mantener estos estándares.

¿Qué hacer si su sitio tiene un rendimiento deficiente?

Aunque Guesty desea que todos los sitios web que gestionamos siempre tengan una buena clasificación, no podemos garantizarlo. Esto se debe a que nuestros clientes pueden añadir su propio código, contenido y diseños al sitio web, por lo que no tenemos control total sobre lo que pueden o no añadir. Por esta razón, en algunos casos, los sitios web de Guesty no alcanzan una puntuación superior a 90. A continuación, se muestra una lista de errores o problemas que Google PageSpeed nos informa, según el diseño del sitio web:

• Eliminar JavaScript y CSS que bloquean la representación en el contenido que se encuentra por encima del pliegue:
  • Elemento de mapa en la parte superior de la página. Si colocas un elemento de mapa en la parte superior de tu sitio web, esto suele afectar negativamente a tu posicionamiento en PageSpeed. Para solucionarlo, mueve el elemento de mapa a la parte inferior de la página.
  • Tienda en la parte superior de la página. Si colocas una tienda en la parte superior, a menudo puede aparecer esta advertencia. Guesty está trabajando en una solución, pero por ahora, la única recomendación es mover el contenido hacia abajo en la página. Una forma de hacerlo es añadir una imagen y un texto útil sobre el elemento de la tienda, para que esta no aparezca en la parte superior de la página.
  • Código/script personalizado en el encabezado. Si colocaste código personalizado en la sección de encabezado del sitio web, Google suele mostrar un error indicando que esto ralentiza la visualización de la página. Hay dos opciones para solucionarlo: (1) Colocar el código en el archivo body-end.html del sitio web en lugar del encabezado. Esto mueve el código al final, forzando así su carga. (2) Asegúrate 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 carga asíncrona en los scripts, debes modificarlo de la siguiente manera:
    • Código antiguo:

       <script src="https://ejemplo.com/script.js"></script>
      
      

    • Nuevo asíncrono:

       <script src="https://example.com/script.js" async defer></script>
      
      

  • Aviso de que el código anterior le indica al navegador que cargue este código "async", lo que debería ayudar a pasar esta prueba de Google PageSpeed.
  • Incrustar iframe. Si insertas un iframe personalizado en la parte superior de la página de un sitio web, es probable que aparezca este mensaje de error. Mueve este contenido hacia abajo o elimínalo por completo.
• Optimizar imágenes: Actualmente, la optimización de imágenes de Guesty solo funciona con imágenes JPG y PNG. Si subes un formato TIFF, GIF u otros, es posible que Guesty no pueda optimizarlo, lo que podría ser el motivo de esta advertencia. Recomendamos usar un servicio de optimización de imágenes como EzGif, Compressor.io o TinyPNG. Otra comprobación que realiza Google es asegurarse de que no tengas imágenes grandes que se redimensionen para espacios pequeños. Guesty intenta solucionar esto colocando imágenes más pequeñas en columnas con menor tamaño, pero este proceso no es perfecto. A veces, es posible que tengas que descargar una imagen, redimensionarla exactamente para el tamaño de columna que quieres usar y volver a subirla. Esto es bastante inusual.
• Cambiar el tamaño de las imágenes: Aunque Guesty optimiza las imágenes para que se compriman a un tamaño menor, no las redimensiona automáticamente en la versión de escritorio de tu sitio. Por ejemplo, si usas una imagen de 3000 x 3000 píxeles en una página y la redimensionas a solo 300 px con la función de arrastrar y soltar del editor, seguirás cargando la imagen completa de 3000 x 3000 px. Esto puede afectar negativamente tu puntuación de PageSpeed. Puedes solucionarlo redimensionando la imagen con el editor de imágenes integrado o redimensionándola en un programa de edición de fotos y volviéndola a subir.
• Aprovecha el almacenamiento en caché del navegador: Si incluyes código personalizado en tu sitio web, este se cargará a menudo desde un sitio web de terceros. Si este sitio web no habilita el almacenamiento en caché, Google lo detectará y recomendará habilitarlo. Debes contactar con ese servicio externo para que implemente este cambio en su servidor.
• Es posible que su página sea demasiado grande: si tiene mucho contenido en una página, puede provocar que la página sea grande incluso después de que ejecutemos la herramienta de optimización en su sitio. Considera usar menos imágenes o dividir su contenido moviéndolo a otras páginas.
• Problemas actuales que no se pueden solucionar: tenga en cuenta que estos son problemas de velocidad de página informados por Google que usted no puede solucionar y que deben procesarse como solicitudes de funciones para Guesty:
  • Aprovechar el almacenamiento en caché del navegador
  • Minificar HTML / CSS / JS
  • Optimizar la entrega de CSS

Casos en los que Guesty no optimiza el sitio

Hay algunos casos en los que Guesty no intenta optimizar el sitio web al publicarlo. Si ha colocado código personalizado que usa

 jQuery (($('#ex'))

o la API JS:

 dmAPI.runOnReady('código',función(){});

en el encabezado del sitio web. Esto se debe a que este código suele requerir jQuery o las funciones dmAPI. Sin embargo, como nuestra optimización lo desplaza hacia abajo en la página, dejará de funcionar y, por lo tanto, romperá el código instalado.