Configurar Wordpress para mejorar la velocidad del cms

Como mejorar un Wordpress:

Wordpress

Tengo por delante un reto interesarte, tengo que mejorar de alguna manera un Wordpress que tarda la friolera de 10 segundos en la portada, esto es demasiado pero la blogera no quiere modificar el aspecto del blog, su frase 'es tan bonito' lo dejo totalmente claro.

Así qué con estas premisas hay que mejorar el rendimiento de este blog, hay que tener en cuenta que este artículo bien puede valer para casi todos los desarrollos webs que se suelen hacer, ya que tocáremos elementos muy generales al comienzo y luego concretaremos más con plugins de Wordpress que seguramente están disponibles en otras herramientas/cms.

Como siempre lo primero es saber cuanto tarda la petición de una página, no hablamos del tiempo total de carga sino de la primera llamada al cargar la página, y el tiempo que da es elevado, si un Wordpress tarda más de 500ms malo, y si tarda más de segundo y medio demencial.

Una buena configuración del servidor

Para mejorar esto hay que ver si tiene instalado en el servidor APC u OPCache, desconozco si Wordpress tiene soporté para php 5.5 por lo que vamos a teorizar que está en php 5.3. Al instalar APC en el servidor todos los archivos de php quedan almacenados en memoria, y su lectura es más rápida que leer de disco. Con APC la velocidad de carga debería reducirse.

El segundo paso es darle unos valores mínimos a la configuración de mysql, para cuando lleguen peticiones que sean lo más rápidas posibles.

Pero como no es bueno molestar a mysql, no tiene buen despertar por las mañanas, vamos a instalar Memcache para evitar tener que hacer peticiones a mysql, Memcache almacena en memoria las peticionones ya servidas y evita que se tenga que realizar todo el proceso de petición completo.

El motivo de usar Memcache en vez de Varnish es que mi conocimiento del segundo es mínimo y el autor utiliza muchas urls con parámetros para sus campañas y mediciones.

El plato final en el servidor es configurar un VirtualHost bien, muchos programadores de Wordpress dejan un VHost por defecto, en nuestro casó activaremos:

  • Mod Header: este módulo de Apache permite configurar las cabeceras, incluido su fecha de expiración.
  • Mod expired: este módulo de Apache nos permite configurar el tiempo de cacheo de los elementos estáticos servidos en la página web.
  • Mod deflated: este módulo de Apache permite comprimir los archivos que se sirven, de tal forma que pesan menos y se sirven más rápido.
  • Y le indicáremos al servidor que no queremos 'etags'.

Esta configuración también se puede llevar a cabo en el archivo .htaccess, la diferencia es que Apache solo lee una vez el archivo Vhost, mientras que el archivo .htaccess lo le en cada petición.

Con todo esto buscamos sobre todo mejorar la velocidad, y con los mods de Apache además de mejorar la velocidad de descarga que cuando un usuario visite por segunda o posterior vez el blog, los elementos estáticos tendrán fecha de cache posterior al día en curso, lo que significa que se consulta previamente en la cache del navegador antes de pedir que se descargue del servidor.

Una buena configuración de los elementos estáticos.

Una vez mejorado el servidor toca revisar el contenido y ver como se puede mejorar sobre todo la parte de contenidos estáticos (css, js, imágenes).

¿Qué es la descarga en paralelo de recursos en un navegador web?

Pensemos que nuestra página web es una autopista, y tenemos solo 4 carriles para avanzar, eso supone que si tenemos muchos elementos en nuestra web avanzarán por esos 4 carriles.

Si esa autopista, le agregamos vías supletorias para algunos tipos de vehículos concretos (imágenes, js, css) la descarga será más rápida pues tendríamos 4 carriles para el dominio principal, 4 carriles para cada uno de los dominios secundarios de descarga para los elementos indicados.

Css
Para mejorar la carga de Css en Wordpress tenemos 4 opciones con las que trabajar.

  • Minimizar los archivos de Css.
  • Agrupar los archivos de Css.
  • Descargar en paralelo los archivos de Css.
  • Borrar las cookies de las hojas de estilo.

JS
Para mejorar la carga de Js en Wordpress tenemos 4 opciones con las que trabajar

  • Minimizar los archivos de Js para comermos los espacios que son necesarios para la lectura de los mismos por parte del ser humano, pero no así por parte de un ordenador.
  • Agrupar los archivos de Js, al agrupar los archivos en uno o unos pocos la cantidad de llamadas que se hacen se ven reducidas considerablemente y por tanto se mejora la velocidad de carga de la web.
  • Descargar en paralelo los archivos de Js.
  • Borrar las cookies de los archivos de Js.

Imágenes
Para mejorar la carga de imágenes en Wordpress tenemos varias opciones con las que trabajar.

  • Optimizar el tamaño de las imágenes mediante algún servicio externo que reduzca el tamaño de la imaen subida a un tamaño adecuado.
  • Descargar las imágenes en paralelo.
  • Quitar las cookies de las imágenes.

En el caso concreto que nos toca tenemos que tener en cuenta que ya de por sí tiene muchas llamadas externas a diferentes servicios, y tampoco se puede descargar todo en paralelo/servicios externos porque en ese caso tendremos un exceso de llamadas externas, lo óptimo sería poder agrupar todos los Css en 2 archivos como mucho, y los Js en otros dos archivos como mucho, y las imágenes poder descargarlas en img1.dominio.com.

Llevando a cabo todo esto podremos hacer que nuestro blog en Wordpress cargue mucho más deprisa.

Esta claro que esto es un brainstorming, y ahora hay que encontrar todos aquellos plugins/configuraciones que nos permiten llevar a cabo todo esto.