En la primera edición de la WordCamp Madrid he tenido la oportunidad de estrenarme como ponente en casa con la charla titulada Los 10 mandamientos del WPO en WordPress.
Aunque lleva entre nosotros mucho tiempo, en este 2017 se está hablando mucho sobre WPO (Web Performance Optimization). Son un conjunto de técnicas a cualquier nivel para mejorar el rendimiento y velocidad de carga de una página web. En esta charla hablé sobre los 10 puntos clave que debes cumplir si quieres que tu web vaya como un tiro.
Lo primero que hice es aclarar que WPO no es inherente a WordPress, que las siglas pueden confundir a alguien que no sepa lo que significa. También aclaré que no es instalar 3 ó 4 plugins y listo. Cierto que algunos plugins nos pueden ayudar, pero no podemos quedarnos en esa superficialidad.
Y aunque el WPO no sea exclusivo de WordPress si que enfoqué la charla a cómo hacer WPO en WordPress. Sin más, estos son los 10 mandamientos para que tu web esté optimizada y cargue rápido:
Auditoría WPO de nuestro sitio
Antes de nada, lo primero es analizar cómo está nuestro sitio en términos de WPO. Afortunadamente disponemos de muchas herramientas para analizar el rendimiento de nuestro sitio y obtener una idea de los puntos a mejorar:
- Google PageSpeed Insights
- GTmetrix
- Pingdom Tools
- WebPageTest
1. Optimizarás las imágenes sobre todas las cosas
Optimizar las imágenes es un punto crucial en el peso final de la página web. Cuanto más optimizadas estén nuestras imágenes (en tamaño y en calidad), menos pesará nuestra web y más rápido cargará. No hay más misterio, es así de simple.
Hoy en día cualquier cámara réflex e incluso ya muchos móviles hacen fotografías a una resolución brutal. Para web no necesitamos ni esos tamaños ni esos pesos, ya que incurriríamos en un doble error:
- Escalado de imágenes: hay que cerciorarse de no utilizar proporciones superiores a lo que realmente necesitamos según nuestro diseño. Es decir, probablemente en nuestro sitio no necesitemos imágenes superiores a 1024 píxeles de ancho, por lo tanto no tiene sentido subir imágenes de tamaño superior a 1024 ya que pesarán más.
- Una imagen original de una réflex o un móvil de última generación puede pesar varios megas. Si la optimizamos lo normal es conseguir imágenes entre 70 ó 120 KB, con lo que conseguiremos acelerar la velocidad de carga de nuestro sitio.
Hace unos días escribí una entrada sobre cómo optimizar imágenes en nuestro WordPress. Ahí podrás encontrar información más detallada.
2. LazyLoad, no cargarás contenido en vano
LazyLoad es una técnica para evitar mostrar cierto tipo de contenido (imágenes, vídeos, frames) hasta que no lleguemos a él haciendo scroll. Es decir, todo este contenido que se encuentre fuera del viewport o área visible de la web cuando iniciamos la navegación no será cargado. Sólo se cargará cuando lleguemos a él haciendo scroll.
El uso de esta técnica nos hará ganar mucho tiempo y la experiencia de usuario será mejor, sobretodo en móviles donde el viewport es menor y se queda más contenido fuera del área visible de la pantalla.
Para más información sobre esta técnica te invito a leer el artículo que escribí sobre Lazy Load.
3. Minificarás los CSS, JS y HTML
La minificación de recursos estáticos como archivos CSS, JS o el propio HTML de nuestra web nos hará mejorar la velocidad de carga de nuestro sitio. Un archivo minificado ocupa menos espacio que el original, por lo tanto se traduce en menos peso a cargar.
La reducción de varios KB, aunque sean pocos, siempre jugará en nuestro favor, por lo tanto es una consideración a tener en cuenta para acelerar nuestro sitio. Hace unos días escribí un post sobre cómo y porqué minificar los recursos estáticos.
Ejemplo de librerías comunes, pesos de versión de desarrollo y versión minificada:
| Recurso | Development | Minified |
| Font Awesome 4.7.0 | 37KB | 31KB |
| Bootstrap 3.3.7 CSS | 143KB | 119KB |
| Bootstrap 3.3.7 JS | 69KB | 37KB |
| jQuery 3.2.1 | 262KB | 85KB |
4. Utilizarás correctamente la caché
Un plugin de caché (WP Super Cache, W3 Total Cache, WP Rocket…) puede ayudarnos a mejorar la velocidad de nuestra web y mejorar nuestro WPO:
- Especificar caché de navegador (Caducidad recursos estáticos)
- Habilitar la compresión (gZIP/deflate)
- Minificar recursos estáticos
- La web se sirve más rápidamente
- Ahorro ancho de banda / transferencia. Menor sobrecarga servidor
- Ojo con cachear formularios y/o páginas dinámicas
Esto plugins entre otras cosas hacen un planchado del HTML. No hay nada que cargue más rápido que el HTML, evitando la construcción dinámica y las consultas a base de datos.
5. No contratarás hostings baratos
Es curioso que si haces una búsqueda en google con la palabra «hosting», las primeras coincidencias en el autocompletado son «barato», «gratis», etc…
Huid de los hosting baratos y/o gratuitos. Más si vuestra web es vuestra herramienta o carta de presentación. Por experiencia, un hosting barato y/o gratuito no va a darte más que problemas y disgustos…y la diferencia con un hosting de calidad es de 3 ó 4 euros al mes!!
Así que busca, pide opiniones, infórmate bien y contrata un hosting de calidad y que te ofrezca la última tecnología: almacenamiento SSD, PHP7, HTTP/2, SSL, etc… lo que hará que tu web vuele
6. No bloquearás con JS y CSS la visualización del contenido de la mitad superior de la página
Este punto es quizá el que más alerta o pánico crea cuando pasas un test online tipo PageSpeed. Básicamente lo que te dice es que tienes recursos CSS o JS en el primer área visible de la página. Nada grave, y nada que afecte al tiempo de carga en sí.
Sin embargo es algo que puede afectar a la percepción que el usuario tiene de la carga de la página.
Respecto a los JS la solución es más o menos sencilla, simplemente la recomendación es cargar los scripts en el footer. En una entrada que escribí hace unos días puedes encontrar más información sobre cómo eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página.
Respecto a los CSS la solución es un poco más compleja y en algunos casos como por ejemplo si utilizas Google Fonts, la solución tiene ciertos inconvenientes como la aparición del FOUT (Flash Of Unstyled Text). En una entrada que escribí hace unos días puedes encontrar más información sobre cómo eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página.
7. Cargarás condicionalmente las librerías/recursos y utilizarás solamente lo necesario
La carga condicional de librerías o recursos es algo fundamental dentro de la estrategia WPO. Si en alguna plantilla de nuestro sitio no utilizamos algún recurso, o dicho de otro modo: si sólo utilizamos ciertos recursos/librerías en plantillas concretas, ¿para qué cargarlas en todo el sitio?
Esto se explica mejor con un ejemplo. Si utilizas un plugin como Disqus que se utiliza para externalizar los comentarios en tu web, ¿para qué cargarlo en la home o en una página que no tenga los comentarios activados por ejemplo?
De este modo reduciremos el peso de la página en aquellos templates donde este recurso no es necesario, y por lo tanto la velocidad de carga será mejor. Puedes encontrar más información en un post que escribí hace unos días sobre carga condicional de JS y CSS para mejorar el rendimiento y la velocidad de carga.
Pon un if en tu vida
Pablo López
8. Optimizarás el código
No hay duda que el rendimiento de un código bien optimizado es superior a snippets que se pierden entre consultas a BBDD, bucles enormes, ejecución cuando no toca, etc…
Por lo tanto antes de lanzarte a programar, dedica un tiempo a analizar cual es la mejor manera y más óptima de hacerlo:
- Nombres de las variables y clases
- Optimizar las queries
- Cachear las queries
- Lógica Condicional
Incluso la nomenclatura de variables y clases juega un papel no importante pero sí lo suficiente como para detenerse a pensar en ello. Una clase que se llame myprefix-wrapper-list-products-items hará que nuestro CSS y HTML ocupe algo más de espacio que si buscamos algo más genérico como products-list. Estamos hablando de pocos bytes, pero extrapolado a las clases que puedes tener en toda la web pueden llegar a suponer varios KB. Otro granito de arena de la montaña.
9. Mantendrás limpia y optimizada tu base de datos
La base de datos es el motor de nuestro sitio. Desgraciadamente con el paso del tiempo puede llenarse de datos que no son necesarios: revisiones, contenido en papelera, opciones huérfanas, datos de plugins que ya no utilizamos, etc…
Por lo tanto es recomendable hacer labores de revisión y mantenimiento para eliminar todo aquello que ya no utilicemos:
- Controlar los plugins que hemos instalado/eliminado y nos han dejado sus tablas/datos
- Reducir el número de revisiones
- Eliminar los comentarios spam
- Opciones/transients
- Vaciar papelera
10. Utilizarás una CDN
El tiempo de carga es mayor cuanto más lejos está el servidor de Origen. Un visitante de Madrid que trate de acceder a una web alojada en Australia tendrá un tiempo de espera prolongado.
Una CDN minimiza el problema ya que te servirá el contenido estático (imágenes, CSS, JS) en múltiples servidores a lo largo del mundo. Estudia si para tu proyecto puede venirte bien una CDN, si vas a tener mucho contenido o un tráfico alto es algo que te va a ayudar a mejorar el rendimiento de tu web.
WPO en WordPress
EL WPO no es algo inherente a WordPress, aunque sí traté de darle este enfoque en esta charla. Sobre todo una serie de plugins para optimizar imágenes y cachear los contenidos y recursos estáticos. Si vas a aplicar estas técnicas en tu web te recomiendo que hagas varios test antes de empezar y otros tantos cuando finalices para poder evaluar la mejora.
Siempre aconsejo varios test y sacar una media porque los resultados pueden diferir por tema de disponibilidad del servidor, concurrencia alta, etc… y siempre la media de estos test te dará una cifra más real.
Pues estos son los 10 mandamientos de los que he hablado en la primera WordCamp Madrid. Espero que os haya gustado la charla. Aquí te dejo las slides:
Y aquí el vídeo de la ponencia:
Puede que también te interese
