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 Google PageSpeed. Esta prueba analiza numerosos detalles técnicos sobre la estructura de las páginas web y verifica que cumplan con las mejores prácticas para una carga rápida. La comprobación más importante de 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 con la mayor rapidez posible.

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 que enfrenta la web hoy en día. Los sitios web que cargan lentamente tienen mayores tasas de rebote, menor interacción y le dan a toda la web una mala reputación por su lentitud. Sabemos que los sitios web que responden más rápido aportan mucho valor a los visitantes, ofreciéndoles 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 son más propensos a interactuar con los sitios web que ofrecen contenido visible con mayor rapidez, lo que permite tanto a Google como al sitio web brindar una mejor experiencia general. Por lo general, esto significa que un sitio web cargue en menos de tres segundos. Dado que el producto principal de Google (la búsqueda) depende de los sitios web de otros, quiere asegurarse de que los webmasters, diseñadores y desarrolladores creen sitios web que carguen rápidamente.

Lo que Google comprueba

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

• Evitar las redirecciones de páginas de destino. Esto significa que no debe redirigir a los usuarios a otra página de su sitio web cuando la carguen. Por ejemplo, no debe redirigir a todos los visitantes a una segunda versión de su página de inicio.
• Eliminar el JavaScript y CSS que bloquean la renderización del contenido visible sin desplazamiento. Esta es, sin duda, la comprobación más importante que realiza Google. Analiza el código de tu sitio web y se asegura de que priorices el contenido sobre otros elementos del código. A menudo, los desarrolladores web colocan scripts y archivos CSS pesados al principio del archivo HTML. Esto provoca que el navegador procese/cargue estos recursos primero, en lugar de cargar primero el contenido. Esta comprobación garantiza que priorices el contenido visible sin desplazamiento. (Nota: El contenido visible sin desplazamiento se refiere al primer contenido que ve un usuario al cargar una página web. Normalmente, se trata del encabezado, la navegación y el contenido superior del cuerpo de la página).
• Habilitar la compresión. Esto verifica que tu servidor web comprima (reduzca el tamaño) los datos sin procesar (HTML, CSS y JavaScript) antes de transmitirlos a través de internet a tu navegador. Esto se traduce en un gran ahorro en el tamaño total de tu sitio web.
• Aprovechar el almacenamiento en caché del navegador. La comprobación de caché garantiza que el navegador guarde el contenido localmente, en lugar de volver a descargarlo la próxima vez que necesites acceder a él. Esto ahorra un tiempo valioso que suele emplearse en la conexión y descarga de contenido al recargar la página.
  Minimizar CSS. Minimizar CSS significa reducir el tamaño del archivo CSS eliminando espacios, saltos de línea y otros formatos innecesarios. Es similar a comprimir el archivo para ahorrar espacio.
• Minimizar JavaScript. Al igual que con CSS, minimizar JavaScript puede ahorrar mucho espacio en el archivo individual que descarga el navegador.
• Minimizar HTML. Similar a las dos opciones anteriores, pero elimina el espacio adicional del código HTML principal del sitio web.
• Optimizar imágenes. La segunda comprobación más importante que realiza Google, asegura que las imágenes que envías al navegador estén optimizadas, comprimidas y no sean demasiado grandes. Las imágenes representan aproximadamente el 65-70% del tamaño/peso total de un sitio web. Optimizar imágenes significa comprimirlas y hacer que su tamaño de archivo sea lo más pequeño posible antes de que el navegador tenga que descargarlas. Hay dos cosas importantes que hacer aquí: (1) Asegurarse de que las imágenes estén comprimidas. Esto requiere pasarlas por herramientas 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 entregar una imagen que sea muy grande (5000 píxeles, por ejemplo) a un navegador móvil, por lo que se debe cambiar el tamaño de la imagen.
• Prioriza el contenido visible. Esto garantiza que el contenido se muestre en la parte superior del código HTML del sitio web. Se debe evitar cargar contenido adicional que no sea relevante para la primera carga del sitio.
• Reduce el tiempo de respuesta del servidor. Esta comprobación analiza su servidor para asegurarse de que responde con rapidez a los visitantes de su sitio web. Google exige que el usuario no espere más de 200 ms (1/5 de segundo) para recibir el contenido/HTML de su servidor.

Con la introducción del proyecto de código abierto Lighthouse en noviembre de 2018, la prueba de velocidad de páginas de Google ahora analiza una amplia gama de propiedades del sitio web además de la velocidad (como SEO, accesibilidad, PWA y mejores prácticas). Además de las pruebas anteriores, Lighthouse ahora verifica lo siguiente:

