Prácticas recomendadas para mejorar la velocidad de tu WordPress
Desde hace un tiempo la velocidad de carga de un sitio web se ha convertido en un requisito necesario para las especificaciones de un proyecto web. Factores tan decisivos para el desempeño de un sitio web, como son la experiencia de compra, la retención de la visita y el posicionamiento en buscadores, dependen mucho de la velocidad de carga del sitio web. Esto hace necesario plantear la velocidad del sitio desde la primera fase de un proyecto web y proceder de manera continua, en la mejora de esta variable.
A continuación repasaré los prácticas básicas recomendadas para conseguir “adelgazar” un sitio web con WordPress, aunque muchos son aplicables a cualquier sitio web. A diferencia de otros aspectos de un sitio web, los factores que inciden en la velocidad, afectan a la parte “front-end”, como diseñadores y técnicos en UX, como al “back-end”, esto es administradores de servidores y sistemas. Esto explica que la disciplina de optimizar la velocidad de un sitio web, es compleja y requiere conocimientos sólidos en multitud de campos.
1. Como norma general, piensa que cada byte cuenta.
Es muy buena práctica partir de la idea de que “menos es más”. Plantea cada recurso que vas a introducir en la web con una simple pregunta, ¿Le aporta algo al usuario?. Cada elemento que introduces en una web necesita ser transmitido de un servidor web a un cliente, y aunque no lo parezca cada petición al servidor cuenta. Coloca en tu mente la idea de que el usuario navegará desde un móvil sencillo con una conexión a internet algo justa y no desde una computadora de escritorio con una pantalla de 26″ y banda ancha.
Absolutamente recomendable es la web y la presentación de Brad Frost (en inglés) sobre la excesiva recarga en los sitios webs y que tiene el directo nombre de Death to Bullshit
2. Optimiza las imágenes al máximo.
Ahora que sabes las imágenes que necesitas para tu web, utiliza los tamaños justos y las dimensiones correctas. Si la imagen nunca va escalar mucho, no coloques una imagen de 2300x1500px cuando nunca llegará a esas dimensiones en pantalla. Reduce el tamaño y optimiza para web (72ppp y al mínimo de calidad que tolere la imagen). Ten presente que WordPress fuerza una compresión adicional a cada imagen que subes a la biblioteca (también se puede desactivar), así que no te pases. Como norma, cuanto menos pese mejor. Tamaños superiores a 100KB, deben hacerte sospechar.
Casi todos los programas profesionales de edición de imágenes permiten guardar optimizando para web y existen otros programas (muchos gratuitos) para optimizar imágenes en todas las plataformas. Un plugin para WordPress es WP Smush que realiza esta tarea automáticamente sin intervención del usuario, aunque considero que es mejor tener un hábito para estas tareas. Por supuesto los completísimos gestores de tareas como Grunt o Gulp disponen de muchísimos módulos que automatizan estas tareas, aunque implican un conocimiento alto para usarse.
3. Presta mucha atención a la cabecera de tu sitio web.
Analiza el contenido de la cabecera de tu sitio web en busca de recursos que puedan bloquear la carga de la página, identificando los que sean necesarios. Lo ideal es minimizar al máximo los recursos cargados como hojas de estilo y scripts. Piénsalo de esta forma, hasta que no pasa la cabeza no pasa el cuerpo. Si hay excesivos recursos o son muy pesados en la cabecera de la página, retardará la carga de la página (que es lo que el usuario quiere ver).
4. Minimiza al máximo las hojas de estilo incluidas en la página.
La mayoría de plugins incorporan sus propias hojas de estilo y las cargan en todas las páginas del sitio web, a pesar de no ser necesarias. Esto hace que por ejemplo las páginas de inicio se retarden en exceso. Cada hoja de estilo es una petición extra HTTP al servidor y es una petición síncrona (no se hace en paralelo). Esto significa que hasta que no termina con una no empieza con otra, lo que se traduce en tiempo perdido.
WordPress permite “encolar” y “desencolar” las hojas de estilo en función de la página gracias a las etiquetas condiciones (Template Tags). Estudia bien el sitio web y determina donde será necesaria la hoja de estilo o incluso si es necesario incorporarla. Recuerda que menos peticiones, más rapidez.
Por ejemplo, este código de fácil integración en el functions.php del tema WordPress permite desencolar las hojas de estilo del popular plugin Contact Form 7 para que sólo se cargue en la que tenga el slug de “contacto”.
if( ! is_page( 'contacto' ) ){
wp_dequeue_style( 'contact-form-7' );
}
5. Siempre que sea posible coloca los scripts al final de la página.
Evita al máximo los bloqueos de recursos externos como librerías externas y scripts. Mueve todo al pie antes de cerrar la etiqueta