Google PageSpeed Insights: cómo mejorar la nota y llegar a 100

Kiwop / Blog / Marketing Online / Google PageSpeed Insights: cómo mejorar la nota y llegar a 100

Todos conocemos el test de velocidad de Google PageSpeed Insights. Como bien habrás experimentado, llegar a obtener una nota de 100 en este test de velocidad de Google no es tarea fácil. De hecho, muchas empresas buscan desesperadamente subir su nota en este test sin demasiado éxito. Esto se debe a que Google pone unos requisitos bastante altos en cuanto para tener una buena puntuación.

En este artículo te contamos cómo es posible conseguir una nota de 100. Y, además, es posible hacerlo no en una web sencilla y básica sin demasiadas funcionalidades, sino que lo podemos conseguir en una web bastante completa: esta que estás viendo ahora mismo 🙂

Qué es y para qué sirve el test Google PageSpeed Insights

PageSpeed Insights es una herramienta desarrollada por Google que muestra el rendimiento de una página o sitio web. Los resultados los divide en dos: la versión móvil (Mobile) y la versión de escritorio (Desktop). Además de darnos una puntuación de nuestra web, Google nos muestra los motivos de por qué nos puntúa de esa forma y nos da una serie de consejos para mejorar esta nota.

Google divide las optimizaciones en tres grandes categorías a la hora de clasificar un sitio web:

  • Web Rápida: la puntuación en el test muestra que la web se encuentra en el tercio superior de las páginas más rápidas.
  • Web Normal: la web se encuentra en el tercio intermedio de las páginas más rápidas de Internet.
  • Web Lenta: la web se encuentra en el tercio más lento de las páginas de Internet.

La puntuación que nos muestra Google es un valor que va de 0 a 100. Una nota cercana a 100 significa que la página es extremadamente rápida y que no hay cosas por optimizar. Y una nota cercana a 0 significa que hay mucho trabajo por hacer en la página web.

En cuanto a la nota, Google divide de esta manera la puntuación:

  • Nota buena: Puntuación de 80 o superior.
  • Nota media: Puntuación entre 60 y 79.
  • Nota baja: Puntuación entre 0 y 59.

Por qué es importante tener una web rápida

Según Google, el 53% de usuarios abandonan una página web si ésta tarda más de 3 segundos en cargar. Es decir, que si tu web no se carga en menos de 3 segundos, más de la mitad de tus usuarios se irán a otra página web (y es posible que lo hagan a una de la competencia).

Y, por si esto fuera poco, en el estudio también se demuestra que por cada segundo en cargar una web, las conversiones también disminuyen. En concreto, un 20% menos de conversiones por cada segundo que pasa.

Con lo cual, disponer de una página web rápida y optimizada, hará que tus usuarios tengan una gran experiencia de usuario. Y esto significará muchas más conversiones.

Si una web tarda más de 3 segundos en cargarse, se perderán más del 53% de los visitantes y, con cada segundo de retraso en el tiempo de carga, la tasa de conversión de la página se reduce en más de un 20%.

Fuente: Google

La velocidad de una web no sólo es necesario para una tienda online. Ya que parece evidente que tener un eCommerce rápido nos permitirá aumentar las ventas. También es necesario para las webs corporativas. Ya que toda web lo que busca es convertir, ya sea para que nos compren, nos contacten o nos llamen. O, simplemente, para mostrar de manera eficiente quiénes somos o a qué nos dedicamos. En todos estos casos necesitamos tener una web rápida y efectiva.

Consejos para conseguir una nota de 100 en Google PageSpeed Insights

Los factores que influyen a la hora de poner las notas en el test de Google son varios y diversos. Aquí te mostramos algunos ejemplos que te ayudarán a mejorar tu nota.

Todas las técnicas que se detallan aquí forman parte del WPO: Web Performance Optimization, es decir, la optimización de la velocidad de los sitios webs.

Cuando hablamos de WPO estamos hablando básicamente de la optimización del web en términos de tiempo de carga y rapidez. Son una serie de estrategias indispensables actualmente, puesto que de nada nos servirá tener un diseño muy atractivo si la página web no está optimizada en términos de velocidad.

Optimizar las imágenes

La optimización de las imágenes es un requisito indispensable para obtener una buena nota en el test. Es una de las principales causas de las bajas notas que se acostumbran a ver. Una de las mejores técnicas para optimizar las imágenes es comprimirlas. Puedes reducir, de media, un 50% el peso de las imágenes si las comprimes.

