Hemos analizado con Álvaro Gómez Velasco los primeros pasos y mejoras al instalar WordPress; con Néstor Angulo de Ugarte los errores de seguridad más comunes en WordPress y con Víctor Salgado el GDPR, el nuevo reglamento de protección de datos que entró en vigor en toda la Unión Europea el pasado 25 de mayo. En esta ocasión, hemos contado con un nuevo profesional web de WordPress, Ignacio Cruz, WordPress Engineer en Human Made y uno de los encargados de dar forma a la edición 2018 de la WordCamp Madrid.
Acompañando a Mauricio Gelves, desarrollador freelance de WordPress y GoDaddy Pro Brand Evangelist, en este webinar Ignacio Cruz nos ofreció mucho contenido relacionado con las técnicas de WPO (Web Performance Optimization).
Qué aprendimos en el webinar “Una tarde para mejorar la velocidad de tu web (WPO)”
En este webinar Ignacio quiso aclarar algunos conceptos, resumidos en los siguientes puntos:
- La diferenciación entre WPO y WordPress
- Algunas herramientas de análisis para ver la velocidad de carga de una web
- Los problemas más comunes que pueden ralentizar la carga
- Algunos consejos en el proceso de desarrollo de un proyecto web
- Plugins para mejorar la velocidad de carga
Diferencia entre WPO y WordPress
Antes de nada, hicimos una breve introducción a WPO, que por definición es el proceso de optimización de una web para reducir su tiempo de carga, de forma que el rendimiento ofrecido, tanto a nivel usuario como a nivel de servidor, permita aumentar sus ingresos y reducir los costes operativos.
WPO no tiene nada que ver con WordPress. Mucha gente lo asocia porque WordPress es el CMS más utilizado, pero WPO es una metodología global, que afecta a todas las webs creadas en Internet.
Herramientas de análisis
También nos desveló algunas de las herramientas de análisis que él emplea para los proyectos web que gestiona y que son de las más importantes en la actualidad. Estas son:
- GTMetrix, que permite insertar la URL de la web que quieres analizar y te muestra los problemas de optimización. Permite emplear otras herramientas a la vez como Google Page Insights y proporciona una serie de consejos ordenados por puntuación de más a menos sobre las acciones a realizar en una web para mejorar su velocidad.
- Chrome DevTools, que aporta mucha información sobre los recursos e imágenes que se cargan en una URL. Funciona de forma similar a GTMetrix mostrando todos los archivos que tiene tu web y la procedencia de cada uno, sea interna o externa. La finalidad es ver si existen demasiados archivos que ralentizan la carga de tu proyecto.
- Webgrind, que sirve solamente en http con la principal función de analizar el código de una web a nivel local. Analiza la ejecución de PHP en local y muestra el número de veces que se ejecuta cada función, agrupando las funciones que trabajan entre sí.
Muchas veces es imposible alcanzar la perfección por la magnitud de ciertos objetivos, aunque en muchas ocasiones la presión de trabajar para terceras personas te exija llegar al 100% de optimización.
Problemas más comunes que pueden ralentizar la carga
En cuanto a los problemas más comunes que aparecen en WPO, Ignacio nos desveló algunos de los que se ha encontrado hasta la fecha. Empezó hablando de distintas formas de trabajar con la minificación de JS y CSS a través de herramientas específicas o con plugins especializados, aunque son tareas complicadas que requieren cierta experiencia para sacarlas adelante.
A continuación el énfasis se centró en cómo trabajar con JavaScript Defer y Async, dos métodos para aligerar la carga de una web rastreando las partes de la misma y mostrándolas al usuario lo antes posible. En tercer lugar vimos cómo concatenar JavaScript y CSS teniendo en cuenta que se debe analizar cada proyecto para saber lo más adecuado a aplicar y por último trabajar con JS y CSS crítico, de forma que se consiga eliminar el código que bloquea la visualización de la parte superior de una página.
Es un concepto que cuesta entender y sin embargo es fundamental porque supone trabajar en lo primero que ve un usuario cuando entra en una web, el primer pantallazo disponible.
Otro punto importante que Ignacio Cruz no quiso dejar sin revisar es el de la optimización de imágenes. Lo más frecuente es emplear plugins para esta función, una de las más importantes en técnicas WPO de la que dependen el resto. WordPress ya facilita mucho la labor, pero en ocasiones debemos dar un paso más allá reduciendo el tamaño de las imágenes sin que estas pierdan calidad, siempre teniendo en cuenta el tipo de archivo usado (PNG, JPEG, GIF…).
Consejos en el desarrollo de una web
Ante todo se debe evitar realizar actualizaciones o eliminación de datos en las bases de datos en frontend. Si se edita de esta forma, es posible caer en más lentitud de carga de una web.
Otro truco muy útil es trabajar con las etiquetas condicionales en WordPress para controlar qué queremos que se cargue en una web y lo que no.
Algunos plugins para mejorar la velocidad de carga
Para cerrar el webinar, Ignacio habló sobre algunos plugins que puedan ayudar a mejorar la velocidad de carga. En concreto vimos estos:
- WP Hummingrbird o WP Rocket, dos plugins muy completos en cuanto a las funcionalidades que incluyen (test de rendimiento, compresión Gzip, limpieza de base datos, etc.)
- Smush, como plugin ideal para optimizar y comprimir hasta 100 imágenes en su versión gratuita
- Query Monitor, que permite ver errores y qué procesos están duplicados en la base de datos
Conclusión
Hacer que tus páginas web carguen lo más rápido posible no es fácil en absoluto. Es necesario tener bajo control numerosas tareas y no dejar de monitorizarlas para que todo funcione como esperas. Hemos visto algunas herramientas que pueden reducir tu carga de trabajo, pero hay muchas más disponibles en la red. Analiza qué necesitas para darle a tus clientes la calidad que se merecen.
Con este webinar, el programa gratuito de GoDaddy Pro sigue creciendo con más contenidos que complementan a las herramientas exclusivas y gratuitas como Pro Sites o Clientes Pro, dirigidas a aquellos profesionales web que quieren gestionar muchos proyectos simultáneamente de forma sencilla y segura.
