Krypton Solid

Barniz – Acelere su sitio web móvil – Revista Smashing

Barniz – Acelere su sitio web móvil – Revista Smashing

Imagina que acabas de escribir una publicación en tu blog, tuiteaste sobre ella y lo viste ser retuiteado por algunos usuarios populares de Twitter. enviando cientos de personas a tu blog a la vez. Su entusiasmo al ver a tantos visitantes hablar sobre su publicación se convierte en consternación cuando comienzan a tuitear que su sitio web no funciona: se muestra un error de conexión a la base de datos.

Imagina que acabas de escribir una publicación en tu blog, tuiteaste sobre ella y lo viste ser retuiteado por algunos usuarios populares de Twitter, enviando a cientos de personas a tu blog a la vez. Su entusiasmo al ver a tantos visitantes hablar sobre su publicación se convierte en consternación cuando comienzan a tuitear que su sitio web no funciona – se muestra un error de conexión a la base de datos.


Mantenga la calma y pruebe Varnish para optimizar los sitios web móviles. (Fuente de imagen)

O quizás ha estado trabajando duro para generar interés en su startup. Un día, de la nada, una celebridad tuitea sobre lo mucho que ama su producto. Todos los seguidores de la persona parecen hacer clic a la vez, y muchos de ellos descubren que el dominio no responde, o cuando intentan registrarse para la prueba, la página se agota. A pesar de sus disculpas en Twitter, muchos de los visitantes continúan con su día y pierdes gran parte del impulso de ese tweet inicial.

Otras lecturas en SmashingMag:

Estos escenarios son bastante comunes, y he notado en mi propio trabajo que cuando el contenido se vuelve popular a través de las redes sociales, la proporción de dispositivos móviles que acceden a ese contenido es mayor de lo habitual, porque muchas personas usan sus dispositivos móviles, en lugar de aplicaciones de escritorio, para acceder a Twitter y otras redes sociales. Muchos de estos usuarios móviles acceden a la Web a través de conexiones de datos lentas y Wi-Fi público abarrotado. Por lo tanto, cualquier cosa que pueda hacer para asegurarse de que su sitio web se cargue rápidamente beneficiará a esos usuarios.

En este artículo te mostraré Acelerador de aplicaciones web Varnish, algo gratuito y simple que marca una gran diferencia cuando muchas personas acceden a su sitio web a la vez.

Presentamos la magia del barniz

Para la mayoría de los sitios web, incluso aquellos cuyo contenido se actualiza a diario, un gran número de visitantes reciben exactamente el mismo contenido. Las imágenes, CSS y JavaScript, que esperamos que no cambien mucho, pero también el contenido almacenado en una base de datos utilizando una plataforma de blogs o un sistema de gestión de contenido (CMS), a menudo se sirven a los visitantes exactamente de la misma manera cada vez.

Es probable que los visitantes que accedan a un blog desde Twitter no reciban exactamente el mismo contenido, incluidas no solo imágenes, JavaScript y CSS, sino también contenido creado con PHP y con consultas a la base de datos antes de que se sirva como una página al navegador. . Cada solicitud para la publicación de ese blog requeriría no solo el servidor web que sirve el archivo (por ejemplo, Apache), sino también los scripts PHP, una conexión a la base de datos y las consultas que se ejecutan en las tablas de la base de datos.

La cantidad de conexiones a la base de datos que se pueden realizar y la cantidad de procesos de Apache que se pueden ejecutar son siempre limitados. Cuanto mayor sea el número de visitantes, menos memoria disponible y más lenta se vuelve cada solicitud. En última instancia, los usuarios comenzarán a ver errores de conexión a la base de datos, o el sitio web simplemente parecerá bloquearse, y las páginas no se cargarán mientras el servidor lucha por mantenerse al día con la demanda.

Aquí es donde entra una caché HTTP como Varnish. En lugar de que las solicitudes de los navegadores lleguen directamente a su servidor web, haciendo que el servidor cree y sirva las páginas solicitadas, las solicitudes llegarían primero al caché. Si la página solicitada está en el caché, entonces se sirve directamente desde la memoria, sin tocar nunca Apache o la base de datos. Si la página no está en el caché, entonces la solicitud se entrega a Apache como de costumbre, después de lo cual Apache creará y entregará la página, que luego se almacena en el caché, lista para la siguiente solicitud.

Servir una página desde la memoria es mucho más rápido que servirlo desde el disco a través de Apache. Además, la página nunca necesita tocar PHP o la base de datos, dejando esos procesos libres para manejar el tráfico que requiere una conexión a la base de datos o algún procesamiento. Por ejemplo, en nuestro segundo escenario en el que una celebridad menciona una startup, la mayoría de las personas que hacen clic verían solo unas pocas páginas del sitio web; todas esas páginas podrían estar en la memoria caché y servidas desde la memoria. Los pocos que se inscriban encontrarán que el formulario de registro funciona bien, porque el código del lado del servidor y la conexión a la base de datos no se atascan por la gente que llega desde Twitter.

