Como logre puntaje 100 en pagespeed con WordPress

By | Enero 6, 2017

Voy a explicarte paso a paso como hice para lograr un puntaje 100 en pagespeed. Y también algunos trucos y consejos que seguramente te ayudarán a lograrlo.

Si estas leyendo esto seguramente ya sabes lo importante que es la velocidad de carga para ofrecer una buena experiencia de usuario y mejorar el SEO.

Según un estudio realizado por Akamai en el año 2009:

  •  47% de los usuarios esperan que una página web cargue en dos segundos o menos.
  •  40% de los usuarios no espera más de tres segundos a que cargue una página Web antes de abandonar el sitio.
  •  52% de los usuarios afirmó que son mas propensos a convertirse en visitantes recurrentes de paginas rápidas.

 %Post Title, %Post CategoryNo existe un tiempo de carga ideal. Aunque en general 2 segundos es un promedio aceptable para cualquier pagina.

Cada caso es distinto, la optimización depende de muchos factores.

El servidor donde este alojada la Web es uno de los más importantes. Hay servidores y servidores.

No todos son iguales y en algunos puede llegar a ser una tarea imposible lograr buen puntaje, mientras que en otros puede ser mucho más fácil.

Descarga aquí la hoja de trabajo en pdf para lograr puntaje 100 en Pagespeed

Siempre hay que tener en cuenta que el puntaje de Pagespeed es un valor relativo.

La velocidad de carga depende de muchos otros factores no contemplados en Pagespeed. Puedes tener un buen puntaje pero tu Web puede ser una tortuga.

Si realmente quieres mejorar la velocidad de carga de tu sitio Web, debes guiarte por otros datos más que el puntaje de pagespeed.

Optimizar una Web es un trabajo mucho más serio y complejo que esto.

Indice de contenidos

¿Porque Pagespeed?

Pagespeed Module

Como logré puntaje 100 en pagespeed con WordPress

Punto de partida

Analizando los resultados de Pagespeed

Las 10 reglas de pagespeed

Que hice para lograr puntaje 100 en pagespeed

CDN

Plugins instalados

Google Analytics y Google Adsense

Archivo htaccess

Configuración final

Conclusión

¿Porque PageSpeed?

Existen otras herramientas para medir la velocidad de carga de una pagina
Web, y por cierto algunas mucho mejores y más completas que PageSpeed.

Pero el puntaje de PagesPeed es el que tiene en cuenta GoogleBot para el posicionamiento en SERP.

Es por eso que me concentré en el puntaje en pagespeed, dejando de lado otras
herramientas como GTMetrix o Pingdom Tool.

Aunque eso no significa que las haya ignorado por completo.

Siempre es bueno utilizar varias herramientas para tener una visión más completa de los datos que obtenemos después de cada modificación en las configuraciones o cuando probamos un nuevo plugin.

Pagespeed Module

Lo primero que hice fue instalar el modulo de Pagespeed en mi servidor.

Bueno.. En realidad lo intente pero no pude ya que mi servidor no incluye ese modulo ni permite su instalación manual en el plan que tengo contratado con ellos.

El modulo de Pagespeed tiene todo lo necesario para acelerar un sitio Web, y es mucho mas efectivo que cualquier otro método.

Si tu servidor tiene instalado el modulo de Pagespeed o si te permite instalarlo, ese es el camino que debes seguir.

El modulo de Pagespeed tiene muchas funciones similares a lo que se puede lograr mediante el uso de plugins. Pero lo mejor es que funciona directamente desde el servidor.

Como logré puntaje 100 en pagespeed con WordPress

Punto de partida

La optimización la hice sobre una instalación limpia de WordPress con un tema gratuito simple y responsive.

Una instalación de WordPress alojada en el servicio de hosting que tengo contratado en Hostgator, que no es de los mejores. Es uno de los planes mas económicos.

El hecho de ser una Web nueva y casi sin contenido me facilito bastante las cosas.

Además no tiene demasiadas funcionalidades como sistema de registro de usuarios, plugins sociales, formularios, etc.

Cuando me propuse mejorar el puntaje pagespeed era de 74/100 para ordenadores y menos de 55/100 para móviles.