Si usas WordPress, uno de los mejores plugins para hacer esto sin invertir mucho tiempo en comprimirlas manualmente es WP Smush Image. Es un plugin que tiene muchas funcionalidades en su versión gratuita.

El uso de un plugin de optimización automática de imágenes es indispensable sobre todo para webs donde existen varios editores que publican de manera regular. De esta manera, da igual qué editor suba un contenido con imágenes, ya que el plugin optimizará automáticamente todas las imágenes que se suban a la web.

Además, podremos configurar el plugin para que solo permita unas dimensiones máximas en la imagen. Es decir, si la imagen tiene una dimensión superior a los píxeles que le hemos introducido, el plugin automáticamente redimensionará la imagen.

Si no quieres utilizar un nuevo plugin o simplemente tu web no está desarrollada en WordPress u otro CMS como Drupal que disponga de un plugin parecido, puedes utilizar herramientas online para comprimir y optimizar imágenes como Optimizilla o cualquiera otra herramienta. Es una herramienta gratuita que te permite subir hasta 20 imágenes a la vez.

Minificar y optimizar el código HTML

Otro consejo a la hora de mejorar la velocidad de carga sería optimizar el código HTML. Aunque hay que hacerlo bien, ya que si no se hace adecuadamente, esta acción podría desconfigurar por completo el frontend de tu proyecto web.

La minificación del código HTML es el proceso de eliminar datos innecesarios o duplicados en el código fuente de una web. Un código mal programado puede ser la causa de este problema, y se puede resolver auditando el código.

Una vez más, hay muchos plugins para WordPress que permiten minificar el código HTML de tu web.

Optimizar el código CSS

Otro factor importante es la optimización del código CSS. Normalmente los archivos CSS son ficheros externos que necesitan ser cargados.

Muchas veces estos archivos CSS contienen código que no se usa realmente en las páginas. Si una página sólo está usando un 10% de código de un archivo CSS, realmente está cargando de manera innecesaria el 90% restante de ese archivo.

Lo primero que hay que hacer es:

  • Analizar qué código y/o archivos CSS son realmente necesarios
  • Depurar el código para intentar bajar su peso
  • En muchos casos, insertar directamente el código CSS en el código HTML podría ser una opción válida

Optimizar el código JavaScript (JS)

Entre muchas cosas, JavaScript permite habilitar potentes funciones y bloques de página interactivos. El problema es que estos scripts ralentizan mucho la página web y hay que tener cuidado de no abusar demasiados de ellos.

Lo primero que habría que hacer es auditar la página web y eliminar todo código JavaScript que no sea necesario para los requerimientos que tenemos de nuestra web. Una vez tengamos sólo los scripts imprescindibles, podemos aplicar estos 3 consejos:

  1. Los scripts que no sean cruciales, deberían ser cargados a posteriori, en lugar de ser cargados primero.
  2. Cargar todos los archivos JavaScript externos de manera asíncrona, en lugar de manera síncrona. Los scripts cargados de manera síncrona pausan el proceso de renderizado de la página, mientras que los scripts cargados de manera asíncrona permiten al navegador cargar varios elementos al mismo tiempo.
  3. Considerar poner algunas funciones de JS dentro (inline) de la propia página. Esto nos permitirá reducir el número de peticiones que tu navegador tiene que hacer.

Optimizar el servidor (hosting)

Este es quizás uno de los puntos más importantes a tener en cuenta en cuanto a velocidad se refiere. El servidor donde se aloja nuestro proyecto web es de vital importancia.

El tiempo de respuesta del servidor es directamente un factor de la nota de Google PageSpeed Insights. Este tiempo de respuesta, según Google, puede ralentizarse de acuerdo a varios factores:

  • Cantidad de consultas a la base de datos
  • Enrutamiento lento
  • Uso de determinados frameworks
  • Uso de ciertas librerías
  • Pocos recursos de CPU
  • Pocos recursos de memoria RAM

Además de estos factores, tener un buen administrador de sistemas que nos administre nuestro hosting es muy importante. De esta manera, nos podrá configurar e instalar software que permite que la web se cargue mucho más rápida. Como, por ejemplo, haciendo uso de sistemas de caché estáticas y dinámicas.

En Kiwop optimizamos servidores haciendo uso de Nginx, Varnish, Redis Server, memcache, etc…

