Inicio » Proyectos » Mejora el tiempo de carga y reduce el consumo de CPU con caché

Mejora el tiempo de carga y reduce el consumo de CPU con caché

Hoy quiero hablar sobre cómo optimizar el consumo de recursos de tu servidor a la vez que reducimos el tiempo de carga de nuestra página. Esto tiene un ligero impacto en el SEO, como veremos al final del artículo, pero sobre todo tiene implicaciones económicas y de calidad de tu portal. Esta optimización puede conseguirse fácilmente con los diferentes sistema de caché que existen.

En informática, la caché es un tipo de memoria de acceso rápido que guarda temporalmente ciertos datos procesados recientemente.

En desarrollo web, el concepto de caché se emplea para referirse a datos ya procesados y guardados de forma que permitan un acceso más rápido.

Esto puede aplicarse por ejemplo a ficheros estáticos (imágenes, hojas de estilo, etc) pero también a ficheros dinámicos (artículos enteros).

Yendo a un caso concreto, imaginad la típica página de X artículos que actualizamos muy poco y a menudo hecha en WordPress. En ocasiones el HTML completo de una sección del portal (un artículo, por ejemplo) es el mismo durante meses, pero cada vez que un usuario entra a esa sección, el servidor procesa todo el código PHP de WordPress, junto con los plugins y los envío al usuario. Este tiempo de procesamiento pueden oscilar entre 0.01 y 1 segundos, según el tipo de servidor que tengamos y cómo de saturado vaya. Si tenemos mucho tráfico o un servidor muy básico, se puede incluso llegar a saturar.

Si nuestro portal es muy dinámico, tendremos poco margen de mejora, o dicho margen requerirá de un trabajo más avanzado, pero nuestro portal es el típico portal de 50-100 artículos que no actualizamos en meses, ¿qué necesidad hay de calcular cada vez todo el código? Podemos hacerlo solo una vez y ahorrarnos esas décimas en cada petición.  Para conseguir esto tenemos diferentes sistemas de caché. Hoy hablaremos de 2 de ellos, que creo que abarcan la mayoría de casos de portales como los que he descrito.

Nginx

Configuración de Nginx

Nginx es un servidor web que puede funcionar como proxy inverso. WTF??? Bueno, olvida esta frase. Empecemos de nuevo.

El proxy inverso de Nginx (en lo sucesivo y, por simplificar, “Nginx”) es “algo” que se guarda cada página que envía a un usuario de manera que cuando llega el siguiente usuario no necesita volver a calcular la página y le envíe el mismo código. Es decir, es un sistema que se sitúa entre tu código PHP (o el que sea) y el usuario, y se guarda lo que el PHP procesa de manera que la siguiente petición no tiene que pasar por PHP.

Al no procesarse la página cada vez, se ahorran unas décimas de en el tiempo de carga y se reduce el uso de CPU.

Por supuesto, solo podrás aplicar Nginx cuando a cada usuario le vayas a mostrar el mismo contenido. Cuando no sea así o el contenido sea muy dinámico tendremos que buscar otras soluciones.

Nginx para WordPress

Nginx suele cachear un dominio entero. Sin embargo, para algunos CMS (gestores de contenido) conocidos, es consciente de que algunas zonas no deben cachearse y no lo hace. Esto es el caso de WordPress. Ngnix no cacheará la zona de administración por ejemplo.

Cuando usemos Nginx con gestores propios o gestores menos conocidos, es posible que Nginx no resuelva bien las zonas de administración por defecto, y tengamos que apagar Nginx temporalmente cada vez que añadamos contenido.

Soluciones Nginx

Nginx permite seleccionar qué tipos de ficheros queremos cachear y las duración de la caché. Por defecto, cachea solo 15 minutos. Yo tengo portales donde usa caché a 1 mes, dado que los actualizo poco.

Entre los tipos de ficheros, por defecto cacheará todos los ficheros estáticos además de las propias páginas. En el caso de páginas de juegos, es recomendable no cachear los ficheros Flash para evitar llenar la memoria con dichos juegos.

Ngnix es una solución cada vez más usada por su fácil configuración, flexibilidad y precio. Aunque a menudo se utiliza sencillamente con la configuración inicial que ofrece el servidor, al menos sí debemos fijarnos que no se generen cachés indeseadas o excesivamente duraderas. Si adicionalmente contamos con el apoyo o hemos contratado alguna empresa de desarrollo de software, es deseable que optimicen la configuración de Ngnix para sacarle el máximo rendimiento.

Red Softalian

Portal de dinosaurios

Nosotros usamos Nginx para la gran mayoría de portales de nuestra red. Como ya he comentado en anteriores ocasiones, nuestra red tiene algunas páginas dinámicas y que se actualizan mucho, como Mundo Gatos, pero muchas otras casi estáticas, cuyo contenido se amplía 3 o 4 veces al año. En tales casos, usamos la caché a 1 mes y el resultado es espectacular: páginas que se cargan al instante, un servidor barato que puede hospedar decenas de páginas sin problema, etc.

Si no usáramos Nginx sencillamente necesitaría un servidor mucho más caro para dar ese mismo servicio.

Hosting con Nginx