Analizando los resultados de Pagespeed

 %Post Title, %Post Category %Post Title, %Post Category

Lo que hice para conseguir puntaje 100 fue básicamente prestar atención a las sugerencias que el mismo pagespeed muestra cada vez que se corre un análisis.

Las sugerencias se refieren a 10 reglas que hay que cumplir para obtener el puntaje máximo.

Si alguna esta marcada en rojo significa que está afectando seriamente la velocidad de tu sitio Web. Es importante que lo soluciones.

Las marcadas en amarillo son reglas que puedes plantearte solucionar si es posible. Puedes tener un buen puntaje de todas formas aunque es recomendable que lo soluciones.

Y claro, las marcadas en verde han sido aprobadas. No tienes que hacer nada al respecto.

Las 10 reglas de pagespeed son:

1) Optimizar imágenes:

Todos sabemos que optimizar imágenes es una de las formas mas efectivas para mejorar la velocidad de carga.

La pregunta que debes hacerte antes que nada es ¿Realmente son necesarias todas las imágenes que tengo?

Si piensas que alguna esta de más o que no aporta nada al contenido, entonces elimínala.

Lo que hice para optimizar las pocas imágenes que tenia fue lo siguiente:

  • Edición:

Utilizo GIMP como editor de imágenes.

Con este editor, al igual que otros, es posible modificar el tamaño, brillo, contraste, saturación de colores y demás parámetros buscando que las imágenes ocupen la menor cantidad de bits posible.

Luego las exporté en formato jpg. Este formato en general es mas ligero que png pero en ocasiones no es recomendable usarlo.

Las opciones para optimizar imágenes antes de comprimirlas son muchas y no hay una que sea la ideal.

Te recomiendo leer esta guia de Google sobre optimizacion de imagenes antes de hacer nada.

  • Optimización y compresión online

Hay varias herramientas de optimización y compresion de imágenes online muy buenas. Yo use compressor.io

Hay otras que también te pueden servir y hasta puedes pasar tus imágenes por más de una herramienta para lograr mejores resultados.

  • Compresión en WordPress

Una vez que estés seguro que la imagen no se puede mejorar más y ya la hayas subido a tu WP, utilizas un plugin para optimizarla aún más.

He probado varios plugins para eso y al final me quedé con Compress JPEG & PNG images.

Es simple de usar y permite optimizar todas las imágenes de tu web con un solo click

2) Especificar caché de navegador

Uno de los primeros plugins que solía instalar en mis WordPress siempre fue W3 Total Cache o WP Super Cache.

Pues claro, un buen plugin de cache es imprescindible para la velocidad de carga. ¿o no?

Luego de esta experiencia ya no pienso así.

Es que muchos servidores ya cachean por defecto las paginas de sus clientes sin que lo sepan. Mas que nada para mejorar su propio rendimiento que para mejorar la velocidad de carga.

Ademas tenemos el CDN que también utiliza sistemas de cacheo.

También hay otros plugins que no son específicamente de cache pero lo hacen como parte de sus funciones.

Asíque la mejor opción para mi fue un plugin de cache bien simple y básico pero muy eficiente: El elegido es Comet Cache.

3) Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Esta regla es la más difícil de cumplir. Es donde todas las Webs se quedan trabadas.

Es que hay muchos recursos js y CSS que deben estar en la cabecera de la pagina si o si. De otra manera no pueden funcionar.

Pero hay algunas cosas que puedes hacer para solucionar esto sin ser un experto programador.

El plugin Defer CSS Addon for BWP Minify es un agregado del plugin Better WordPress Minify. como un plugin de un plugin.

Lo que hace es permitir mover los recursos js que se encuentran en la cabecera al footer y que sigan funcionando sin problemas.

En el caso de los CSS no es posible moverlos al footer. Pero se pueden suprimir.

Claro que con esto nos quedaríamos sin el CSS, lo que seguramente traería sus consecuencias.

Y aquí viene lo dificil, editar el archivo CSS de tu WordPress para lograr los mismos resultados de los archivos CSS que vamos a suprimir.

