Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Optimizando WordPress con Varnish y W3 Total Cache 

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Este tutorial da seguimiento a Instalando WordPress en la Nube de Amazon, mostrando cómo optimizar tu sitio con cacheo.

Si auto-hospedas WordPress, es aconsejable implementar algún tipo de solución de cacheo. Ya sea que quieras ejecutar tu blog en una micro instancia económica en la Nube de Amazon (AWS) o esperes que tu blog tenga una escala significativa o picos de tráfico, cachear será crítico para administrar el desempeño. Cachear también puede ayudar a mejorar tu Velocidad de Página Google la cuál impacta tu posicionamiento en motor de búsqueda.

Dependiendo del tráfico de tu sitio y la complejidad de tu tema WordPress, el desempeño en realidad puede ser bastante lento sobre AWS. Mi recomendación es combinar el uso de Varnish Cache de código abierto con el complemento W3 Total Cache (W3TC) gratuito.

Varnish es un caché que almacena copias de páginas para usuarios que no han iniciado sesión (la mayoría de los lectores no lo han hecho). Cuando entran peticiones a tu servidor, Varnish devuelve estas páginas pre-construidas instantáneamente en lugar de requerir que Apache, PHP y WordPress re-construyan la página para cada petición. A medida que el tráfico escala, re-construir cada página a través de la pila WordPress literalmente puede hacer fallar a tu servidor. Después, W3 Total Cache puede ser configurado para pre-construir páginas de tu sitio de manera regular para que siempre estén listas para Varnish.

Nota: esta también es una buena razón para considerar un complemento externo de comentarios tal como Disqus en vez de los comentarios integrados de WordPress. El JavaScript de Disqus se puede cachear. Si tus comentadores inician sesión en tu sitio WordPress, el cacheo será usado menos frecuentemente y tu escalabilidad para la mayoría de tus visitantes activos se reducirá enormemente.

El poder de Varnish es dramático cuando el interés en tu sitio se dispara. He ejecutado de manera exitosa mi propio sitio con esta configuración usando una instancia pequeña de Amazon por aproximadamente $14.95 al mes manejando de manera exitosa muchas apariciones en BoingBoing, Slashdot y otros.

Si quisieras aprender más sobre cacheo, sus beneficios y W3TC, lee introducción al cacheo de Ahmad Awais.

Instalando Varnish Cache

Varnish Cache es una módulo de cacheo para Linux. Configuraremos Varnish para escuchar tráfico HTTP (web) en el puerto 80 con Apache escuchando solo a Varnish en el puerto 8080. Cuando Varnish necesita una página para ser construida de manera manual, le pasamos la petición al puerto 8080 de Apache.

Esto puede ser un poco confuso al principio - pero sí, estamos esencialmente moviendo Apache tras bambalinas. Varnish actuará como la puerta frontal en el puerto 80 para todas tus peticiones web. Apache actuará en un rol de soporte para Varnish en el puerto 8080. No hay tráfico público en el puerto 8080, solo peticiones privadas de Varnish. Si eres curioso sobre cómo esto se relaciona a los grupos de seguridad AWS, no hay necesidad de abrir el puerto 8080.

Para comenzar, necesitamos instalar Varnish sobre nuestra instancia:

Edita el archivo ports.conf de Apache para escuchar en el puerto 8080:

Aquí está cómo debería lucir:

Edita tu archivo de configuración del sitio Apache para responder al puerto 8080:

Cambia la línea VirtualHost de *:80 a *:8080

Podrías necesitar cambiar tu sitio Apache por defecto para escuchar en el puerto 8080 o deshabilitarlo:

Mueve los archivos de configuración Varnish originales a tu directorio de inicio como respaldos (en caso de que decidas revisarlos después):

Reemplaza la configuración Varnish por defecto con el archivo disponible aquí en gist. Puedes usar copiar y pegar.

Después, reemplaza la configuración Varnish VCL con este archivo gist (de nuevo copia y pega).

Advertencia: podrías obtener errores VCL cuando intentes reiniciar Varnish si no mantienes apropiadamente saltos de línea cuando pegues. Los saltos de línea pueden ser difíciles de detectar, así que revísalo cuidadosamente. Si hay errores al reiniciar Varnish, es bastante bueno diciéndote qué número de línea mirar.

Ahora, vamos a reiniciar Apache y Varnish:

Recuerda, si obtienes errores VCL en este punto, podría ser debido a saltos de línea rotos de pegar en el archivo default.vcl de Varnish.

