Prueba PageSpeed de Google

  • Base de conocimiento
  • Creador de sitio web adaptable
  • Prueba PageSpeed de Google
  • Ayuda de Duda > Responsive Website Builder > Avanzado

Descripción general

Duda optimizó los sitios web publicados en la plataforma para que logren una puntuación más alta en la prueba PageSpeed. Esta prueba evalúa muchos detalles técnicos de 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é Duda hizo esta optimización

En Duda, creemos que la velocidad de los sitios web es uno de los mayores problemas que enfrenta Internet 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 la reputación negativa de 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 sirven el contenido a los usuarios lo suficientemente rápido. Google sabe que es más probable que los usuarios se interesen en sitios web que sirven 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 10 optimizaciones que comprueba tanto en las versiones de los sitios web para equipos de escritorio como para móviles. Posteriormente, 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: se comprueba que el servidor web comprime (reduce el tamaño de) los datos sin procesar (HTML, CSS y Javascript) antes de transmitirlos a través de Internet a su navegador. Esto produce grandes ahorros 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 gastarse 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 ahorrar mucho tamaño en el archivo individual que es descargado por el navegador.

  • Minimizar HTML: similar a los dos anteriores, pero elimina el espaciado extra 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 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, 5000 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 del servidor.

Lo que hace Duda

Duda 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. Tenemos una excelente publicación de blog escrita por nuestro director de tecnología (CTO) que describe cómo optimizamos la velocidad de la página. 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 Duda, pasamos esta comprobación al 100%. Esto no está totalmente bajo el control de Duda, 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, optimizamos 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: Duda 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: Duda 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 los CSS, JS y HTML: Como parte de nuestro proceso de publicación en Duda, minimizamos todos los recursos CSS. Esto garantiza que tengan el menor tamaño posible cuando sean descargados.

  • Optimizar las imágenes: Cada imagen jpg o png que usted transfiera a Duda, la sometemos a un extenso proceso de compresión y redimensionamiento de imágenes para lograr el mejor manejo de imágenes 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. Tenga más información sobre esto aquí.

    • 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 Duda 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, sino lo suficientemente rápido. Puesto que Duda 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 Duda desea que todos los sitios web que tenemos 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 Duda no logran una puntuación muy cercana a 100. La siguiente es una lista de errores/problemas que la prueba PageSpeed de Google 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:

    • Código antiguo: <script src=”https://ejemplo.com/script.js”></script>

    • Nueva asincronización: <script src=”https://ejemplo.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.

    • Elemento de mapa por encima del pliegue. Si coloca un elemento de mapa en la parte superior de su sitio web de Duda, 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 tienda en la parte superior, esta advertencia puede aparecer frecuentemente. Duda 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 tienda, de modo que la tienda 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:

    • iframe incrustado: si incrusta un iframe personalizado en un sitio web de Duda 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 Duda funciona solo con imágenes JPG y PNG. Si transfiere una imagen TIFF, GIF o cualquier otro formato de imagen, es probable que Duda no pueda optimizarla y esa podría ser la razón de esta advertencia. Se recomienda someter la imagen a un servicio de optimización de imágenes, como EzGif, Compressor.io o TinyPNG.

    Otra comprobación que realiza Google es para asegurarse de que el sitio web no contenga imágenes grandes que cambien de tamaño para ajustarse a espacios pequeños. Duda 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 Duda optimiza las imágenes para asegurarse de que estén comprimidas en un tamaño más pequeño, Duda 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 en Duda 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 características para Duda:
    • Aprovechar el caché del navegador
    • Minimizar HTML / CSS / JS
    • Optimizar entrega de CSS

Casos en los que Duda no optimiza el sitio 

Hay algunos casos en los que Duda 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 de Duda: 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ó.

×

Por favor inicie sesión como Pro

Soporte telefónico prioritario está disponible exclusivamente para DudaPros. Inicie sesión en su cuenta DudaPro ahora para ver nuestros números de asistencia internacional.

Inicie sesión
¿No eres un DudaPro?¡Compra DudaPro!