Es complicado, lo se. Pero tal vez no tengas que hacer nada de esto.

4) Minificar JavaScript

Minificar los códigos javascript significa comprimirlos para que ocupen menos espacio.

Esto se logra mediante la perfecta concatenación de js, html y cualquier otro recurso disponible.

Los programadores entenderán de lo que hablo.

Probé muchos plugins y al final me quede con tres que funcionan muy bien en conjunto: Fast Velocity Minify, Autoptimize y Better WordPress Minify

Este último es muy potente y es necesario para poder usar otro plugin muy importante. Defer CSS Addon for BWP Minify.

5) Minificar HTML

Los plugins anteriores hacen también este trabajo. Minificar el html es mucho mas fácil que hacerlo con javascript o CSS.

También hay otros plugin que puedes probar para esto.

Recuerda que estos son los que a mi me han funcionado.

Puede que en tu caso sea distinto

6) Minificar CSS

El plugin Defer CSS Addon for BWP Minify es basicamente un agregado de BWP Minify que se usa para minimizar código CSS.

Si un archivo CSS sigue molestando aun minificado, pues no queda otra opción que suprimirlo e intentar arreglarlo desde el editor de WordPress.

Aunque este plugin es muy eficiente y seguramente eso no será necesario.

7) Evita los redireccionamientos

Esta si que es fácil para un sitio Web nuevo o que no sea muy complejo.

La regla es bien clara. Evita las redirecciones de cualquier tipo. Ya sea en la pagina central o en cualquier otra pagina del sitio Web

8) Habilitar compresión

Esta regla se cumple con los plugin anteriores.

En caso que no te hayan funcionado, puedes buscar otro plugin mas especifico o puedes hacerlo agregando unas lineas de código al archivo htacces.

9) Prioriza el contenido visible

Difícilmente te marque esta regla como sugerencia.

La mayoría de los sitios Web la cumplen sin siquiera saberlo.

El contenido visible del que habla se trata de lo que se llama “above the fold”.

Lo que se vé a primera vista cuando se carga la pagina. La cabecera.

Esta regla se refiere a que no debe haber elementos en este sector que ralenticen la carga inicial de la pagina.

10) Reducir el tiempo de respuesta del servidor

Si tienes un buen servidor ni debes preocuparte por esto. Es seguro que no te aparecerá esta sugerencia.

Al correr el pagespeed algunas veces ves esta sugerencia y otras veces no, entonces tu servidor tiene una respuesta aceptable.

Si en cambio te aparece cada vez que haces un análisis, entonces tu servidor es lento.

No hay mucho que se pueda hacer en ese caso más que cambiarse de servidor.

Como dijimos al comienzo, el tiempo de respuesta del servidor es un factor determinante para la velocidad de carga de un sitio Web.

Si tu servidor es de baja calidad y no te ofrece un buen servicio, lo único que puedes hacer es dejarlo y buscar otro mejor.

Que hice para lograr puntaje 100 en pagespeed

Descarga aquí la hoja de trabajo en pdf para lograr puntaje 100 en Pagespeed

CDN

Utilizo el servicio gratuito de CDN cloudfare. Uno de los pocos que ofrecen un buen servicio totalmente gratis.

Es necesario crear una cuenta, registrar el sitio web y modificar los registros CNAME del dominio.

En tu cuenta de CDN es posible realizar algunas configuraciones, pero eso no impacta demasiado en el rendimiento.

Este CDN funciona perfecto si se instala el plugin del CDN. No hace falta hacer nada más.

Plugins instalados:

1) Comet Cache
2) Autoptimize
3) Better WordPress Minify
4) CloudFlare
5) Compress JPEG & PNG images
6) Defer CSS Addon for BWP Minify
7) Fast Velocity Minify
8) Clean Up Optimizer
9) BulletProof Security

Google Analytics y Google Adsense

Si usas Google Analyitics o tienes publicidad de Google Adsense en tu sitio Web, seguramente te aparecerán en la sugerencia de Especificar cache de navegador.

Estos dos recursos no pueden ser cacheados porque son dinámicos. Es decir que pueden cambiar en cualquier momento y dentro de cortos periodos de tiempo.