Visita tu sitio en http://yourdomain.com y todo debería comenzar a trabajar con Varnish. La segunda vez que cargues una página estática, debería ser significativamente más rápido.

Instalando W3 Total Cache

W3 Total Cache es un sobresaliente complemento WordPress. Es gratuito y proporciona una tremenda optimización de desempeño para tu sitio. Puedes aprender más sobre W3 Total Cache en el sitio de su complemento.

Inicia sesión en tu página de administración WordPress en http://yourdomain.com/wp-admin usando el nombre de usuario y contraseña que configuraste durante la instalación. Selecciona Plugins -> Agregar Nuevo desde el menú de la barra lateral izquierda. Busca W3 Total Cache.

Debido a su poder y sofisticación, W3 Total Cache tiene una amplia variedad de ajustes que pueden parecer abrumadores. Debajo, proporciono algunos ajustes recomendados que facilitan el comienzo.

No te abrumes. Comienza con los Ajustes Generales mostrados debajo y parte de ahí. Si estás interesado en comenzar más rápidamente, he proporcionado instrucciones para descargar mis ajustes por defecto e importarlos (mostrados más abajo).

De manera alternativa, W3 Total Cache ofrece instalación de pago y soporte por $150 en adelante. Puedes contactarlos mediante su página de Tablero de complemento o su sitio web. Este es un complemento grandioso así que me siento bien de recomendarlo. He tenido alguna experiencia con su soporte de pago y es generalmente bueno. También podrías querer revisar la vista general de instalación de W3 Total Cache y FAQ en el sitio web del complemento para más detalles.

A un nivel alto, recomiendo activar los siguientes ajustes que detallo de manera más completa abajo:

  • Cacheo de Página: Cachea páginas para carga más rápida y entrega más eficiente (separado de Varnish).
  • Minificar: Encoge y combina archivos JS y CSS para carga más rápida y entrega más eficiente. 
  • Caché de Objeto: Acelera la generación de contenido por WordPress.
  • Caché de Navegador: Etiqueta apropiadamente contenido para que los navegadores cliente achiquen las descargas de páginas.
  • Proxy Inverso: Instruye a W3TC para purgar el caché Varnish cuando las publicaciones, páginas, y otros son actualizados.
  • CDN Amazon CloudFront: Asegura la entrega de archivos estáticos e imágenes rápidamente, de manera confiable y geográficamente cercana a tus visitantes.
  • Misceláneos: Usa un archivo índice sitemap para pre-cachear páginas de alta prioridad.

Instalando Componentes de Soporte

Antes de que configuremos W3 Total Cache, instalemos y activemos un número de componentes Linux que este requerirá. De nuevo, conéctate a tu instancia y realiza los siguientes pasos:

Edita tu archivo php.ini para activar memcache:

En la sección de Extensiones Dinámicas, agrega las líneas de abajo:

Dile a Apache que active estos módulos y reinicialo:

Edita tu archivo wp-config para habilitar cacheo:

Agrega la siguiente definición WP_CACHE encima de la línea tope de edición:

Revisando Estado de Configuración

En este punto, es útil visitar el Tablero W3TC del complemento y revisar que todos los componentes apropiados estén activos. Pero primero, necesitamos habilitar Fancy Permalinks para formatos de URL, lo que optimizará nuestro sitio para indexación de motor de búsqueda. Desde el Tablero de Administración WordPress, selecciona Ajustes -> Permalinks, elige Día y Nombre y da clic en Guardar Cambios.

Después, desde la barra lateral izquierda, da clic en Desempeño -> Tablero y después da clic al botón Comprobación de Compatibilidad. Debería lucir algo como esto:

Nota: ahorrarías algo de tiempo si eliges un tema e instalas los otros complementos que planeas usar antes de completar el proceso de configuración de W3 Total Cache. Cambiar temas y agregar complementos probablemente requerirá que purgues y vuelvas a probar tus ajustes de W3 Total Cache.

Ajustes Generales

W3TC generalmente funciona bien con sus ajustes por defecto. Así qué, primariamente necesitamos configurar la página de Ajustes Generales y no ir a cada área de característica individual.

Visita la página de Ajustes Generales de W3TC. Desde la barra lateral izquierda, da clic en Desempeño -> Ajustes Generales. Podemos realizar configuración de alto nivel aquí pero entonces también tendríamos que hacer una configuración más detallada en ajustes de páginas individuales. Dejo fuera (desmarcado) "Cambiar todos los tipos de cacheo encendido o apagado (a la vez)" en la caja general.

