WPO

Page Speed Insight de Google [Guía para conseguir el 100/100]

google page speed insight

Publicado: 8 marzo 2017

Modificado: 5 mayo 2020

Tiempo de lectura: 6 min

¿Que tal querido lector? Supongo que no te descubro nada si te digo que la velocidad de carga es fundamental para el posicionamiento web de tu página ¿Verdad? Por este motivo, hoy me he decidido a traerte la guía para alcanzar el 100% en la herramienta de Google Google Page Speed Insight para hacer que tu página web vuele en internet.

Page Speed Insight fue lanzada al mercado por Google con el fin de ofrecer información sobre la velocidad de carga o WPO de una página web de forma totalmente GRATUITA.

Pero no solo se creó para facilitar la vida a los webmasters, esta herramienta fue lanzada por Google ya que cuanto más rápida sea tu página web, mejor será la experiencia de los usuarios en ella y menor será el tiempo necesitará el bot de Google para rastrear toda tu página web mejorando de esta manera tu crawl budget y tu posicionamiento web.

Sin embargo, conseguir que tu página web consiga el famoso 100/100 en el test de velocidad de Page Speed de Google no es sencillo.

Para lograrlo, deberás tener en cuenta un montón de factores propios y externos a la hora de cargar los recursos de tu página web. Además, necesitarás tener un hosting bueno y de calidad para que tu velocidad de carga sea óptima.

Por este motivo, yo siempre recomiendo SiteGround ya que funciona de maravilla.

Por lo tanto, en el post de hoy te voy a enseñar una serie de pasos a seguir para lograr conseguir el ansiado 100/100 (O al menos acercarte mucho) en la herramienta PageSpeed de Google.

PD. He de avisarte de que aunque sigas a rajatabla los siguientes pasos puede que no logres el ansiado 100% en el PageSpeed de Google ya que esta puntuación dependerá de muchos más factores (Incluidos algunos ajenos a ti).

De todo modos, no te preocupes. Conseguir el 100/100 NO ES TAN IMPORTANTE. Si quieres conseguir ese 100% crea una página HTML en blanco, súbela por FTP a tu hosting y verás como logras alcanzar el 100/100. Sin embargo, la página no te servirá de nada…

Por este motivo, es mejor no obsesionarse con esta métrica. Con alcanzar un 90% en Desktop y un 80% en mobile será más suficiente para considerar a tu página web como rápida.

¿Por qué es útil Page Speed Insight de Google?

Sencillo, porque cuanto mayor sea la nota, mejor cargará tu página web y mejor será tu posicionamiento web SEO .

Si tu página web es lenta a la hora de cargar esto repercutirá negativamente en el SEO de tu página web puesto que a los bots de Google les costará rastrear toda la página web y lo usuarios la abandonarán antes de tiempo (Aburridos por que la página web tarde tanto en cargar) aumentando así el porcentaje de rebote

Por este motivo, lo primero que tendrás que hacer será analizar la velocidad de carga de tu página web haciendo click aquí.

Guía paso a paso para conseguir el 100/100 en el Page Speed Insight de Google

Ahora si que si te voy a mostrar paso a paso como conseguir el 100/100 en el Page Speed Insight de Google:

Paso 1. Opta por una plantilla rápida

Ya he escrito mucho sobre las plantillas y su relevancia en términos de WPO. De hecho, si quieres conocer cuales son las plantillas SEO para WordPress por excelencia podrás encontrarlas aquí.

Lo que si que está claro es que si no utilizas una plantilla SEO para tu WordPress rápida y optimizada te será imposible conseguir el 100% en el Page Speed de Google.

En mi caso, siempre recomiendo GeneratePress ya que para mi es la mejor plantilla optimizada del mercado en cuando a velocidad de carga.

Paso 2. Instalación de un plugin de caché como WP Rocket

Se que el plugin WP Rocket para WordPress es de pago. Sin embargo, a día de hoy no he encontrado un mejor plugin de caché que este para alcanzar la mejor nota posible en el Page Speed de Google.

Con WP Rocket bastará con activar casi todas las opciones que vienen por defecto en el plugin para que automáticamente tu página web vuele (Ten cuidado al activar todo ya que puede romper tu página web si lo ahces sin control).