Por defecto se especifica un tiempo de expiración de 20 minutos para Google Adsense y de una hora para GA.

Esto parece no ser suficiente para cumplir con la regla.

En el caso de Adsense no hay nada que se pueda hacer.

Pero para el código de seguimiento de GA hay un truco que funciona sin mayores problemas.

GALITE es un script que te permite mover el código de seguimiento de GA al footer

Solo debes copiar el script y pegarlo justo antes de la etiqueta de cierre </body> . Seguramente la encontraras en el archivo footer en tu editor de código.

<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script>
<script>
var galite = galite || {};
galite.UA = 'UA-XXXXXX'; // Insert your tracking code here
</script>

Recuerda poner el ID de tu propiedad de GA en donde dice UA-XXXXXX.

Archivo htaccess

El archivo htaccess contiene una serie de configuraciones del servidor. Puede ser modificado automáticamente por el mismo WordPress o por algunos plugins.

En mi caso no fue necesario editarlo, pero puede que tengas que hacerlo para cumplir alguna de las reglas de pagespeed.

Atención. ¡Cualquier error en este archivo puede hacer que tu WordPress deje de funcionar! Siempre haz una copia de seguridad antes de modificarlo.

Configuración final

Bien, ahora que ya has logrado puntaje 100 en pagespeed, o al menos mejoraste todo lo posible y piensas que ya es suficiente. Es hora de terminar con las configuraciones de tus plugins.

Como ya debes saber, no es conveniente usar demasiados plugins en WordPress.

Esto puede sobrecargar tu Sitio Web, perjudicar la velocidad de carga y hasta el funcionamiento general.

Como dijimos antes. cada caso es diferente.

Lo que en algunos sitios puede hacer maravillas en otros puede que no tenga efecto alguno.

Esto se debe principalmente a la plantilla que estes usando, tu servidor y la configuracion general de tu sitio Web.

Si has instalado todos los plugins y los tienes activos tu pagina de plugins de WordPress habrá crecido bastante. Si no es así y ya tenias un montón de plugins instalados y activos estoy seguro que no lograste alcanzar puntaje 100.

Lo que haremos ahora es desactivar los plugins uno por uno haciendo un analisis en pagespeed cada vez.

De esa forma podrás estar seguro de cuales son los plugin que mejor funcionan para tu Web.

Empieza desactivando el plugin del CDN Cloudflare.

Luego puedes hacer lo mismo con Autoptimize, y alguno de los que sirven para minificar html, js y CSS.

Prueba distintas combinaciones de plugin.

Haz una evaluación cada vez que hagas un cambio y no te olvides de limpiar el cache cada vez.

También recuerda que no puedes hacer nada para mejorar la respuesta del servidor.

Si esa es la única sugerencia que ves has llegado al máximo puntaje posible.

En teoría, solo necesitas tres plugin:

  • Uno para hacer minify
  • Otro para cache
  • Y otro para optimizar imágenes

Una vez que ya tengas decidido con cuales plugin te quedaras, elimina los que no uses y limpia tu WordPress para que no quede rastro de ellos.

No temas probar con otros plugin y experimentar con las distintas configuraciones de los que decidiste usar.

Como ya dijimos antes. Cada caso es distinto.

No existe una configuración ideal que sirva para todos los sitios Web.

Conclusión

No vale la pena obsesionarse con el pagespeed, yo lo hice como un desafío.

Quería demostrarme a mi mismo que era posible y que podía hacerlo.

Costo mucho pero valió la pena el esfuerzo.

El resultado final realmente me sorprendió.

Honestamente nunca pensé que iba a lograr el puntaje ideal, como mucho pensaba llegar a 95 o tal vez un poco mas.

Aunque la realidad es que no han habido muchos cambios en mi Web luego de esto.

Ni me han llovido miles de visitas ni subí demasiadas posiciones en SERP.


Comparte tu experiencia en tu camino para lograr puntaje 100 en pagespeed.

¿Qué te ha funcionado y que no de lo que has leído aquí?

¿Has logrado llegar a 100?

Comenta tu caso para que otros puedan aprender.

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save