Ya dicen que lo barato sale caro. Y es verdad, tener un hosting barato puede salir muy caro a la hora de optimización y velocidad web.

Vigilar el uso de plugins externos

Sobre todo, si usamos WordPress, tenemos que vigilar con el uso de plugins externos. En Kiwop, cada nueva característica que requiere un desarrollo web es analizada mucho antes de implementarla. En lugar de utilizar un plugin externo nuevo por cada nuevo requerimiento, lo programamos a medida siempre que sea posible. Puesto que cuando lo programamos a medida, solo incluimos las funciones que realmente necesitamos. En cambio, los plugins externos incluyen muchas funciones que no son necesarias y lo que hacen es retrasar el tiempo de carga de la página.

Priorizar el contenido de arriba de una página

Aunque parezca extraño, la velocidad de una página no sólo se basa en lo rápida que ésta carga. También tiene que ver con el rendimiento percibido. El rendimiento percibido se podría definir cómo «cuán rápida parece que una web carga». Y esto puede ser diferente al tiempo de carga real. El rendimiento percibido tiene que ver con la perspectiva del usuario.

Para priorizar este rendimiento percibido es muy importante darle prioridad al contenido que es importante por parte del usuario. Por ejemplo, el texto de la parte superior de una página debería cargarse antes que el footer. Una web mal programada podría empezar a cargar funcionalidades y bloques del footer que el usuario no ve a primera vista.

Implementar AMP

AMP es una tecnología creada por Google que ofrece una experiencia de carga de páginas mucho más rápida en los dispositivos móviles. AMP restringe el uso de HTML y JS, aumentando enormemente la velocidad de las páginas y, de paso, mejorando su posicionamiento.

Aplicar AMP nos permitirá aumentar la nota de Google Page Insights sobre todo en los dispositivos móviles. Aunque es una tecnología que hay que desarrollarla con sumo cuidado, ya que podría desconfigurar por completo cualquier página web.

Somos expertos en la tecnología AMP. De hecho, todo nuestro web es AMP válido:

Resultado de AMP válida para Kiwop

Qué nota conseguimos a Kiwop en el test de Google

Después de todos los consejos teóricos que os hemos dado, suponemos que lo que os importa de verdad es saber si estos consejos funcionan. Sí que funcionan. En Kiwop obtenemos unas notas de 89 en la versión móvil y la máxima nota, 100, en la versión de escritorio en Google PageSpeed Insights. ¿No os lo creéis? Aquí está la prueba en la versión de escritorio:

Nota en el test de velocidad de Google PageSpeed Insights versión escritorio

Y aquí también mostramos la prueba de la nota obtenida en la versión móvil, ya que la mayoría de personas siempre olvidan mostrar esta nota ya que es mucho más baja que la nota de la versión de escritorio:

Nota en el test de velocidad de Google PageSpeed Insights versión móvil

Haced vosotros mismos la prueba: id a la página de Google PageSpeed Insights, en el campo de URL poned https://www.kiwop.com y lo veréis con vuestros propios ojos 🙂

¿Queréis que Kiwop os optimice vuestra página web para mejorar la nota del test de Google? Os tenemos que avisar que si queréis tener las mismas notas que nosotros, os tendremos que diseñar una nueva página web.

Conclusiones

Seguro que has dedicado mucho esfuerzo (en tiempo y recursos) para desarrollar tu página web. Con lo cual, quieres que sea lo más perfecta que sea posible. Y tener una velocidad alta es un factor importante.

Además del test de Google, hay otras páginas que nos permiten valorar la velocidad de nuestra página, como pueden ser GTMetrix (la nota es una combinación de PageSpeed y de YSlow) o WebPageTest. En ambos test, nuestra página también obtiene unos resultados excelentes:

Resultados del test de velocidad GTmetrix para la web de kiwop
Resultados del test de velocidad WebPageTest para la web de kiwop

Como hemos visto, cada imagen, elemento, etc… necesita ser tenido en cuenta a la hora de obtener una buena nota. Por esto es importante contar con desarrolladores expertos a la hora de desarrollar tu web.

Llegar a una nota de 100 en el test de velocidad de Google PageSpeed Insights puede darte el empujón que tu web necesita para tener éxito. ¡En Kiwop estaremos encantados de ayudarte!

Queremos ayudarte a obtener resultados.

Deja un comentario

Queremos ayudarte a obtener resultados.
¿EMPEZAMOS?