¿Como funciona?

El siguiente diagrama muestra cómo se puede servir una publicación de blog cuando todas las solicitudes van al servidor web Apache. Este ejemplo muestra cinco navegadores que solicitan la misma página, que usa PHP y MySQL.

Cuando todas las solicitudes van al servidor web Apache.

Apache atiende todas las solicitudes HTTP – archivos de imágenes, CSS, JavaScript y HTML. Si un archivo es PHP, PHP lo analiza. Y si se requiere contenido de la base de datos, entonces se realiza una conexión a la base de datos, se ejecutan consultas SQL y la página se ensambla a partir de los datos devueltos antes de ser servida al navegador a través de Apache.

Si colocamos Varnish delante de Apache, veríamos lo siguiente:

Si colocamos Varnish delante de Apache.

Si la página y los activos solicitados ya están almacenados en caché, Varnish los sirve desde la memoria: Apache, PHP y MySQL nunca se tocarían. Si un navegador solicita algo que no está almacenado en caché, Varnish se lo entrega a Apache para que pueda hacer el trabajo detallado anteriormente. El punto clave es que Apache necesita hacer ese trabajo solo una vez, porque el resultado luego se almacena en la memoria, y cuando se realiza una segunda solicitud, Varnish puede atenderlo.

La herramienta tiene otros beneficios. En la terminología de Varnish, cuando configura Apache como su servidor web, está configurando un «back-end». Varnish le permite configurar múltiples backends. Por lo tanto, es posible que desee ejecutar dos servidores web, por ejemplo, usar Apache para páginas PHP mientras sirve activos estáticos (como archivos CSS) desde nginx. Puede configurar esto en Varnish, que pasará la solicitud al servidor correcto. En este tutorial, veremos el caso de uso más simple.

¡Estoy vendido! ¿Cómo empiezo?

Varnish es realmente fácil de instalar y configurar. Necesitarás root, o sudo, acceso a su servidor para instalar cosas en él. Por lo tanto, su sitio web debe estar alojado en un servidor privado virtual (VPS) o similar. Puede obtener un VPS a muy bajo costo en estos días, y Varnish es una gran razón para elegir un VPS en lugar de alojamiento compartido.

Algunos CMS tienen complementos que funcionan con Varnish o que lo integran en el panel de control, generalmente para facilitar la limpieza de la caché. Pero puedes poner Varnish en cualquier CMS o cualquier sitio web estático, sin ninguna integración particular con otros sistemas.

Lo guiaré a través de la instalación de Varnish, asumiendo que ya ejecuta Apache como servidor web en su sistema. Ejecuto Debian Linux, pero hay paquetes para otras distribuciones disponibles. (Las rutas a los archivos en el sistema variarán con la distribución de Linux).

Antes de empezar, compruebe que Apache esté sirviendo su sitio web como se esperaba. Si el servidor es nuevo o está probando Varnish en una máquina virtual local, asegúrese de configurar un host virtual y de que puede ver una página de prueba en el servidor usando un navegador.

Instalar barniz

Las instrucciones de instalación para varias plataformas se encuentran en Documentación de barniz. Estoy usando Debian Wheezy; entonces, como root, seguí el instrucciones para Debian. Una vez que Varnish esté instalado, verá la siguiente línea en la terminal, indicándole que se ha iniciado correctamente.


[ ok ] Starting HTTP accelerator: varnishd.

De forma predeterminada, Apache escucha las solicitudes en el puerto 80. Aquí es donde van las solicitudes HTTP entrantes, porque queremos que Varnish se sienta esencialmente frente a Apache. Necesitamos configurar Varnish para escuchar en el puerto 80 y cambie Apache a un puerto diferente, generalmente 8080. Luego le decimos a Varnish dónde está Apache.

Reconfigurar Apache

Para cambiar el puerto en el que escucha Apache, abra el archivo /etc/apache2/ports.conf como root y busque las siguientes líneas:


NameVirtualHost *:80
Listen 80

Cambie estas líneas a esto:


NameVirtualHost *:8080
Listen 8080

Si ve las siguientes líneas, simplemente cambie 80 a 8080 del mismo modo.


NameVirtualHost 127.0.0.1:80
Listen 80

Guarde este archivo y abra su archivo de host virtual predeterminado, que debe estar en /etc/apache2/sites-available. En este archivo, busque la siguiente línea:


<VirtualHost *:80>

Cámbielo a esto:


<VirtualHost *:8080>

También deberá realizar este cambio en cualquier otro host virtual que haya configurado.

Configurar barniz

Abre el archivo /etc/default/varnishy desplácese hacia abajo hasta la sección sin comentarios que comienza con DAEMON_OPTS. Edite esto para que se vea como el siguiente bloque, que hará que Varnish escuche en el puerto 80.