• First Contentful Paint: Esta métrica proviene de un navegador real que carga un sitio web. Al ejecutar una prueba de Lighthouse, un navegador real visita el sitio web, lo carga y monitoriza su rendimiento. La métrica First Contentful Paint informa sobre el tiempo que tarda en mostrarse cualquier tipo de contenido después de que la página haya comenzado a cargarse. Esto puede ser una imagen, un color de fondo, etc., y el tiempo hasta First Contentful Paint se mide en segundos. La razón por la que esta métrica es valiosa es que es la primera vez que un usuario sabe que algo en el sitio web se está cargando; es la primera indicación 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 de un sitio web. Funciona tomando capturas de pantalla del sitio web cada 0,5 segundos durante la carga. Con estas capturas, calcula el porcentaje de contenido cargado en la página web en intervalos de 0,5 segundos y proporciona una puntuación de velocidad general. Cuanto menor sea el número, más rápido parece cargarse 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 impida que el sitio web lo muestre 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 puede hacer clic en un botón o desplazarse por la página. Esto es especialmente importante en dispositivos móviles, donde el usuario interactúa directamente con la página tocando la pantalla. El objetivo de los desarrolladores web siempre debe ser garantizar que una página sea interactiva siempre que contenga contenido. Esto supone un gran reto debido al funcionamiento de los navegadores.
• 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 iniciales del sitio web y la CPU del dispositivo entra en estado de inactividad. Se informa sobre este dato porque los desarrolladores deben centrarse en cargar primero la menor cantidad de contenido posible. Al enviar una pequeña cantidad, la CPU del dispositivo procesará todo el código y alcanzará el estado de inactividad más rápidamente.
• Latencia de entrada estimada. La última métrica que informa Lighthouse no tiene nada que ver con el rendimiento de carga inicial de tu sitio web. En cambio, intenta proporcionarte un número (en milisegundos) que indica el tiempo de respuesta de tu sitio web a los clics. La idea es que cuanto más rápido responda tu sitio web, más rápido lo considerarán los usuarios y menos probabilidades habrá de que lo abandonen.

Tras realizar estas pruebas, Lighthouse también te ofrecerá recomendaciones priorizadas sobre cómo mejorar la puntuación general de velocidad. Esta información aparece en la segunda mitad de la página y proporciona detalles técnicos sobre las acciones que puedes realizar y los beneficios que estos cambios pueden aportar.

Lo que hace Guesty

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

• Evite las redirecciones de página de destino. En la mayoría de los sitios web de Guesty, superamos esta verificación al 100 %. Sin embargo, Guesty no tiene el control total sobre esto, ya que permitimos que los usuarios accedan a otras páginas mediante nuestras redirecciones de URL. La recomendación es que se asegure de no enviar enlaces a sus clientes, socios, etc., que no pertenezcan a una página real de su sitio web.
• Elimine el JavaScript y el CSS que bloquean la renderización del contenido visible sin desplazamiento. Como parte de la publicación de sitios web, Guesty optimiza la estructura de los sitios web para que cumpla con esta recomendación. Lo hacemos de la siguiente manera: (1) Calculamos lo que llamamos CSS "crítico". Esto significa que analizamos el sitio web y vemos qué estilos CSS son necesarios para mostrarlo. Luego colocamos este contenido en línea dentro del sitio web para que se cargue primero. (2) Luego movemos todos los scripts al final del sitio web, para que el contenido se cargue primero.
• Habilitar la compresión. Guesty habilita 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.
• 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 ese archivo, esté almacenado localmente en el equipo, en lugar de tener que volver a descargarlo del sitio web.
• Minimizamos 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 ocupen el menor espacio posible al descargarlos. Es importante tener en cuenta que los recursos externos, aunque normalmente se distribuyen a través de nuestra CDN, podrían no estar minimizados.
• Optimizamos las imágenes. Cada imagen JPG o PNG que suba a Guesty, la sometemos a un extenso proceso de compresión y redimensionamiento para lograr el mejor resultado posible. Realizamos los siguientes procesos:
  
  • Primero, procesamos la imagen mediante un algoritmo de compresión sin pérdidas y la guardamos en nuestra CDN. Esto reduce el tamaño base de la imagen.
  • A continuación, redimensionamos la imagen en cinco versiones diferentes.
  • Tras redimensionarlas, aplicamos un algoritmo de compresión con pérdida a todas las imágenes. Esto reduce ligeramente la calidad, pero permite ahorrar mucho espacio. En la gran mayoría de los casos, la pérdida de calidad es imperceptible a simple vista.
  • Tras la compresión con pérdida, sometemos la imagen a una compresión sin pérdida adicional para garantizar que tenga el menor tamaño posible.
• Prioriza el contenido visible. Como parte del proceso de creación de sitios web de Guesty, estructuramos el sitio para que cumpla con esta recomendación por defecto. Esto significa colocar primero el contenido del encabezado, seguido del contenido del cuerpo de la página.
• Reduzca 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 funcionen con rapidez. Utilizamos Amazon Web Services, líder en el sector, lo que nos permite mantener estos estándares.

Qué hacer si tu sitio web no funciona correctamente

