Hace un par de semanas encontré un artículo muy interesante en Torque donde explicaban cinco pasos para reducir el tiempo de carga de WordPress a menos de 2 segundos. Como supongo que a ti también te interesa optimizar la velocidad de tu web, y teniendo en cuenta que los trucos que explican en el artículo enlazado son muy sencillitos, he pensado que sería interesante reproducirlos en nuestra web para que cualquier principiante que no domine el inglés los tenga a su alcance.
1. Utiliza un servicio de hosting decente
El primer paso a realizar cuando quieres mejorar la velocidad de tu WordPress consiste en seleccionar un servicio de hosting decente. Utilizar un buen servicio de hosting, que esté correctamente configurado y optimizado para trabajar con instalaciones WordPress, es una de las formas más sencillas de garantizar una mejor experiencia de usuario.
Ya hemos visto en entradas anteriores la importancia que tiene escoger un buen servicio de hosting y lo que hay que tener en cuenta para hacerlo correctamente. Entre los motivos que Gerard nos explicó estaba, precisamente, el de la velocidad. Algunos ejemplos de empresas son WPEngine, WP Radius, Flywheel o Pantheon.
Estos proveedores de hosting no te ofrecerán sus servicios por 3€ al mes; la estabilidad, eficiencia y calidad se pagan, pero sin duda sale a cuenta. ¡Ah, por cierto! Por si te lo preguntas, en WPrincipiante usamos WPEngine ?.
2. Optimiza las imágenes
Uno de los principales motivos por los que la velocidad de una web es baja son las imágenes. Si tus páginas o entradas incluyen imágenes grandes y de mucha calidad, es muy probable que tu WordPress tarde bastante más de dos segundos en cargar.
Por suerte, es posible reducir el tamaño «físico» de las imágenes y comprimirlas para que pesen menos, sin tener que sacrificar apenas calidad. Y, por supuesto, reducir su peso te ayudará a reducir también esos tiempos de carga que tanto te preocupan.
En WordPress existen varios plugins para optimizar las imágenes en WordPress. En el artículo original de Torque, el autor nos recomienda EWWW Image Optimizer. Cada vez que subas una imagen a tu biblioteca de medios, ésta se optimizará para tu web. Además, también le puedes decir que optimice todas las imágenes que ya habías subido antes de instalar el plugin, así como las imágenes que utilizan tus plugins y tema.
Aunque el plugin es gratis, optimizar cada imagen tiene un pequeño coste, puesto que se realiza en los servidores de la empresa detrás del plugin. Estamos hablando de costes muy, muy pequeños: 0,005 dólares las primeras 1.000 imágenes… Bastante asequible, ¿no crees?
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
3. «Minificar» y concatenar
De forma análoga a las imágenes, los ficheros que tu web tiene que cargar tienen un impacto en el tiempo de carga. Estos ficheros consisten en, principalmente, hojas de estilo CSS y ficheros JavaScript. Aunque en principio debería haber pocos de estos, la cantidad de ficheros aumenta rápidamente a medida que instalas plugins, puesto que cada uno incluye los suyos propios. ¿Cómo mejoramos esto?
Existen dos formas complementarias de optimizar la carga de ficheros CSS y JavaScript: «minificar» y concatenar.
Minificar consiste en reducir el número de caracteres innecesarios que tienen los ficheros. Es decir, se eliminan comentarios, así como caracteres inútiles (por ejemplo, espacios y saltos de línea) y se reducen los nombres de variables y funciones. Así, un fichero JavaScript con el siguiente contenido:
(function( $ ) {
var variable = 3;
function nombreFunction() {
$( '#selector' ).html( variable );
}//end nombreFunction()
})( jQuery );
se convierte en:
(function(a){var b=3;function c(){a('#selector').html(b)}})(jQuery)Sin duda, menos «amigable» para las personas, pero mucho más cortito que la versión original.
La otra opción es concatenar diferentes ficheros en uno solo. De esta forma, en lugar de tener que hacer dos peticiones para cargar los ficheros a.css y b.css, bastará con realizar una única petición que cargue el fichero a-y-b.css.
De nuevo, puedes utilizar un plugin para minificar y concatenar ficheros CSS y JavaScript. Autoptimize es uno de los plugins más usados para ello y, entre otras cosas, te permite excluir ciertos ficheros del proceso.
Aviso. Hay algo importante que debes tener en cuenta. Es posible que si concatenas tus ficheros JavaScript, tu web deje de funcionar (lo he visto en algunos de nuestros clientes). Lo que pasa es bastante sencillo: cuando hay un error en un fichero JavaScript (por ejemplo, error.js), tu navegador web deja de interpretar (ejecutar) ese fichero en concreto. Sin embargo, los demás ficheros de tu web (por ejemplo, mola.js) sí se ejecutarán con normalidad.
Cuando concatenas todos los ficheros en uno sólo, el navegador web ya no cargará los ficheros error.js y mola.js, sino que cargará, como hemos visto, un único fichero llamado error-y-mola.js. Cuando ejecute el contenido de ese fichero, empezará interpretando el código que teníamos en error.js y, como contiene un error, fallará sin llegar a ejecutar el código de mola.js.
Así que, ya sabes, si usas un plugin para minificar y concatenar y las cosas dejan de funcionar, comprueba que no haya errores usando la consola JavaScript de tu navegador.
4. Optimizando lo primero que se ve
Aquí, en realidad, no estamos mejorando la velocidad de carga de la página, sino la sensación de velocidad (que para el caso es lo mismo).
Cuando una página web se está cargando, el contenido se carga en un cierto orden. Lo normal es que las cosas se carguen en el orden en que aparecen en tu página, pero no siempre es así; hay veces en que el contenido que se está cargando está por debajo del scroll, haciendo que lo que es directamente visible por tus usuarios esté a medio cargar.
Si esto te parece un poco difícil de entender, haz la siguiente prueba. Vuelve a abrir esta entrada en una pestaña nueva. Verás que la imagen destacada tarda un poquito en aparecer (dando la sensación que la página aún no está lista), aunque el contenido de la entrada (lo que de verdad te interesa) esté disponible instantáneamente.
Bien, ahora que ya eres consciente de ello, hay que buscar fórmulas que nos permitan acelerar la velocidad de carga percibida. Una de las técnicas que nos explican en Torque es optimizar la hoja de estilos, para que el trozo de página que se ve nada más acceder a tu web se vea bien formateada. ¿Cómo?
Esta herramienta escanea la página que le indiques y, junto con el CSS de tu web, te indicará qué reglas CSS son las que deberías cargar lo antes posible (porque son las que se usan en esta primera porción de tu web). Una vez conoces esas reglas, las puedes meter directamente en tu web (inline CSS) con el mismo plugin Autoptimize y, así, la página se podrá formatear correctamente sin tener que esperar a que el fichero CSS se descargue y procese.
5. Utiliza una CDN
Finalmente, la solución que también ofrece resultados geniales es usar una CDN (Red de Distribución de Contenidos, por sus siglas en inglés). Una CDN es un servicio que, básicamente, almacena una copia de los ficheros en tu web (imágenes, ficheros CSS y JavaScript, etc) en sus servidores, los cuales tienen distribuidos por todo el mundo. Cuando alguien accede a tu web, todos esos contenidos ya no se tienen que cargar directamente de tu servidor, sino que se pueden cargar de uno de esos servidores, reduciendo la carga de tu propio servidor y aumentando la velocidad.
Ejemplos de servicios CDN son, por ejemplo, MaxCDN o CloudFlare. De hecho, uno de los módulos de Jetpack, Photon, implementa una CDN para la distribución de imágenes:
Optimiza y acelera automáticamente las imágenes mediante la red de entrega de contenido global WordPress.com. De este modo, te ahorrarás los costes de alojamiento al reducir el ancho de banda.
Resumiendo
Los consejos que hemos visto hoy para mejorar la velocidad de carga de tu web se pueden clasificar en dos grandes grupos:
- Más potencia y hardware. Si aumentas la potencia de tu servidor, usas un servicio de hosting mejor y/o confías en una CDN para disponer de una cache de tus contenidos, te será muy sencillo optimizar la velocidad de tu web.
- Reducir tamaño y número de ficheros. Si reduces la cantidad de datos que tienes que enviar a tus usuarios, a través de optimizar el contenido y, cuando sea posible, concatenarlo, también serás capaz de percibir una reducción en los tiempos de espera.
¿Conoces alguna otra técnica sencilla para mejorar la velocidad de WordPress? ¡Compártela con todos nosotros en los comentarios!
Imagen destacada de Gib3102.
Deja una respuesta