Google PageSpeed Insights, consigue matrícula de honor

Velocidad-carga-wordpress-google-pagespeed-insights

Comprobar la velocidad de carga de tu página web mediante herramientas como Google PageSpeed Insights o Pingdom resulta de gran utilidad para ayudarte a acelerar WordPress. No obstante, si bien es una buena idea optimizar ciertos parámetros para optimizar la velocidad de WordPress, no deberías obsesionarte con las métricas.

velocidad-carga

Mi página web es un ejemplo de lo que comento. Como puedes comprobar las métricas son sobresalientes, pero no logra la máxima puntuación en todos y cada uno de los parámetros analizados . ¿Por qué? Porque para lograr la máxima puntuación debería renunciar a una serie de elementos gráficos que no estoy dispuesto a sacrificar en aras de una mejor calificación.

Mejorar Google PageSpeed Insights en WordPress

Todos estamos de acuerdo en lo sencillo que resulta lanzar nuestro proyecto con ayuda de WordPress. Tambien coincidiremos que, desde el punto de vista del desarrollador, no es el gestor de contenidos más rápido del mundo. La instalación de ciertos plugins tampoco ayuda. Es por ello que para optimizar la velocidad de carga en WordPress tenemos que hilar muy fino.

Aclarado esto, a continuación voy a mostrarte los pasos necesarios para lograr una matrícula de honor (100/100) en Google PageSpeed Insights. 

 

Puntuación 100/100 en Google PageSpeed Insights

Para esta prueba de optimización hemos utilizado el tema de moda: Genesis Framework.

1.- Reducir el tiempo de respuesta del servidor

Al igual que comentábamos en nuestro artículo sobre seguridad en WordPress, la elección de un hosting de calidad es fundamental.

El simple hecho de alojar tu web en un servicio de alojamiento contrastado solucionará muchos de los posibles problemas.

Consigue un 20% de descuento en cualquier pack de Webempresa siguiendo este link y aplicando el código gracias20.

Para un análisis pormenorizado de las dos mejores alternativas para alojar tu web, recomiendo la lectura Webempresa vs Raiola Networks.

2.- Optimizar imágenes

Unos de los errores más comunes y a la vez más sencillos de corregir es la optimización de imágenes.

Optimizar imágenes para Google SpeedTest

Para evitar este error deberemos optimizar las imágenes antes de subirlas al servidor mediante programas de escritorio como Gimp (gratis) o Photoshop (de pago), recurrir a servicios web gratuitos como webresizer o utilizar plugins para optimizar imágenes como Smush it o EWWW.

La gran ventaja de los plugins es que te permiten la compresión de varios archivos en bloque.

Si una vez subidas las imágenes el error permanece, podrás descargar desde la propia web una versión optimizada de las mismas.

3.- Minificar Javascript, CSS y HTML

Google PageSpeed Insights nos sugiere minificar nuestros archivos Javascript, CSS y HTML. Para solucionar este problema recurriremos a un plugin ligero y todoterreno llamado Autoptimize.

Autoptimize es un plugin para optimizar WordPress que funciona de maravilla. Únicamente deberás marcar la siguientes opciones en el menú de configuración:

  • Optimize HTML code
  • Optimize Javascript code
  • Optimize CSS code

4.- Habilitar compresión Gzip

Todos los servicios de hosting compartido de Raiola Networks y Webempresa tienen habilitado la compresión Gzip por defecto. A continuación vamos a detallar los pasos para activar la compresión Gzip en tu servidor.

Servidores Apache

Para habilitar la compresión deberás añadir a tu archivo .htaccess las siguientes líneas de código.

Si tienes la suerte de contar con CPanel, puedes hacerlo mediante una interfaz gráfica.

Dirígete a la sección software, haz click en optimizar sitio web y selecciona la opción “comprimir todo el contenido”.

Servidores Nginx

Añadimos las siguientes líneas de código, pero esta vez en el archivo nginx.conf.

5.- Especificar caché del navegador

Google PageSpeed Insights te advierte que debes especificar el caché del navegador.

Añadiremos el siguiente código a nuestro archivo .htaccess

Si queremos hilar más fino y asignar el tiempo que cada tipo de archivo será almacenado en caché, utilizaremos el siguiente código en lugar del anterior:

¿Alojado en un servidor Nginx? También hay un código para ti.

6.- Eliminar el Javascript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Ahora llega el turno de solucionar el bloqueo que producen ciertos Javascript y CSS en la mitad superior de la página.

Existen tres escenarios que tenemos que abordar para solucionar el problema.

Archivos Javascript y CSS

Para optimizar la entrega de los archivos Javascript y CSS haremos una configuración adicional mediante el plugin Autoptimize. Los pasos a seguir son los siguientes:

  • Desmarcar la opción “Force JavaScript in <head>?” en las opciones de JavaScript.
  • Marcar la opción “Combina todos los CSS en un solo archivo para mejorar el rendimiento de carga, aunque también podría ralentizarse en los dispositivos móviles” en las opciones de CSS.

Fuentes de Google

Por defecto WordPress utiliza un hook llamado wp_enqueue_scripts que carga la fuente en el header, provocando el bloqueo.

Una manera sencilla de solucionar esto es instalando el plugin Disable Google Fonts e incluyendo el siguiente código en el footer:

Otra posibilidad es cargar de forma asíncrona las fuentes de mediante Web Font Loader, del propio Google.

Si nuestra plantilla no hace uso de las fuentes de Google no será necesario la instalación de ningún plugin. Únicamente tendrás que asegurarte de que las fuentes carguen desde el footer.

Google Analytics

Este error es bastante curioso ya que viene de un script de Google, más concretamente Analytics.

Para solucionar este pequeño gran problema te voy a proponer dos soluciones:

  • La primera y más obvia es descargarte el archivo analytics.js a tu propio servidor . El problema principal de este método son las actualizaciones. El propio Google no recomienda esta solución (ni ofrece alternativa alguna).
  • La segunda opción es descargar de GitHub a tu servidor una versión cacheable de Google Analytics, cortesía de thejunkland.com. También es posible su instalación añadiendo el siguiente código en el footer:

Entiendo que, a pesar de las reticencias de Google para ofrecer una solución a un problema que ellos mismos han creado, acabarán ofreciendo una respuesta.

Te recomiendo que visites en artículo en unos meses para ver si existe una respuesta oficial desde Mountain View.

Conclusión

Como habrás podido observar, sin un tema adecuado y un servicio de hosting de calidad, es muy complicado optimizar correctamente tu web.

El objetivo de este tutorial es ayudarte en el análisis de tu página y mostrarte cómo hacer que cargue más rápido. En ningún caso te recomiendo que te obsesiones con lograr la máxima puntuación. Ni es recomendable (tendrías que renunciar a muchos elementos que aportan usabilidad y diseño), ni es posible en la mayoría de los temas.

Si crees que esta pequeña guía le puede resultar útil a alguien, te agradecería que la compartieras en tus redes sociales o blog.

 

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *