Google PageSpeed

Descripción general

Hemos optimizado los sitios web publicados en la plataforma para conseguir una alta puntuación en la prueba de Google PageSpeed. Esta prueba analiza una gran cantidad de detalles técnicos sobre la construcción de las páginas web, además de comprobar si cumplen las mejores prácticas que permiten que se carguen de manera rápida. La comprobación más importante que realiza la prueba de PageSpeed es ver cómo está estructurado el código del sitio web. Google comprueba que dicho código esté estructurado de forma que permita al navegador cargar el contenido de la forma más rápida posible.

¿Por qué hemos realizado una optimización para esto?

Creemos que la velocidad de los sitios web es uno de los mayores problemas a los que se enfrentan las páginas hoy en día. Los sitios web con carga lenta presentan mayores tasas de rebotes, tienen una baja participación y aportan a toda la página una reputación negativa por ser lenta. Sabemos que los sitios web que responden con mayor rapidez proporcionan mucho valor a los visitantes al ofrecer a cada persona una mejor experiencia de navegación.

¿Cuál fue el motivo de que Google creara esta herramienta?

Google creó la herramienta PageSpeed porque veía que muchos sitios web se cargaban de forma demasiado lenta y el contenido no llegaba a los usuarios con rapidez suficiente. Google sabe que la probabilidad de que los usuarios interaccionen con un sitio web es mayor si este hace visible su contenido de forma más rápida, lo que permite tanto a Google como al sitio web ofrecer una mejor experiencia global. Por lo general, rapidez significa tener un sitio web cargado en menos de tres segundos. Dado que el producto principal de Google (la búsqueda) depende de los sitios web de otras personas, quiere asegurarse de que los administradores de sitios web, los diseñadores y los desarrolladores creen sitios que se carguen rápidamente. 

¿Qué comprueba Google?

Google tiene una lista de 10 optimizaciones que comprueba en las versiones de los sitios web tanto para PC como para móvil. A continuación, basándose en cómo está optimizado el sitio en cada una de estas comprobaciones, da una puntuación global (sobre 100) a la velocidad del sitio web. Esto es lo que comprueba Google:

  • Evitar que se produzcan redireccionamientos de la página de inicio: esto significa que los usuarios no deben ser dirigidos a otra página del sitio web cuando lo carguen. Por ejemplo, no debe dirigir a los visitantes a la segunda versión de la página de inicio. 

  • Eliminar el bloqueo de JavaScript y CSS sobre la representación en el contenido de la parte superior del sitio web: esta es con diferencia la comprobación más importante que lleva a cabo Google. Lo que hace es fijarse en el código del sitio web y asegurarse de que se está dando prioridad al contenido por encima del resto de código. A menudo, los desarrolladores de los sitios web colocan pesados scripts y archivos de CSS en la parte superior de un archivo HTML, lo que provoca que el navegador procese o cargue estos recursos en primer lugar en vez del contenido. El objetivo de esta comprobación es asegurar que se prioriza el contenido de la parte superior del sitio web. (Nota: La "parte superior del sitio web" hace referencia al primer contenido que un usuario ve cuando se carga la página web, que normalmente es el encabezado, la navegación y el contenido de la parte superior del cuerpo de la página.)

  • Habilitar la compresión: esta comprobación se realiza para verificar que el servidor web comprime (reduce de tamaño) los datos sin procesar (HTML, CSS y Javascript) antes de transmitirlos al navegador a través de Internet. El resultado es una gran reducción del tamaño total del sitio web.

  • Aprovechar el almacenamiento en caché del navegador: la comprobación del almacenamiento en caché verifica que se ha indicado al navegador que guarde este contenido de manera local para no tener que volver a descargarlo la próxima vez que se necesite acceder a él. Así se consigue ahorrar un tiempo valioso que a menudo se invierte en conectarse y descargar contenido al recargar las páginas.

  • Minificar CSS: consiste en reducir el archivo de CSS lo máximo posible mediante la eliminación de espacios adicionales, saltos de línea y otros formatos. El proceso es similar a la compresión del archivo a fin de ahorrar espacio.

  • Minificar JavaScript: similar al proceso anterior, la minificación de JS puede reducir en gran medida el tamaño del archivo que se descarga a través del navegador.

  • Minificar HTML: es similar a los dos anteriores, pero con la diferencia de que aquí se eliminan espacios adicionales en el HTML principal del sitio web.

  • Optimizar imágenes: es la segunda comprobación más importante que realiza Google, y con la que se garantiza que las imágenes que se envían al navegador están optimizadas, comprimidas y no son demasiado grandes. Las imágenes representan aproximadamente entre el 65 y el 70 % del tamaño o peso total de un sitio web. La optimización de las imágenes consiste en comprimirlas y reducir su tamaño hasta hacerlo lo más parecido posible al de un archivo antes de que el navegador tenga que descargarlas. En este punto hay dos elementos importantes: (1) Asegurarse de que las imágenes estén comprimidas. Esto requiere procesarlas con herramientas de compresión a fin de reducir su tamaño, pero sin que se vea reducida su calidad. (2) Cambiar el tamaño de las imágenes. No es necesario cargar una imagen grande (de 5000 píxeles, por ejemplo) en un navegador móvil, por tanto se recomienda cambiar el tamaño de la imagen.

  • Priorizar el contenido visible: de esta forma se garantiza que el contenido se ubique en la parte superior del código HTML del sitio web. Evite cargar contenido adicional que no sea relevante para la primera carga del sitio web.

  • Reducir el tiempo de respuesta del servidor: este proceso examina el servidor para asegurarse de que responde rápidamente a los visitantes que llegan al sitio web. Google requiere que el usuario no espere más de 200 ms (un quinto de segundo) para obtener contenido o HTML del servidor.