Entre las mejores cualidades de WP Rocket se encuentran:

  • La activación de caché para todos los archivos de la página web. Esto lo que hará es que una vez el usuario entre por primera vez en tu página web su navegador almacene archivos fijos para no tenerlos que cargar de nuevo por cada URL.
  • Reducción y compresión de archivos JS, CSS y HTML. Con esta opción reducirás SIGNIFICATIVAMENTE el número de peticiones al servidor por URL haciendo tu página web más ligera.
  • Alojamiento de Google Analytics en local. Con esta opción dejarás de cargar el pesado script de Google Analytics de forma externa y lo alojarás en local mejorando tu WPO.

css3, javascrip y wordpress

Paso 3. Reducir al máximo el número de plugins

Cuantos más plugins utilices en tu WordPress más lenta será de cargar tu página web y peor será tu nota en Page Speed Insight.

Por lo tanto, aplica siempre la regla de “Less is more” y utiliza el menor número de plugins posible para crear tu página web WordPress. Con ello, te ahorrarás incompatibilidades y ralentizaciones de carga innecesarias.

Paso 4. Aloja tus fuentes de forma local

Las fuentes o tipografías de una página web siempre son un punto de ruptura con la velocidad de la página web.

Cuantos más tipos de fuentes en tus diseños web WordPress más lenta será tu página web.

Por lo tanto, utiliza como máximo dos tipografías diferentes y carga solo aquellos estilos que vayas a utilizar dentro de ellas. Es decir, si solo vas a utilizar la normal y la negrita no cargues también la tipografía de 300, de 500 y de 700.

Toda buena plantilla de WordPress debería de darte la opción de cargar solo aquellas fuentes que vayas a utilizar. Por este motivo, yo siempre utilizo GeneratePress por que entre otras cosas me facilita tareas como esta.

Una vez hecho esto también tendrás que comprar el plugin Self-Hosted Google Fonts Pro.

Con el instalado bastará con activarlo con todas las opciones por defecto y, elegir complementariamente la opción Font Display Behavior > Swap.

Una vez hecho esto, podrás pasar al siguiente paso ya que tendrás optimizadas todas las fuentes de tu página web.

self hosted fonts captura plugin

Paso 5. Suprime o limita el número de iconos por URL

Todos los iconos de fontawesome y similares lo único que hacen son peticiones externas a otros recursos externos ralentizando tu velocidad de carga.

Por lo tanto, intenta limitar al máximo su uso y, en la medida de lo posible, intenta no utilizarlos por mucho que queden muy bonitos de cara al usuario.

Paso 6. Optimiza tus imágenes

Todas las imágenes que subas a tu página web no han de superar los 100kb de peso independientemente de sus dimensiones. Si lo superan estarás sobrecargando el peso por URL de tu página web de forma innecesaria.

Si quieres optimizar en modo masivo todas las imágenes de tu página web yo te recomiendo el plugin Imagify que es de los creadores de WP Rocket.

Este plugin garantiza una reducción significativa de peso en todas la imágenes de tu página web sin perder su calidad.

imagify

Paso 7. Baja todos tus Scripts al footer

Una vez llegado a este paso deberás instalar el plugin Scripts to Footer.

Con este plugin lo que harás será trasladar todos los scripts que se encuentran en el header de tu página web hacia el footer para que estos carguen los últimos y así no ralentizan la velocidad de carga de tu página web.

PD. Si instalas este plugin después de WP Rocket por regla general no entrará en conflicto con el pero si lo haces al revés si. Por lo tanto, sigue el orden de instalación y activación a rajatabla.

Paso 8. Utiliza solo los maquetadores visuales donde los necesites

Todo el mundo sabe que maquetadores visuales como Elementor ayudan a crear páginas web impresionantes y muy impactantes a nivel visual.

Sin embargo, cuanto menos se utilicen y más se use la plantilla de tu WordPress por defecto mejor será tu puntuación en el Page Speed de Google.

Por este motivo, plantéate que URLs de tu página web necesitan si o si un diseño bonito a base de maquetadores visuales y que páginas pueden prescindir de ellos para ser más ligeras.

Al final, ambas opciones son válidas pero han de aplicarse con cabeza. Como siempre en el punto medio estará la clave.