Para usar Nginx, tu hosting debe ofrecerlo. Yo recomiendo buscar empresas que te ofrezcan Nginx y que te permitan configurarlo a tus necesidades. Contratar un hosting cPanel es una opción también recomendada.

Ya he comentado en un post anterior que una de las opciones para esto es Raiola, y ya comenté que cuando migré de otros proveedores a Raiola nos configuraron el servidor acorde a las necesidades de nuestros portales. El resultado fue una reducción importante en la factura.

WP Super Cache

No todos los proveedores te ofrecen Ngnix.

Una alternativa es generar ficheros estáticos HTML para cada página de tu portal.

De esta forma se sigue evitando pasar por PHP en cada petición. Una opción es programarte tú mismo dicho generador de ficheros html y editar el fichero .htaccess para que lea dichos ficheros en vez de pasar por PHP. Pero si usas WordPress, naturalmente, ya existe un plugin que lo hace por ti: WP Super Cache.

Si te interesa ese plugin, en el siguiente apartado explico cómo configurarlo (un poco rollo). Si no te interesa, pasa al siguiente punto o si quieres conocer otros sistemas de caché puedes consultar este artículo.

Configuración de WP Super Cache

Sin entrar en la explicación de cada una de las funciones o funcionamiento técnico del plugin, voy a explicaros, de un modo práctico, cómo configurarlo para obtener los mejores resultados. Así que manos a la obra:

  1. Instala y activa WP Super Cache como cualquier otro plugin para WordPress.
  2. Configuramos el plugin yendo a Ajustes à WP Super Cache
  3. En la pestaña “Easy”, marcamos “Caching On” y pulsamos el botón de “Actualizar Estado”

Activar plugin cache wordpress

  1. En la pestaña “Avanzado”, dejamos activadas las siguientes opciones y pulsamos “Actualizar Estado”:
    1. Cache hits to this website for quick access.
    2. Use mod_rewrite to serve cache files.
    3. Compress pages so they’re served more quickly to visitors.
    4. Make known users anonymous so they’re served supercached static files.
    5. Mobile device support.
    6. Clear all cache files when a post or page is published or updated.

Configurar wp super cache

  1. Después de esto y para que los cambios se hagan efectivos, deberás actualizar las reglas Mod Rewrite del .htaccess, no pasa nada, el plugin lo puede hacer por ti. Para esto, pulsa en el botón “Actualizar reglas Mod_Rewrite”.
  2. Para seguir con este ejemplo, vamos a suponer que tenemos un portal que no se va a actualizar casi nunca, por lo que queremos que sea “casi siempre” estático. Para ello, en la pestaña “Avanzado” vamos a la sección “Tiempo de caducidad y Recogida de basura” vamos a establecer los siguientes parámetros y pulsar el botón “Cambiar caducidad”:
    1. Cache Timeout: 999999999.
    2. Clock: 05:00 (por poner un ejemplo, lo suyo es ajustarlo a la hora de menor carga del servidor).
    3. Interval: Semanalmente o diariamente.

Tiempo caducidad wp super cache

Con esto dejaremos configurado WP Super Cache. El plugin empezará a cachear las páginas al primer acceso de cada una, por lo que es posible que necesitemos esperar un poco a que todas las páginas hayan recibido al menos alguna visita. Pruébalo y verás como enseguida notas la diferencia.

Sistemas de comentarios

Los comentarios en posts es un ejemplo típico de contenido dinámico. Si nuestra web se cachea entera, los comentarios basados en php (los por defecto en WordPress, por ejemplo) no se verían.

Si queremos comentarios y caché a la vez podemos usar cualquier sistema de comentarios basado en Javascript/Ajax. Yo recomiendo Disqus.

Con Disqus los comentarios se cargan por Ajax, es decir, desde el navegador, por lo que tener la página cacheada no es problema.

Si queremos que también formen parte del código fuente por temas SEO, y por ejemplo usamos WordPress (funciona parecido con otros gestores), basta poner la caché a 1 día y cada día los comentarios se incluirán en el código fuente para su indexación.

Beneficios

  • Velocidad de carga: tus páginas irán mucho más rápidas al ahorrarse el tiempo de procesamiento de cada página, con la consecuente mejora en la respuesta de usuario.
  • Económicos: puedes hospedar más páginas o más tráfico en un mismo servidor. Los servidores suelen limitarse por uso de CPU más que por ancho de banda, por lo que si reducimos el uso de recursos, podemos hospedar más portales.
  • SEO: la velocidad de carga es uno de los muchos factores que mide Google para posicionar tu página. No es un factor crítico pero sí que se tiene en cuenta.

Límites

Todo lo explicado hoy se puede aplicar fácilmente a portales esencialmente estáticos. Si tenemos un blog que se actualiza varias veces al día, también podremos usar caché pero con un tiempo de caché pequeño, de tal vez 15 minutos.

Conclusión

Considera seriamente usar algún sistema de caché para todos tus proyectos por sus beneficios económicos, SEO y de rendimiento. Si tu portal se actualiza poco es recomendable usar Ngnix, WP Super Cache o algún otro sistema de caché.

4.9/5 (8 votos)
Suscríbete a Seo Azul
Recibe en tu correo todos los contenidos que publicamos en el blog, y los que no publicamos. Sin spam, por supuesto.
Servicios profesionales