¿Qué hacemos?

Hemos optimizado los sitios web publicados creados en nuestra plataforma para conseguir una alta puntuación en la prueba de Google PageSpeed. Esto significa que hemos examinado las pruebas mencionadas anteriormente y optimizado nuestros sitios web para cada una de ellas. A continuación se explica cómo realizamos cada una de estas comprobaciones:

  • Evitar que se produzcan redireccionamientos de la página de inicio: la mayoría de los sitios web superan esta comprobación al 100 %. La recomendación es asegurarse de no enviar enlaces a clientes, socios, etc. que no sean una página real del sitio web.

  • Eliminar el bloqueo de JavaScript y CSS sobre la representación en el contenido de la parte superior del sitio web: como parte de la optimización de los sitios web, optimizamos la estructura de estos para que se ajusten a esta recomendación. Lo realizamos de la siguiente forma: (1) Calculamos lo que llamamos CSS "crítica", o lo que es lo mismo, nos fijamos en el sitio web y vemos qué estilos de CSS son necesarios para su visualización. Después, incluimos este contenido dentro del sitio web para que se cargue en primer lugar. (2) A continuación, movemos todos los scripts a la parte inferior del sitio web, de forma que el contenido se cargue en primer lugar.

  • Habilitar la compresión: habilitamos la compresión gzip para las conexiones a nuestro sitio web. Esto garantiza que el archivo se comprime y transfiere a través de Internet y que, a continuación, lo descomprime el navegador.

  • Aprovechar el almacenamiento en caché del navegador: establecemos encabezados de caché en todos los archivos que cargamos. Así se garantiza que los navegadores que descargan estos archivos (CSS, JS, Imágenes) saben cómo almacenar temporalmente el archivo en la caché del navegador, de modo que la próxima vez que este necesite acceder a dicho archivo, este se almacene en el equipo localmente en lugar de tener que volver a descargarlo desde el sitio web.

  • Minificar CSS, JS y HTML: como parte de nuestro proceso de publicación, minificamos todos los recursos de CSS. Así se garantiza que su tamaño sea lo más pequeño posible una vez descargados.

  • Optimizar imágenes: sometemos cada una de las imágenes jpg o png que carga a un extenso proceso de compresión y redimensionamiento de imágenes a fin de poder gestionarlas y utilizarlas de la mejor forma posible. Llevamos a cabo los siguientes procesos:

    • En primer lugar, procesamos la imagen mediante un algoritmo de compresión sin pérdidas y la guardamos en nuestra CDN (red de entrega de contenido). Así se reduce el tamaño de la imagen.

    • A continuación, cambiamos el tamaño de la imagen en cinco versiones diferentes. 

    • Después, las sometemos todas a un algoritmo de compresión con pérdida de datos, con lo cual se reduce ligeramente la calidad de las imágenes pero con ello se consigue que tengan un tamaño menor. En la mayoría de los casos, la pérdida de calidad no es visible para el ojo humano.

    • Tras la compresión con pérdida de datos, sometemos la imagen a una nueva compresión sin pérdidas para asegurarnos de que tiene el menor tamaño posible.

  • Priorizar el contenido visible: como parte de la creación de los sitios web, los estructuramos para que de forma predeterminada cumplan esta recomendación. Esto implica introducir en primer lugar el contenido del encabezado, seguido del del cuerpo de la página.

  • Reducir el tiempo de respuesta del servidor: esta comprobación se realiza más para descartar que el sitio web es muy lento que para verificar si es rápido. Puesto que alojamos todos los sitios web en nuestra plataforma, podemos garantizar que todos ellos ofrecen una respuesta rápida. Hacemos uso de los servicios de Amazon Web Services, empresa líder en el sector, para mantener siempre este nivel de calidad.

