17 Nov
WordPress

WPO: Aumenta la velocidad de WordPress (casi) sin plugins

UX Researcher ● Web Designer ● 🍺 ● 🤘🏼

Aunque todos sabemos la importancia de tener un sitio web WordPress rápido y optimizado, vamos a ponernos en contexto:

  • Un retardo de 500ms implica una disminución del 20% en ingresos por publicidad, según Google.
  • Un retardo de 100ms puede significar una disminución del 1% en ingresos por publicidad, según Amazon.
  • Mejorar 400ms el tiempo de carga incrementa el tráfico un 9%, según Yahoo.
  • El 27% de los usuarios dicen que visitar un sitio lento hace que abandonen y visiten un competidor.
  • Google está tan comprometido con la velocidad y la experiencia del usuario que en el snippet de resultado de búsqueda añade la etiqueta “SLOW” a los sitios lentos…

Fuente: Udemy

Con estos datos en la mano queda bastante patente por qué es importante tener nuestra web optimizada. Conseguirlo conlleva un trabajo minucioso y que no siempre se ve recompensado, y además,  si nuestra web está basada en WordPress, el llevar a cabo esa optimización se complica, a veces, de manera exponencial.

WordPress: plugins, peticiones y caos.

Seamos sinceros: WordPress es un CMS genial, pero en lo que a optimización se refiere es un caos: plugins con código de dudosa calidad, archivos CSS y JS por cada plugin instalado, temas realizados sin ningún cariño, código legado para poder mantener esa retrocompatibilidad con PHP 5.2.4+ y MySQL 5.0+, etc.

La instalación standard de WordPress consiste en el propio CMS, un tema multipropósito sobredimensionado comprado (o pirateado) y una media de 10 plugins para, en la inmensa mayoría de los casos, realizar funciones que se pueden hacer en 5 minutos editando el código. Con esta base es muy difícil que una instalación WordPress vaya fina sin realizar ninguna acción por nuestra parte.

Cómo optimizar WordPress

Dando por sentado que conocemos el CMS, somos desarrolladores y la web se encuentra alojada en un hosting compartido, tenemos varias cosas básicas que hacer para optimizar WordPress:

Elegir un buen hosting

Parece lógico, pero no siempre se elige el hosting adecuado para nuestra web. Un hosting de calidad supone que esa latencia de conexión sea mínima y ganemos unos preciosos milisegundos.

En Vital Innova confiamos desde el año pasado en Siteground como nuestro hosting de cabecera: está optimizado para WordPress y WooCommerce y tienen un servicio de atención al cliente excelente.

Comprimir los recursos con Gzip

Esta compresión de lado de servidor hace que tu web se sirva de manera comprimida, como si de un fichero .zip se tratara. Esto aumenta la velocidad de carga de las páginas y reduce el ancho de banda.

La mayoría de hostings disponen de este servicio y se puede activar desde el panel de control (en cPanel está en la sección Avanzado -> Optimizar el sitio web). Si esto no es así, podemos añadir este tipo de compresión añadiendo el siguiente código al archivo .htaccess de la raíz de nuestro directorio web, y usar herramientas como Gzip compression test para probar su correcto funcionamiento:

 
 
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Habilitar la caché de servidor

Este punto es el único donde quizás debamos instalar un plugin para conseguir que nuestra web se sirva cacheada. Decimos quizás porque muchos hostings ya tienen esta opción y basta con activarla.

Si tiene que ser vía plugin, sin duda WP Rocket (desde $39) es el mejor: sencillo de configurar y eficaz en su cometido:

  • Cacheo de páginas.
  • Preload de URLs externas para nuestros assets y ads.
  • Lazy load para imágenes.
  • Minificado de HTML, CSS y JS.

Usar la caché de navegador

Es posible decirle a los navegadores de nuestros visitantes que guarden una copia de los archivos durante un tiempo determinado, de esta manera el cliente se ahorra esa petición y el contenido se sirve más rápido. Cuando el contenido cambie el navegador realizará de nuevo la petición.

Para ello, debemos editar de nuevo el archivo .htaccess y añadir las siguientes líneas de código:

 
 
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType application/x-javascript "access 1 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 2 days"

Optimizar las imágenes

Es muy importante que nuestras imágenes tengan el tamaño y el peso adecuados a lo que necesitamos para poder mostrarse en nuestro sitio WordPress. Podemos usar plugins para optimizar las imágenes en el momento en que se suban a la web, pero existen tanto webs como aplicaciones que nos ahorran ese plugin extra y que funcionan mejor que la mayoría de ellos:

Mejorar la entrega de CSS

Que nuestra web cargue bien sin necesidad de hacer peticiones externas es muy importante cara a buscadores y experiencia de usuario, por lo que es recomendable que el contenido visible se priorice en lo que a estilos se refiere. Conociendo el Critical Rendering Path podemos hacer que solo el CSS necesario sea utilizado para renderizar sin problema esa parte de la web que está above the fold.

Eliminar el JS bloqueante

Tener recursos que bloqueen la carga también penaliza, así que debemos tener controlados los recursos javascript para que se sirvan de manera asíncrona cuando sea necesario, haciendo que la web se represente de manera correcta sin depender de estas peticiones.

Una vez listo el documento, el navegador realizará estás peticiones asíncronas y cargará el código javascript.

Conclusiones

Como hemos podido ver, siguiendo unas reglas básicas podemos hacer que nuestra web realizada con WordPress está optimizada, repercutiendo en experiencia de uso de nuestros visitantes y consumiendo menos recursos para su funcionamiento.

Solicitamos tu permiso para obtener datos estadísticos de la navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúas navegando consideramos que aceptas el uso de cookies.

AceptarMás información