Aunque en Guesty nos gustaría que todos los sitios web que gestionamos tuvieran siempre un buen posicionamiento, no podemos garantizarlo. Esto se debe a que nuestros clientes pueden añadir su propio código, contenido y diseño al sitio web, por lo que no tenemos control total sobre lo que pueden o no añadir. Por este motivo, existen algunos casos en los que los sitios web de Guesty no alcanzarán puntuaciones superiores a 90. A continuación, se muestra una lista de errores/problemas que Google PageSpeed nos reporta, según cómo se haya construido el sitio web:

• Elimine el código JavaScript y CSS que bloquea la renderización en el contenido visible sin necesidad de desplazarse:
  • Mapa visible sin desplazamiento . Si colocas un mapa en la parte superior de tu sitio web, esto suele repercutir negativamente en tu puntuación de PageSpeed. Para solucionarlo, mueve el mapa a la parte inferior de la página.
  • Tienda visible sin necesidad de desplazarse. Si colocas una tienda en la parte superior, es probable que aparezca esta advertencia. Guesty está trabajando en una solución, pero por ahora, nuestra única recomendación es mover el contenido a una posición inferior en la página. Una posible solución es añadir una imagen y un texto explicativo encima del elemento de la tienda, de modo que esta no se encuentre en la parte visible de la página.
  • Código/script personalizado en la cabecera . Si colocas código personalizado en la sección del sitio web, es probable que Google muestre un error indicando que esto ralentiza la carga de la página. Hay dos opciones para solucionarlo: (1) Coloca el código en la sección del archivo HTML del sitio web en lugar de en la cabecera. Esto mueve el código al final, forzándolo a cargarse más tarde. (2) Asegúrate de que el script incrustado se cargue de forma asíncrona. Esto significa que el navegador lo carga en segundo plano mientras continúa cargando el resto del sitio web. Para habilitar la carga asíncrona, debes modificar el script de la siguiente manera:
    • Código antiguo: 

      <script src=”https://example.com/script.js”></script>
      
      

    • Nuevo asíncrono: 

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

  • Tenga en cuenta que el código anterior le indica al navegador que cargue este código de forma asíncrona, lo que debería ayudar a superar esta prueba de Google PageSpeed.
  • Incrustaciones de iframe. Si insertas un iframe personalizado en la parte visible de un sitio web, es muy probable que aparezca este mensaje de error. Mueve este contenido a una posición inferior de la página o elimínalo por completo.
• Optimización de imágenes: Actualmente, la optimización de imágenes de Guesty solo funciona con imágenes JPG y PNG. Si subes una imagen TIFF, GIF u otros formatos, Guesty podría no optimizarla, lo que podría explicar esta advertencia. Recomendamos usar un servicio de optimización de imágenes como EzGif, Compressor.io o TinyPNG. Google también verifica que no tengas imágenes grandes que se redimensionen para espacios reducidos. Guesty intenta solucionar esto colocando imágenes más pequeñas en columnas de menor tamaño, pero este proceso no es perfecto. En ocasiones, es posible que debas descargar una imagen, redimensionarla exactamente al tamaño de columna que deseas usar y volver a subirla. Esto ocurre con poca frecuencia.
• Cambiar el tamaño de las imágenes: Si bien Guesty optimiza las imágenes para comprimirlas a un tamaño menor, no las redimensiona automáticamente en la versión de escritorio de tu sitio web. Por ejemplo, si usas una imagen de 3000 x 3000 píxeles en una página y la redimensionas a 300 píxeles con la función de arrastrar y soltar del editor, se seguirá cargando la imagen completa. Esto puede afectar negativamente la puntuación de carga de tu página. Puedes solucionarlo redimensionando la imagen con el editor de imágenes integrado o con 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á desde un sitio web de terceros. Si este sitio no tiene habilitado el almacenamiento en caché, Google lo detectará y te recomendará habilitarlo. Debes contactar con ese servicio para que implemente este cambio en su servidor.
• Tu página puede ser demasiado grande: Si tienes mucho contenido en una página, puede que tu página siga siendo grande incluso después de que ejecutemos la herramienta de optimización en tu sitio. Considera usar menos imágenes o dividir tu contenido moviéndolo a otras páginas.
• Problemas actuales sin solución: Cabe destacar que se trata de problemas de velocidad de página reportados por Google que usted mismo no puede solucionar y que deben procesarse como solicitudes de nuevas funciones para Guesty:
  • Aprovechar el almacenamiento en caché del navegador
  • Minimizar 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 utiliza

jQuery (($(‘#ex’)) 

o la API de JS:

dmAPI.runOnReady(‘code’,function(){});

en el encabezado del sitio web. La razón por la que hacemos esto es porque este código a menudo requiere que existan jQuery o las funciones dmAPI, pero debido a que nuestra optimización mueve este código más abajo en la página, ya no funcionará y, por lo tanto, romperá el código que se ha instalado.