¿Qué hacer si el sitio no obtiene una buena puntuación?

Si bien deseamos que todos los sitios web que administramos obtengan siempre una puntuación alta, no es algo que podamos prometer que se cumpla siempre. El motivo es que nuestros clientes tienen la posibilidad de añadir al sitio web su propio código, contenido y diseño, y por tanto no tenemos el control total sobre lo que pueden o no pueden añadir. Por ello, habrá situaciones en las que nuestros sitios web no obtengan una puntuación superior a 90. A continuación se muestra una lista de errores o problemas identificados por GooglePageSpeed que se relacionan con la estructura del sitio web:

  • Eliminar el bloqueo de JavaScript y CSS sobre la representación en el contenido de la parte superior del sitio web:

    • Elemento de mapa en la parte superior del sitio web: si coloca un elemento de mapa en la parte superior del sitio web, normalmente este hecho se traducirá en una calificación negativa de PageSpeed. Para solucionarlo, mueva el elemento del mapa a la parte inferior de la página.

    • Tienda en la parte superior del sitio web: si coloca una tienda en la parte superior del sitio, a menudo puede aparecer este mensaje de advertencia. Estamos trabajando para encontrar una solución a este problema, aunque por ahora lo único que podemos recomendarle es que mueva el contenido más abajo en la página. Esto puede hacerlo, por ejemplo, añadiendo una imagen y texto explicativo sobre el elemento de la tienda de forma que este no quede en la zona correspondiente a la parte superior del sitio web.

    • Código o script personalizado en el encabezado: si ha incluido código personalizado en el encabezado del sitio web, Google suele mostrar un mensaje de error para advertir de que este hecho está ralentizando la representación de la página. Este problema se puede solucionar de dos formas diferentes: (1) Coloque el código en el archivo body-end.html del sitio web en vez de en el encabezado para que así el código se mueva a la parte inferior y se cargue en segundo lugar. (2) Asegúrese 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 contenido del sitio web. Para habilitar la asincronía en los scripts debe realizar la siguiente modificación:

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

      • Nueva asincronía: <script src=”https://ejemplo.com/script.js” async defer></script>

      • Verá que el código anterior indica al navegador que cargue este código "async", el cual ayudará a superar esta prueba de Google PageSpeed.

    • iframe incrustado: si incrusta un iframe personalizado en la parte superior de un sitio web, es muy probable que aparezca este mensaje de error. Mueva el contenido más abajo en la pagina o elimínelo por completo.

  • Optimizar imágenes: actualmente nuestra optimización de imágenes solo funciona en imágenes JPG y PNG. Si está cargando una imagen TIFF, GIF u otro formato de imagen, puede que no logremos optimizarla y que con ello aparezca este mensaje de advertencia. Recomendamos pasar la imagen por un servicio de optimización de imágenes, como por ejemplo EzGif, Compressor.io o TinyPNG.

    Otra comprobación que lleva a cabo Google es asegurarse de que no hay imágenes grandes que cambien de tamaño para adaptarse a lugares pequeños. Intentamos solucionar este problema incluyendo imágenes de menor tamaño en columnas de dimensiones más pequeñas, pero este proceso no es perfecto. En ocasiones tendrá que descargar una imagen, ajustar su tamaño exactamente al de la columna que desee utilizar y volver a cargarla, si bien se trata de casos excepcionales.

  • Aprovechar el almacenamiento en caché del navegador: si incluye algún código personalizado en su sitio web, con frecuencia se cargará desde un sitio web de terceros. Si este sitio web no habilita el almacenamiento en caché, Google lo identificará y recomendará que se habilite. Debería ponerse en contacto con dicha tercera parte para que implemente este cambio en su servidor.

Casos en los que no optimizamos el sitio 

Existen algunos casos en los que no intentamos optimizar el sitio web una vez publicado. Si ha introducido código personalizado que utiliza jQuery (($('#ex')) en el encabezado del sitio web. La razón es que este código suele requerir que exista jQuery, pero como nuestra optimización mueve este código a una parte inferior de la página, dejará de funcionar y dañará el código instalado.