PD. Con esto no quiero decir que toda página web con Elementor sea pesada. De hecho, este plugin funciona perfectamente con WP Rocket haciendo páginas web rápidas (Como la mía ya que yo uso Elementor en ella). No obstante, si no se utiliza este plugin mejorará aún más tu puntuación en el PageSpeed Insight de Google.

Conclusiones

Cómo has podido ver al inicio de este post, conseguir el 100% en el Page Speed de Google no es tan importante como habías pensado en inicialmente. Si no recuerda el ejemplo de la página en blanco…

Por este motivo, lo importante siempre será que tu página web cargue rápidamente y que esta medición sea real y completa (Esto lo conseguirás con Pingdom Tools o GTMetrix) para obtener unas conclusiones reales de la velocidad de carga de tu página web.

Por lo tanto, no te obsesiones con el Page Speed y céntrate en contratar un buen hosting , utilizar el menor número de plugins posible, utilizar plugins de WPO y comprar una plantilla de WordPress optimizada para SEO.

¡Hasta la próxima!

borja aranda vaquero consultor seo

Artículo escrito por:

Borja Aranda Vaquero

Propietario de este bonito blog sobre SEO, WordPress y diseño web. Mi intención es ayudar a empresas y emprendedores a conseguir las primeras posiciones en Google con el fin de que generen nuevos ingresos y clientes a través de internet.

5 comentarios en “Page Speed Insight de Google [Guía para conseguir el 100/100]”

  1. Borja, veo que tu web está muy bien de cara a Page Speed, sin embargo, al ingresar en el administrador de archivos en mi hosting, y editar htaccess cuando pego los códigos que dejas en este post mi sitio da un error 500 y no carga. ¿Como puedo hacer para mejorar mi sitio amigo?

  2. Prueba a plasmar estos dos códigos en tu htaccess y me cuentas 😉

    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler^cgi-script$
    mod_gzip_item_include mime^text/.*
    mod_gzip_item_include mime^application/x-javascript.*
    mod_gzip_item_exclude mime^image/.*
    mod_gzip_item_exclude rspheader^Content-Encoding:.*gzip.*

    ExpiresActive On
    ExpiresDefault “access plus 10 days”
    ExpiresByType text/css “access plus 1 week”
    ExpiresByType text/plain “access plus 1 week”
    ExpiresByType image/gif “access plus 1 month”
    ExpiresByType image/png “access plus 1 month”
    ExpiresByType image/jpeg “access plus 1 month”
    ExpiresByType image/x-icon “access plus 3 months”
    ExpiresByType application/x-javascript “access plus 1 month”
    ExpiresByType application/javascript “access plus 1 week”
    ExpiresByType text/javascript “access plus 1 week”
    ExpiresByType application/x-icon “access plus 3 months”

    • y elimina los otros que te dan un error por cierto! Siempre antes de modificar cualquier archivo delicado de este tipo es recomendable guardarse una copia original para no tener problemas y poder volver siempre atrás

  3. Yo desarrolle dos plantillas para blogger, y tienen el 100/100 así ponga imágenes pesadas, no se pierde la puntuación, gracias a el CSS Sprite. Minificar los java script y aumentar los CSS que son mas livianos. O también pueden probar mover los java script que se carguen al final de la página, aunque así queda rara la página.

    • Hola Adovis, las imágenes son fundamentales para la velocidad de carga de una página web, si no se optimizan la puntuación quedará comprometida.
      Por otro lado estoy de acuerdo con todo lo que dices sobre JavaScript cuanto menos mejor.
      Un saludo Adovis y gracias por comentar

Los comentarios están cerrados.

Responsable: Borja Aranda Vaquero

Finalidad: Moderar y responder comentarios de usuarios

Legitimación : Consentimiento.

Destinatarios: Todos tus datos los guardará Disqus. Mi sistema de comentarios (Acogido al acuerdo de seguridad EU-US Privacy). 

Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal [@] borjaarandavaquero.com así como el derecho a presentar una reclamación ante una autoridad de control.

Información adicional: En la Política de Privacidad de borjaarandavaquero.com,  encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

suscribirse al blog

¿TE GUSTA EL CONTENIDO?

¡Súscríbete y no te pierdas ni uno más!

+ 2 Ebooks SEO DE REGALO