DAEMON_OPTS="-a :80
-T localhost:1234
-f /etc/varnish/default.vcl
-S /etc/varnish/secret
-s malloc,256m"

Abre el archivo /etc/varnish/default.vcly compruebe que el back-end predeterminado esté configurado en el puerto 8080, porque aquí es donde estará Apache ahora.


backend default {
  .host = "127.0.0.1";
  .port = "8080";
}

Reinicie Apache y Varnish como root con los siguientes comandos:


service apache2 restart
service varnish restart

Compruebe que su sitio web de prueba todavía esté disponible. Si es así, probablemente te estarás preguntando cómo probar que se sirve de Varnish. Hay algunas formas de hacer esto. La más simple es usar cURL. En la línea de comando, escriba lo siguiente:


curl http://yoursite.com --head

La respuesta debería ser algo como Via: 1.1 varnish.

También puede consultar las estadísticas generadas por Varnish. En la línea de comando, escriba varnishstaty observe cómo aumenta la tasa de aciertos a medida que actualiza su página en el navegador. El barniz se refiere a algo que puede servir como un «éxito» y algo que pasa a Apache u otro backend como un «error».

Otra herramienta útil es barniz. Tipo varnishtop -i txurl en la línea de comandos y actualice su página en el navegador. Esta herramienta le muestra qué archivos están siendo servidos por Varnish.

Purgar la caché

Ahora que las páginas se están almacenando en caché, si cambia un archivo HTML o CSS, no verá los cambios inmediatamente. Esto me hace tropezar todo el tiempo. Sé que hay un caché frente a Apache, pero de vez en cuando todavía tengo ese momento desconcertado de «¿Dónde están mis cambios?» Tipo varnishadm “ban.url .” en la línea de comando para borrar todo el caché.

También puede controlar Varnish a través de HTTP. Hay complementos disponibles, como Purga HTTP de barniz para WordPress, que puede configurar para purgar la caché directamente desde el área de administración.

Algunas personalizaciones simples

Probablemente querrá saber algunas cosas sobre cómo funciona Varnish de forma predeterminada para poder modificarlo. Configurarlo como se describe anteriormente debería hacer que la mayoría de los activos y páginas básicos se sirvan desde la caché, una vez que esos activos se hayan almacenado en la memoria caché.

Barniz solo almacenará en caché las cosas que sean seguras para hacerlo, y es posible que no almacene en caché algunas cosas comunes que cree que lo haría. Un buen ejemplo son las cookies.

En su configuración predeterminada, Varnish no almacenará en caché el contenido si se establece una cookie. Por lo tanto, si su sitio web ofrece contenido diferente a los usuarios que han iniciado sesión, como contenido personalizado, no querrá ofrecer a todos contenido destinado a un solo usuario. Sin embargo, probablemente desee ignorar algunas cookies, como las de análisis. Si el sitio web no ofrece ningún contenido personalizado, entonces las únicas cookies que probablemente le interesarían son las configuradas para su área de administración; sería inconveniente si Varnish almacenara en caché el área de administración y no pudiera ver los cambios.

Vamos a editar /etc/varnish/default.vcl. Suponiendo que su área de administración está en /admin, agregaría lo siguiente:


sub vcl_recv {
  if ( !( req.url ~ ^/admin/) ) {
    unset req.http.Cookie;
  }
}

Algunas cookies pueden ser importantes; por ejemplo, los usuarios que han iniciado sesión deberían obtener contenido no almacenado en caché. Entonces, no quieres eliminar todas las cookies. Se requiere un viaje a la tierra de las expresiones regulares para identificar las cookies que necesitaremos. Se pueden encontrar muchas recetas para hacer esto con una búsqueda rápida en línea. Para las cookies de análisis, puede agregar lo siguiente.


sub vcl_recv {
  // Remove has_js and Google Analytics __* cookies.
  set req.http.Cookie = regsuball(req.http.Cookie, "(^|;s*)(_[_a-z]+|has_js)=[^;]*", "");
  // Remove a ";" prefix, if present.
  set req.http.Cookie = regsub(req.http.Cookie, "^;s*", "");
}

Varnish tiene una sección en su documentación sobre «Galletas. «

En la mayoría de los casos, configurar Varnish como se describe anteriormente y eliminar las cookies de análisis acelerará drásticamente su sitio web. Una vez que Varnish esté en funcionamiento y esté familiarizado con los registros, puede comenzar a modificar la configuración y obtener más rendimiento del caché.

Próximos pasos

Para obtener más información, revise Documentación de barniz. Debería comprender lo suficiente de los conceptos básicos de Varnish a estas alturas para probar algunos de los ejemplos. La sección sobre «Lograr una alta tasa de aciertos”Vale la pena leer los sencillos consejos sobre cómo modificar la configuración.

Deja un comentario