Habilita Caché de Página con Caché PHP Alternativo Opcode (APC):

Habilita Reducir con los siguientes ajustes. Uso el modo manual porque reducir puede romper algunos temas si tus ajustes son demasiado agresivos (sin embargo, tu tema elegido podría funcionar bien):

Dejo desmarcado/apagado Cacheo de Base de Datos ya que esto es recomendado solo si no activas Cacheo de Objeto.

Habilita el Caché de Objeto:

Habilita el Caché de Navegador:

Habilita Proxy Inverso:

Configura W3TC para purgar regularmente el Caché Varnish desde 127.0.0.1 (localhost).

Ajustes de Caché de Página

Desde la barra lateral izquieda, da clic en Desempeño -> Caché de Página. Desliza hacia abajo a la caja Pre-Carga de Caché. Habilita "Preparar automáticamente el caché de página". Ingresa tu URL sitemap.

Nota: Necesitarás tener instalado el complemento Better WordPress Google XML Sitemaps antes de esto funcione apropiadamente.

Si usas un CAPTCHA en formularios de contacto, querrás incluir la ruta a estas páginas en la exclusión de caché. Cachear un CAPTCHA romperá la funcionalidad. Desliza hacia la caja Ajuste Avanzado. Agrega tu ruta de archivo ej. contactos aquí:

Grupos de Agente de Usuario

Debido a que mi tema es responsivo, cacheo agentes de usuario móvil y de tableta por separado. En otras palabras, Varnish cachea copias de varias retículas responsivas de mi sitio. Cuando un usuario móvil viene al sitio, ellos obtienen un archivo específico contra cuando llega un usuario de escritorio. Si el contenido de tu sitio es responsivo de manera dinámica (ej. solo cambia en Javascript y CSS), no necesitarás hacer esto.

Si deseas hacer esto, habilita Grupos Altos y Bajos de Agente de Usuario:

Grupos de Remitente

También habilito Grupos de Remitente para motores de búsqueda:

Ajustes de Reducción

La reducción comprime tu código HTML, JS y CSS y combina los archivos cuando es posible. Esto acelera la entrega de tus páginas y reduce el ancho de banda. Sin embargo, algunas veces puede romper el código del tema.

Podrías tener que ajustar la configuración para tu tema elegido. Encontré que apagando la reducción CSS en línea, mi tema funciona bien. Desde la barra lateral izquierda, da clic en Desempeño -> Reducir:

Importando Ajustes de Ejemplo (Opcional)

Si prefieres comenzar importando mi archivo de ajustes, sigue estos pasos:

  1. Descarga el archivo de ajustes de ejemplo
  2. Visita los Ajustes Generales de W3TC ej. barra lateral izquierda, Desempeño > Ajustes Generales y desliza hacia el área del fondo con Ajustes Importar/Exportar (ver abajo).
  3. Además de Importar configuración, da clic a Elegir Archivo y selecciona el archivo de ajustes de ejemplo que descargaste. Después, da clic en subir.
  4. Navega tus ajustes W3TC y asegura que tienen sentido para tu sitio WordPress.
  5. Podrías necesitar personalizar ajustes para tu sitio después de la importación ej. Google PageSpeed, Amazon CloudFront CDN, etc.

Usando El CDN CloudFront de Amazon

Definitivamente vale la pena activar una CDN. La CDN es bastante útil para reducir la carga general en tu servidor. Por ejemplo, W3TC puede redirigir peticiones para imágenes y archivos estáticos tales como scripts y css a la CDN de Amazon.

Si deseas hacerlo, sigue las instrucciones de mi sitio para Activar el CloudFront de Amazon. Estoy usando actualmente el método Pull (mi tutorial describe el método Push antiguo).

Monitoreando Desempeño

Hay muchas maneras diferentes de monitorear el desempeño de tu servidor. W3TC soporta integración con el módulo de monitoreo New Relic. W3TC ofrece un widget de tablero para Google Page Speed y también hay un complemento Google Page Speed para WordPress. Esto será útil para ti en evaluar el desempeño en curso de tus blogs.

¡Felicidades!

Ahora deberías ser el orgulloso dueño de un sitio WordPress completamente optimizado y auto-hospedado en la Nube de Amazon usando Varnish y W3 Total Cache. Espero que hayas encontrado útil esta serie de dos partes. Por favor déjanos saber qué funcionó bien para ti y qué no.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.