07Jun

Como crear un CDN con Amazon CloudFront y W3 Total Cache

Amazon CloudFront

Amazon Web Services

Nota Importante: A día 5/2/2013 W3 Total Cache se ha actualizado a la versión 0.9.2.6 y al actualizar se me ha borrado todo lo que tenía configurado anteriormente por lo que he tenido que configurar todo de nuevo. La nueva versión añade algunas opciones que no aparecen en el siguiente tutorial no obstante configurándolo como indico a continuación funciona perfectamente. Próximamente haré un post explicando que ha cambiado, que vale la pena añadir y que no, de las nuevas funciones. Mientras tanto sigue los pasos a continuación y el resto (por ahora) ignóralo.

Hay muchos tutoriales en internet sobre como usar el servicio Amazon S3 para crear un CDN. Ejemplos como el del enlace anterior no crean un CDN verdadero. Un CDN es un conjunto de servidores alrededor del mundo que contienen la información de tu sitio web y el Amazon S3 guarda la información de tu sitio es solo un servidor. Ayuda a reducir la carga de tu servidor de hosting pero no se le puede llamar CDN.

El servicio para crear una Red de Distribución de Contenidos (CDN) de Amazon se llama CloudFront y a continuación te voy a comentar como configurar W3 Total Cache con este servicio.

Instalar W3 Total Cache.

Este es el primer paso y aquí te dejo mi post sobre como instalarlo y configurarlo correctamente: Acelera WordPress con W3 Total Cache

Asegúrate de NO habilitar la opción CDN en la sección General. Primero hay que configurar el CDN y por último habilitarlo. De lo contrario estarás habilitando un CDN que todavía no existe. No obstante asegúrate de seleccionar Amazon CloudFront (Origin Pull) como tu proveedor de CDN.

La diferencia entre Pull y Push es que con Pull será CloudFront quien “copie” automáticamente los contenidos de tu sitio web cada vez que los actualices o agregues otros nuevos. Con Push tendrás que subir tu mismo los contenidos a CloudFront.

Configurando Amazon CloudFront.

Casi todo el mundo tiene una cuenta en Amazon. Si aun no tienes una puedes crearla en el proceso. Ve a la siguiente Amazon Web Services y crea una nueva cuenta o inicia sesión con la que ya tienes. Una vez que este listo ve a tu Cuenta y haz click en Credenciales de seguridad. Una vez ahí toma nota del número de clave de acceso y de la clave de acceso secreta pues las necesitarás más adelante. Si no te aparecen estas claves puedes crearlas ahí mismo.

Configurando el CDN en W3 Total Cache.

Ve a la sección General en tu W3 Total Cache y en la opción CDN marca todas las casillas excepto la última. No querrás guardar los datos de terceros en tu propio servidor a menos de que realmente tengas la necesidad de hacerlo.

En la siguiente sección “Configuration” necesitarás introducir las claves de Amazon AWS que ya tienes. Verás un botón para crear una distribución en CloudFront. Si los datos que has puesto son correctos veras un mensaje confirmando que la distribución se ha realizado con éxito. También comprobarás que el campo “Replace site’s hostname with” se habrá llenado con un subdominio de CloudFront exclusivo para ti.

Activar el CDN.

Ya estás listo para activar el CDN, ve a sección General en la opción CDN y haz click en “Enable” (ahora sí). En este punto ya tienes un CDN habilitado y funcional con Amazon CloudFront. No obstante es recomendable crear CNAMEs.

Configurando los CNAMEs.

Una opción muy buena que nos brinda W3 Total Cache es la opción de crear CNAMEs en tu CDN. Esto significa que en vez de usar el nombre de subdominio aleatorio que te brinda CloudFront del tipo: d2sdfrtres9rtye.cloudfront.net puedes usar uno creado por ti como por ejemplo: cdn.cloudfront.net o media.cloudfront.net.

Lo primero que necesitas hacer es iniciar sesión en tu servidor de hosting y crear los CNAMEs en el Editor de Zona DNS. Por ejemplo en este blog yo he creado mis CNAMEs de la forma: cdn, cdn1, cdn2…cdn7. Existe un debate sobre si es recomendable o no crear tantos CNAMEs ya que esto conlleva más peticiones http y un hipotético retraso en el tiempo de respuesta del sitio web.

Sin embargo Amazon recomienda hacerlo con su servicio CloudFront y así lo he hecho yo y hasta ahora me va estupendamente bien. Si alguien tiene algo que opinar en este punto que lo comparta en los comentarios. Las imágenes son de mi hosting en Hostgator, si usas otr0 proveedor de hosting debes encontrar la opción en tu panel de administración.

Una vez que has configurado los CNAMEs en tu servidor de hosting debes ir a tu Consola AWS y editarla. Se abrirá una ventana donde puedes entrar los CNAMEs que acabas de crear en tu servidor de hosting.

Ahora solo falta que regreses a W3 Total Cache y vayas a la zona de configuración del CDN y agregues (una vez mas) los CNAMEs que has creado. Debes borrar el que esta por defecto e ir agregando los tuyos propios uno a uno.

 

Asegúrate de comprobar la distribución y si todo está correcto actualiza tu sitio web y asegúrate de que las páginas están siendo servidas por el CDN.

 

Ya está todo listo ahora tienes tu sitio web repartido por todo el mundo y llegando a tus lectores de la forma mas rápida y eficiente posible. Parece mucho trabajo pero la realidad es que no toma más de 15 minutos llevar a cabo estos pasos. Si tienes algún problema intentándolo déjame saber en los comentarios.

Mis propios resultados.

Usando el servicio Pingdom antes y después pude comprobar los resultados de implementar Amazon CloudFront en este blog. Observen como mejoraron todos los parámetros.

Antes:

Pingdom

Después:

ACTUALIZADO (14/8/2012)

Para quienes me preguntan por el coste real aquí van los datos:

  • Junio 2012: $0.14
  • Julio 2012: $0.15
  • Agosto 2012: $0.24
  • Septiembre 2012: $0.36

El promedio de visitas es de unas 130 visitas únicas diarias (Junio y Julio) y los precios están expresados en dólares estadounidenses.

Para aprender más suscríbete a mi guía: Internet Marketing en 20 lecciones y a los contenidos exclusivos para suscriptores.

¿ QUE ESTÁS ESPERANDO ?

Aprende, paso a paso y GRATIS que es el marketing online y como implementarlo efectivamente para generar ingresos en internet.
Además recibe contenidos especiales solo para suscriptores que no publico en el blog.

Por último te invito a dejar tus impresiones sobre este artículo en los comentarios por estas simples razones:

  1. Leo y respondo todos los comentarios.
  2. Visito las webs de quienes dejan comentarios.
  3. Podría invitarte a escribir en este blog.

compartir en redes sociales

Comentarios

  1. Hola

    Pero Amazon es de pago no?? a cuanto suele salir? Hay algun CDN gratuito?? Es que para los que estamos empezando pagar no suele estar en nuestra mente.

    Salu2

    • Efectivamente es de pago pero es tan barato que vale la pena dado el beneficio. Además una vez que te das de alta entras a un programa por un año en el cual si tú pagina no excede ciertos niveles de tráfico el servicio te sale gratis. Los niveles son bastante elevados y es poco probable que un sitio web joven los alcance. Si se diera el caso solo pagarías la diferencia, es decir lo que te has excedido.

      Después de ese año se paga según el tráfico que tengas. Para que tengas una idea un sitio web que reciba más de 1000 visitas diarias podría estar pagando entre 1 y 5 (dólares/euros) al mes. Aquí te dejo el listado de precios actual por regiones geográficas: http://aws.amazon.com/es/cloudfront/pricing/

      Ahora bien, todo depende de tus prioridades y objetivos. Yo tengo la experiencia de mi primer blog Tecnobuzz en el cual como estaba
      empezando y aprendiendo, lo hice todo gratis y todo mal. Ahora llevo tiempo queriendo retomarlo y darle otro enfoque pero aun cuando se cuanto me va a costar en dinero no tengo ni idea de cuanto me costará en tiempo. Al final me ha servido de experiencia para no cometer los mismos errores en este nuevo blog. La realidad es que si quieres hacer un blog con fines comerciales te va a costar algún dinero, principalmente en un buen diseño, servicio de hosting y un
      proveedor de email marketing como Aweber.

      Espero haber podido responder a tu pregunta lo mejor posible.

      Saludos dsd Las Vegas.

      • Hola

        Gracias, me respondiste a la perfección. Yo llevo tiempo en este mundillo, pero estoy empezando a dedicarme de manera mas seria. Tengo todo por aprender pero muchas ganas. Aún no saco nada mas que la satisfacción personal de compartir mis contenidos e ideas.

        Entiendo que todo el que quiere sacar algo tiene que invertir, como de momento hacemos con nuestro tiempo tu, yo, y otros mil (cada vez mas), y al principio todos tiramos a lo gratuito, como tu comentas, y como hice yo.

        Poco a poco vamos evolucionando, y yo ahora mismo ya pille un VPS tras muchos periplos, y ahora estoy tratando de ajustarlo pues mi inexperiencia es total gestionando un servidor, y la estabilidad que te dan los hosting “capados” cuesta conseguirla cuando tu capital es limitado.

        Gracias por tu ayuda, has sido un descubrimiento. Te felicito por tu blog.

        Salu2

        P.D.: eso de desde las vegas me da mucha envidia jejeje, yo espero ir a nueva york el mes que viene

        • Un VPS??? Wow ya vas a lo grande. Yo aun sigo con un hosting compartido en Hostgator pero espero que mi trafico en algun momento sea tal que necesite moverme a un VPS. Eso significaria que las cosas van bien.

          Cual es la url de tu blog?? Me gustaria visitarlo.

          Perdon por la falta de acentos escribo desde el movil en ingles.

          Saludos y mucha suerte.

          P.D: Ya estoy viendo tu blog, muy interesante. Buen trabajo 🙂

          • Jajaja no te equivoques, el VPS lo cogí ahora pero mas por espacio que por trafico, además por precio tampoco iba mal. Blogs tengo varios, pero quizá el que mas te pueda interesar sea http://www.creatupropiaweb.net pero te aseguro que no soy tan grande como tu aún.

            Salu2

          • Lo he mirado rapidamente pues ando en la calle, hay mucho contenido y por supuesto que lo mirare en detalle desde casa. Un consejo es que quizas tengas demasiadas “distracciones” en las barras laterales desde mi punto de vista, pero bueno quiza te va bien asi. Todo es cuestion de probar y ajustar. Saludos y perdon x los acentos otra vez.

          • Hola

            Gracias, me encantaría que si cuando le eches un vistazo ves mas cosas me Las comentaras también.

            Respecto a Las distracciones re reviews a banners, widgets, etc?

            Esta vez te pido perdón yo por el corrector de swipe que encima Está en inglés.

            Salu2

          • Sin problemas, lo voy a mirar bien este fin de semana. Llevo un par dias… #$@!*

          • Amazon tiene muchos más servicio que pueden ser útiles para los blogers, yo ya me pierdo entre tantos pero es bueno echarle un vistazo

          • Gracias por comentar. Yo he mirado el Amazon EC2. El problema es que tengo un montón de sitios web, algunos míos otros de mis clientes en Hostgator y tendría que ponerme a migrarlos todos y el trabajito de estar configurando todo a través de SSH se las trae. Además hay dos sitios de unos clientes míos con un tráfico importante que no creo que la instancia Micro pueda manejar eficientemente y con la Small tengo mis dudas. Tendría que probar con la Small y ver cuanto me costaría tener todos esos sitios ahí…Supongo que esa es mi tarea jaja. Saludos.

          • Me sorprende que uses Hostgator, yo también lo usaba pero sale más barato Amazon EC2. Eso si hay que ponerse a configurar y aprender. Pero es la mar de divertido.
            Y tienes un año para aprender.
            Depues pagas menos de 40$ al año por la instancia Micro.
            Mira este es mi blog bajo EC2 universidades privadas madrid

      • Hola Abraham,
        Se que ya el post tiene algo de tiempo, pero con la esperanza de que respondas te queria preguntar que servicio de AWS me recomiendas para iniciar mi carrito de compra en joomla, EC2, S3, Cloud Form.

        Espero tu respuesta

  2. emiligenevila dice:

    Hola, he seguido todos los pasos del tutorial pero ahora han desaparecido las imágenes del blog. Solo reaparecen cuando desactivo el módulo CDN de W3 Total Cache. ¿A qué puede deberse? ¿Tengo que subir las imágenes a CloudFront?

  3. Eulises Avila dice:

    Hola amigo,

    Primeramente basado en que puede conocer que usando el cloud para las imagenes puedo optimizar mi sitio web, decidi a probar con Amazon dado las buenas referencias que dan todos del servicio.

    Ahora bien, basado en tu tutorial, tengo la siguiente duda y ojala me puedas colaborar; yo uso en todas mis web el “www” (incluyendo donde voy a aplicar el cloudfront), sabes si esto puede influir en el “origen” o bien que no se apliquen los cname correctamente?

    Usando el origin pull, entiendo que se suben automáticamente al cloud de amazon, es decir un espejo de lo que suba al servidor de mi hosting, pero bien dicha url del cloud se coloca automáticamente en mis entradas?

  4. No puedes tener un sitio profesional en el cual se puede ver tus elevados conocimientos sobre internet y hacer capturas de pantalla dibujando flechitas medio torcidas con el paint. No da buena imagen… 😉

    • Gracias por tu comentario sin embargo aunque entiendo tu punto de vista no lo comparto. El objetivo de esas flechas en Paint es proveer una indicación no ofrecer un diseño agradable. El contenido del post es más importante que el diseño de la flecha. Pude haberla hecho en Photoshop, es verdad, pero lo importante era tener el post terminado y publicado. Como desarrollador de software he aprendido a usar métodos ágiles e intento aplicarlos en todo lo que puedo. Aunque me preocupo bastante por el diseño en general, en este caso particular el diseño de la flecha no es lo más importante. Otra vez gracias por tu comentario que aunque no lo comparta es muy valioso. Saludos!!!

  5. Hola Abraham!
    Acabo de terminar de recorrer todo todo tu blog (sí, cada uno de los artículos!). Y la verdad es que me siento muy agradecido por toda esta valiosa información que compartes!
    Y tal vez porque este artículo no está directamente relacionado con el marketing es que siento que tengo algo para aportar.
    Yo tengo contratado el servicio de Amazon CloudFront desde hace unos dos años y la verdad es que es mucho más caro de lo que parece. Lo que cada uno paga a fin de mes lógicamente tiene relación con la cantidad de visitas y con los contenidos de su sitio (tu sitio tiene pocas imágenes y más bien “pequeñas”, pero muchas imágenes y muy “pesadas” lógicamente que encarecen este servicio).
    Amazon CloudFront ya es caro entre servicios similares y pasará a ser varias veces más caro que tu servicio de webhosting cuando se incrementen los visitantes. Yo sólo lo uso para el archivo CSS y las numerosas (pero muy pequeñas) imágenes que tiene asociado y también para algunos otros archivos más, pero siempre vigilando que sean pequeños. Mi idea es darle a Amazon muchos archivos pero todos de un tamaño insignificante para que la cuenta se mantenga en un valor razonable. Aún así pago 10 dólares por este servicio que sólo uso para una muy pequeña fracción de mis contenidos.
    La mejora en el rendimiento de tu sitio por un lado es notable pero a la vez no es tan significativa ya que tu sitio es muy “liviano”. Si bien se reduce a más de la mitad el tiempo en que se carga la página esa reducción (de algo más de 1 segundo) tal vez sea imperceptible para un visitante promedio, y sólo la notaría en la primera página de tu blog que visite ya que al recorrer otras secciones su explorador ya tendrá “en cache” mucho del contenido que ya no le será necesario volver a descargar. Me refiero a que su explorador ya tendrá almacenado todo eso que va en el “header”, en la barra lateral, en el “footer”, y todas esas imágenes y archivos que se repiten en cada página o sección del blog.
    También uso MaxCDN, un servicio similar aunque no tan bueno como Amazon, que sale aproximadamente la mitad. Y contraté un plan de webhosting compartido en Hostgator para usarlo como si fuera un CDN, ya que es muy confiable y “veloz”… y baratísimo (tarifa plana, servicio “ilimitado”).
    Probé el plugin W3 Total Cache pero finalmente me decidí por WP Super Cache un plugin similar pero con menos opciones de configuración pero que puedo entenderlas todas. Ambos plugins tienen excelente reputación pero mi impresión es que WP Super Cache se adecua más a mi nivel como usuario de WordPress. Como no uso Amazon CloudFront para la totalidad de mi blog he tenido que subir manualmente los archivos a Amazon, lo cual es bastante más complicado que el proceso automático que describes aquí.
    Gracias nuevamente y te mando un gran abrazo…!!!

    • Hola Axel:

      Por supuesto que el precio depende del tráfico del sitio y de la cantidad de archivos almacenados. Aun asi para mi es un factor importante la capacidad de poder servir mi sitio web desde múltiples áreas geográficas y no directamente desde mi servidos compartido en Hostgator. Al ser un servicio compartido los recursos son limitados y aunque Hostgator brinda un servicio excelente lo hago con la vista puesta en el futuro cuando el blog reciba un nivel de visitas tal que el servicio compartido se quede pequeño. Por otro lado el tiempo de carga de una página ha pasado a ser muy importante a la hora de mostrar la pagina en los resultados de búsqueda después de los cambios efectuados por Google con las actualizaciones de su algoritmo Panda y Penguin. Eso unido a que por ahora lo que pago es casi de risa pues me compensa bastante.
      Yo también probé WP Super Cache pero al final terminé con W3TC por la misma razón que tu lo desechaste, me brindaba más opciones de configuración. Mi perfil profesional es bastante “técnico” por decirlo de alguna forma. Soy programador y estoy acostumbrado a lidiar con PHP, servidores, css, javascript y demás. El proceso que describo en el tutorial es la forma fácil de hacer las cosas y la que creo que se ajusta más al perfil de los lectores de este blog. Es decir, la forma en la que CloudFront se encarga de subir automáticamente los archivos. La otra como bien apuntas es más complicada, quizás en otro momento escriba un post explicándola.
      Un saludo y gracias por el apunte.

      Abraham Laria

  6. Alejandro Logan dice:

    Hola, la verdad es muy completo este tutorial pero quisiera hacerte una pregunta.

    Siguiendo el también completísimo tutorial de w3 total cache configuré las opciones tal como indicaste y probe que aumentaba la velocidad del sitio, tanto con pingdom, gtmetrix y google page speed.

    Despues active el plugin jetpack con photon para que use el cdn de wordpress y esta funcionando muy bien, con solo un click.

    Mi consulta es la siguiente: Sabes si puedo usar los 2 servicios (photon y cloudfront)?
    Porque photon aloja imagenes (aunque no todas) pero no js ni css.

    Agradezco tu respuesta.

    PD: Dada la nueva version de w3 total cache aguardo las “prometidas ;)” actualizaciones sobre estos tutoriales ya que las novedades me suenan demasiado a chino basico…

    • Hola Alejandro:
      En principio no hay ningún problema aunque yo he leído algunos artículos que comentan que photon tiende a poner el sitio algo lento. Realmente no sé si es cierto pues no he hecho muchas pruebas, solo lo usé una vez y al comprobar que no guardaba todas las imágenes no lo seguí usando aunque si uso jetpack. Por otro lado si usas CloudFront no es necesario usar Photon porque ya el CDN de Amazon se hará cargo de las imágenes así como los CSS los Java Scripts y otros archivos estáticos. CloudFront si sube todas las imágenes sin excepción y ademas la red de distribución a nivel mundial es mucho mayor que la de WordPress. Otra variante sin usar CloudFront podría ser Photon para las imágenes y CloudFlare, que es gratis, para el resto. Todo es cuestion de hacer pruebas.
      Resumiendo:
      En principio no hay problemas al usar los dos juntos pero no es necesario ya que CloudFront se hace cargo de todo.

      Saludos.

      Abraham

  7. Alejandro Logan dice:

    Perfecto! Ya cambie de photon a amazon.
    Y por lo que decis ni vale la pena probar con cloudfare (que tambien aparece como opcion en w3 cache)

    Ya segui el tutorial pero las imagenes todavia estan en el servidor de wordpress… Hice todos los pasos: cuenta en cloudfront, cname en hostgator y w3 cache pero todavia las imagenes estan en el servidor de wordpress…Es normal la demora en esto?

    Muchas gracias por la paciencia 🙂

    • La demora no es normal es proceso es casi instantaneo dependiendo de la cantidad de imágenes por supuesto. Asegúrate de que en General en la opción CDN tienes seleccionado CloudFront en la opción Pull y no en Push y que esta marcada la casilla de habilitar el CDN. Luego borra todas las caché. Para ver si ya están en el CDN haces click derecho en la imagen y le das ver imagen la url debe ser algo así http://cdn.tuweb.com/….
      En cuanto a CloudFlare tiene mucho sentido configurarlo junto a CloudFront. Tengo casi listo un post para explicarlo.
      Saludos.

  8. Hola, muchas gracias por este gran tutorial. Me surgio problema casi finalizando el proceso.

    Argegue 7 DNS a mi hosting, después los pase a Amazon y luego a W3 Total Cache.
    El problema me surge cuando quiero hacer la distribución. Me salta esto:

    “Uno o varios de los CNAMES que creaste ya están asociados a un recurso diferente”

    Me tiene loco este problema, no logro ver donde esta eso que me dice.

    Agradezco tu respuesta
    Saludos

    • Hola Juan es muy sencillo tu problema. Estás intentando crear una nueva distribución con los mismos CNAMES. Al parecer ya en algún momento habías hecho click en el botón de crear distribución y esta se creó bien ya que el error indica que los CNAMES están asociados a otra distribución. Si intentas hacer click en crear distribución manteniendo los mismos CNAMES en W3TC CloudFront devuelve ese error. Lo único que necesitas hacer es ir a la consola de administración de CloudFront en Amazon y asegurarte de que solo hay una distribución creada. Si hay más de una elimínalas y quédate con la primera de todas. Si solo hay una solo tienes que hacer click en el botón probar distribución de CloudFront, no es necesario intentar crear una nueva. Si al hacer click en probar distribución el resultado es OK todo esta perfecto y puedes seguir adelante. Creo que me he liado un poco pero resumiendo es lo siguiente:
      1. Verificar que solo hay una distribución creada en la consola de administración de CloudFront. Si solo hay una ir al paso 3.
      2. Si hay más de una eliminarlas y quedarte con la primera que creaste.
      3. Hacer click en el botón probar distribución de CloudFront en el apartado CDN de W3 Total Cache. NO sigas haciendo click en crear distribución.
      4. Enjoy it my friend 🙂

      Cualquier problema no dudes es escribir de vuelta.

      Saludos.

      Abraham.

  9. Hola Abraham,

    Me fije en la consola de Amazon y solo tengo una distribuión creada. Lo que tengo en esa distribución son los diferntes CNAMES como los creaste vos. cdn, cdn1, cd2, etc. Después me fije en mi hosting y tamibien creo haberlos creado bien, ponía el cd1,cd2 todo así mas el Domain name que era el número.cloudfront.net. Los agregue y nada mas.

    Cuando prubeo el testeo de la distribución me sale que esta perfecto, pero cuando la quiero crear me sigue saltando el mismo error.

    Agradezo tu respuesta
    Saludos

    • Es que ya está creada por eso te sale el error pq al hacer click en crear distribución estas intentando crear una segunda distribución con los mismos cnames. Tu configuración está perfecta y el testeo te lo demuestra. Ya tu distribución está creada y funcionando, sigue adelante.
      Saludos.

  10. Ok Abraham. Ya te entendi. Muchas gracias por tu tiempo.

    Saludos
    Juan

  11. Alejandro Logan dice:

    Hola, verifique todos los pasos pero sigue igual.
    Como tambien tenia problemas con minify, puse los 2 en modo debug y esto es lo que me aparece:

    Quiza puedas ayudarme un poco mas con estos datos.

    Muchas gracias nuevamente.

  12. Alejandro Logan dice:

    Lo que aparece es esto:
    W3 Total Cache: Minify debug info:
    Engine: disk: basic
    Theme: 24cce
    Template: archive
    Reject reason: DONOTMINIFY constant is defined

    W3 Total Cache: CDN debug info:
    Engine: cf2
    Reject reason: DONOTCDN constant is defined

    • Hola Alejandro:
      La verdad no se que te puede estar sucediendo. Te recomiendo que deshabilites y borres W3TC y luego lo vuelvas a instalar. Solo W3TC no tienes que eliminar el CDN.
      Saludos.
      Abraham

  13. Alejandro Logan dice:

    Bueno, despues de investigar pude solucionar el problema de cloudfront.
    El problema era el plugin wpsubscriber…lo desactive y todo empezo a funcionar perfecto!
    Asi que a cambiarlo (ya estaba viejito) por optinskin o el que recomiendas PIppity.
    Necesito poder hacer tracking de donde se registran los usuarios con mailchimp, como indican aqui:
    http://blog.mailchimp.com/tracking-signup-pages-via-the-mailchimp-embedded-forms/

    Sabes si con pippity puede hacerse eso?

    • Me alegra que hayas resuelto el problema. Con Pippity no se puede y no se si con optinskin se pueda. Lo que yo hago ( en Aweber) es tener 3 formularios distintos que responden a la misma lista. Uno para la página de inicio, el final de cada post y cualquier otra página. Luego tengo otro para la barra lateral y por último uno para Pippity. Al ser 3 códigos distintos siempre se de cuál de ellos viene la suscripción y además me beneficio del sistema de estadísticas de Aweber que es mucho más completo que el de Pippity y Optinskin. Estoy 99% seguro de que puedes hacer lo mismo en mailchimp. La diferencia es que Aweber inserta el ” hidden field” automáticamente al crear el formulario y al parecer en mailchimp, según el Link que me enviaste, hay que insertarlo a mano editando el código html. Al final en uno u otro tienes como resultado el código html del formulario y es eso lo que se inserta en Pippity, optinskin, la barra lateral o donde desees.
      Saludos.

  14. Hola Abraham,

    Una consultita mas quería hacerte. Supuestamente todas las imágenes, el wp-content, etc las tendría que ver en un bucket de Amazon S3 o eso no tiene nada que ver con Cloudfront.

    Saludos
    Juan

    • S3 no tiene nada que ver con CloudFront. No es necesario guardar nada en S3 porque CloudFront se encarga de copiar lo que sea necesario de tu propio servidor de hosting y luego lo almacena en su propia nube para distribuir los contenidos.

  15. Hay una cosa que no me queda clara y que no has comentado en este post y es sobre el “Minify mode:” ya que creo que si usas el cloudfront tienes que selecionar el tick “manual” y en tu anterior post selecionabas tick “auto”

    Cual tendria que selecionar con el Cloud de Amazon?

    Muy buena tu web
    Saludos

  16. Eulises Avila dice:

    Hola Abraham,

    El W3 tambien permite cambia automáticamente las url de las imágenes de mi server por las del cloud?, o bien que plugin recomiendas para ese proceso para no hacerlo a pie?

    Saluds

  17. Hola Abraham,
    navegando por la red he visto que estás muy “puesto” en el tema, y si me permites me gustaría hacerte una consulta. El caso es que soy nuevo en esto de los CDN, y necesito distribuir a nivel mundial, entre 8 y 15 ficheros de unos 25Mb de metadatos en broadcast. Es decir, a una hora concreta empieza la captura y la emisión de datos en tiempo real, y una vez publicados en Internet, unos 10.000-100.000 usuarios deberían de poder visualizar los datos.
    De momento no necesito almacenar los datos.
    Creo que el servicio que necesito es CloudFront, pero no sé como valorar la oferta usando su configurador. Por favor, ¿podrías hacerme algún comentario?
    Muchas gracias.
    David

    • Hola David:
      La verdad no entendí muy bien. Si esos 25mb no están almacenados quiere decir que se transmiten en vivo? si es así no se si CloudFront te sirve para eso. Si se encuentran almacenados en algún lugar entonces el precio dependerá sobre todo de la cantidad de ancho de banda que sea consumido. No creo que el precio sea demasiado pero en todo caso puedes probar con CloudFlare que es gratis y realiza mas o menos la misma función y ver que tal te va.
      Saludos.

  18. Hola Abraham,

    Gracias por tus posts de configurar 3W Total Caché. Aun siendo de una versión anterior me ha sido muy útil y, junto con este tutorial de Cloudfront he triplicado la velocidad de carga y subido en pingdom de un 83 a un 91.

    Esperaré a que actualices tus tutoriales a la versión 0.9.2.9 para revisar mi configuración de 3W TC.

    Muy buenas tus explicaciones, me has aportado muchas cosas que desconocía.

    Héctor

    • Me alegra que te haya sido útil, Hector. En tu otro comentario te respondí que la actualización viene en camino y porque no la he hecho hasta ahora. Un saludo y buena suerte.

  19. Resumiendo hay que crear 7 subdominios en los cuales se modifica las dns como te da 3442342342.cloudfront.net, la pregunta es también hay que modificar las dns del dominio principal?

  20. Hola, abraham, Acabo de hacer exactamente casi todo lo que me dijiste. Puedo decir que mi pagina ahora carga a mil quilometros por hora. Pero quiero comentarte de un error.

    Al inicio cree 8 CNAMEs, y los agrege a Amazon, y luego al w3 total cache. Pero al final cuando utilice la pagina web, algunas paginas se veían feas y sin imágenes, y todo mal distribuido.

    Luego fui a CDN en w3 total cache, y me di cuanta de que los CNAMEs del 0 al 4 al lado de estos decía lo siguiente:

    CNAMEs 1 (reserved for CSS)
    CNAMEs 2 (reserved for JS in )
    CNAMEs 3 (reserved for JS after )
    CNAMEs 4 (reserved for JS before )

    Pero del 5 al 7 no tenían ningún mensaje

    Así que los borre, así como también los borres de amazon.

    Luego, utilice mi pagina nuevamente, y todo estaba bien, las paginas cargaban
    rapidísimo. Lo que creo es que no eran necesarios los demás CNAMEs.

    También, es la versión de w3 total cache que estoy utilizando 0.9.2.10, por lo que pienso que tal vez esto pudo haber influenciado.

    No se realmente, solo dime que opinas?

    • Hola Alex:
      No tiene nada que ver con la versión de w3tc. Los 4 primeros cnames están reservados y el resto se usan para distribuir las llamadas http. No hay una cifra exacta puedes usar 4, 5 o 20 simplemente 8 (0-7) es una cifra aceptada por la comunidad como “correcta”. La discusión sobre el tema es bastante amplia en los foros. Si te funciona bien así como lo tienes, perfecto.
      Saludos.

      • Gracias por tu respuesta. De verdad que el sitio ahora esta mas rápido. Pero imagino que se pueden alcanzan valores mucho mas altos. Con la herramienta de developers de google el sitio alcanzo un 85, pero para mobiles un 66

        Acaso existe algo mas que se pueda hacer para acelerar mas las cosas? Si funciona, porque no mejorarlo mas? Que dices…

        Alexander

  21. Hola Abraham,

    Muy buenos tus artículos, los encontré navegando por Internet, y la verdad, es lo mejor que he encontrado sobre cómo configurar W3 Total Cache. Además, son muy fáciles de entender y de seguir. Me han ayudado mucho.

    Ya he hecho todo lo que indicas, y el tiempo de carga ha pasado de 3.53 a 1.73

    Por otro lado, entre todos los ficheros que aparecen en “Pingdom Website Speed Test”, he visto que están los thumbnails y los banners que van apareciendo en la Página, y son los que más tiempo de carga tienen. Por eso te pregunto, ¿no hay alguna forma de mejorar el tiempo de carga de estos ficheros?

    Muchas gracias por tu ayuda, y un saludo.

    • Hola Miguel:
      Si los banners publicitarios provienen de los dominios de los anunciantes realmente no se si se puede hacer algo más que aceptarlo. En cuanto a los thumbnails probablemente usan código javascript para generarse. Un plugin que me ha servido mucho y que uso actualmente es JavaScript to Footer. Este mueve todos los archivos javascript al final de la página impidiendo que se ejecuten al principio cuando la página esta cargando. Una vez cargada la página se ejecutan los scripts necesarios, esto ahorra tiempo de carga y por lo general es una buena práctica, de hecho es uno de los requisitos de la herramienta de medición Yslow (desarrollada por Yahoo). Con esta respuesta también contesto a Alex.
      Saludos a todos.

  22. Hola, abrahamlaria, hola, a todos. Quiero contar algo sorprendente sobre este tutorial.

    Se darán cuenta que mas arriba en los comentarios, que yo postee en May 19, 2013 al 1:42 pm, de que había implementado lo de CND en Amazon & W3 Total Cache. Y que mi sitio estaba mas rápido.

    Ahora resulta que revisando en google el rankeo de mi pagina, la cual ya sabia hacia muchos, que estaba en la posición 9,9 media.

    Hoy resulta que 1 día después de implementar CND en Amazon & W3 Total Cache, mi sitio web. se encuentra:

    En México: Poscision: 1
    En Colombia Pocision 3
    En España Posición 3

    En las demás no he revisado, pero es increíble! En solo un día, eso es asombroso! Gracias por el magnifico post

    Alexander

  23. Hola, abraham, hola a todos, soy alexander, te escribo para preguntarte algo, pues creo que puede servir de instrucción para todos.

    Hice, unos cambios en el style.css de mi tema de wordpress, pero resulta que cuando verifico, estos no surgen efectos. Se que tiene que ver con 3 w total cache.

    Por eso pregunto. He vaciado todos los caches una y otra vez, pero los cambios que hice en la hoja de estilo no surgen efecto, de hecho, descarge esa hoja de estilo para ver si realmente estaban los cambios que yo había echo y efectivamente estaban ahí.

    Pero cuando le doy a inspeccionar elementos con google chrome, aun se ven las configuraciones anteriores. A que se debe? NO entiendo…

    • Hola Alexander:
      A mi me paso lo mismo al principio por culpa del CDN. Si usas cloudfront es un problema de versionado del archivo CSS. Supuestamente desde la consola de administración de AWS se le hace un purge a ese archivo y ya cuando lo vuelva a leer funciona…en teoría pq a mi no me funcionó.
      Lo que hice fue desabilitar w3tc, editar el CSS, borrar el CDN completo desde la consola de AWS (puede tardar unas horas). Luego volví a instalar el CDN siguiendo los pasos del tutorial, Activé w3tc, conseguiré el CDN en el w3tc y voila!!! , Funcionó y no ha dado más problemas en posteriores ediciones. Espero te sirva.

  24. Hola soy alexander, gracias por tu respuesta. Leyendo un poco en la documentación de amazon, gracias a la referencia de tu respuesta, puede entender las cosas. Purge from cache, funciona, solo hay que esperar unos cuantos minutos para que expire el obect chache. Lo hice y me funciono. El problema es que se amazon cobra por eso.

    Dicen que es preferible lo de los objetos versionados, pero lo encontré muy trabajoso pues hay que cambiar links. Imagino que tendré que leer mas al respecto. Gracias por todo!

  25. Hola, abraham, una pregunta breve. Porque hay que usar CNAMEs? Acabo de implementar el cloudfront de amazon a otro sitio web mio, y no use CNAMEs. Para mi sorpresa este sitio saco un puntaje de 93 de 100 en google speed test mucho mas alto que el sitio al que si habia usado los CNAMEs, el cual saco un 87.

    No es mucha la diferencia, pero, cual es la importancia realmente de estos CNAMEs?

  26. Hola, hice todo lo que indicaste y la velocidad de mi página mejoró bastante. Eso sí, hubo unos momentos en los que no se cargaban ni los CSS ni las imágenes y creía que había hecho algo mal. Al recargar la página pasado un tiempo, empezó a funcionar perfectamente.

    Ahora quiero implementarlo en otras páginas (con otros dominios). Supongo que tendré que crear otra distribución, ¿no?

    Y por último, ¿hay alguna manera de ver cuánto ancho de banda de banda llevo consumido en CloudFront, así como el dinero gastado hasta ahora?

    ¡Muchas gracias!

    • Hola Diego:
      Me alegra que te haya servido. Tienes que crear una nueva distribución por cada nuevo sitio web. En tu página de amazon aws puedes ver el histórico de lo que hdd ido pagando y ahora mismo no recuerdo si el ancho de banda también. No puedes ver cuanto dinero vs gastando según transcurren los días pero no te preocupes a menos que tenga millones de visitas y confundas un ancho de banda enorme. Yo pague ayer $0.76 por todo el mes de junio con un promedio de 1200 visitas diarias.

      • Creando nuevas distribuciones, he visto que no empiezan a funcionar hasta que el “Status” de la distribución es “Deployed” (está unos minutos “InProgress” antes, durante los que no funciona).

        Ya he visto que van saliendo los gastos en “Account Activity”. Antes no salía nada porque llevan algún día de retraso.

        • Si hasta que no pone Deployed no comienza a funcionar. Ya vi el Account Activity antes no salían pero parece que ya agregaron esa funcionalidad. Gracias!!!

          • Casi medio mes después el funcionamiento es perfecto. Al implementar el CDN a la vez que cambiaba de Hosting (de 1&1 a HostGator) no sé si la mejora en la página es por uno o por otro. Pero la mejora es evidente.

            Eso sí, me va a costar más de lo esperado. Entre todas las webs, tendré entre 6.000 y 9.000 páginas vistas al día (con bastantes imágenes), por lo que estimo que me costará unos 6 dólares al mes (ahora llevo casi 3).

            Pero la mejora de la velocidad de la página está haciendo elevar el número de visitas y eso supone también más dinero por publicidad (cantidad mucho mayor que esos 6 dólares mensuales).

          • Por cierto, he visto que normalmente recomiendas GoDaddy para los dominios. ¿Por el precio? ¿o por algún motivo especial? (mejora con las DNS, …)

          • Hola Diego:
            Se debe a las super ofertas y descuentos que te llegan por correo. He comprado dominios por poco más de 2 dólares y he renovado otros con 30% y más de descuento. Al ser una empresa enorme se pueden permitir esas ofertas. Es cierto que siempre están tratando de venderte un montón de historias que no necesitas presentandolas como si de verdad las necesitaras pero yo simplemente paso de ellas. Me limito a comprar o renovar el dominio y punto.
            Otra empresa que provee un buen servicio sin querer venderte el cielo y la tierra es Namecheap pero no esperes descuentos similares a los de Godaddy.

  27. Buen día, Gracias de antemano he aprendido bastante. Tres preguntas, por favor, 1° para un Blog como el mio en donde se encuentra en un subdominio quiero identificar si lo realice correctamente, en los registros CNAME, estaba bien escrito así?: cdn.blog.e-mipyme.com. 2° al final una vez termino los pasos: en Configuración del CDN, al darle click en Test CloudFront distribution sale en rojo el siguiente dialogo: Empty access key, que debo hacer? 3°hay alguna forma de saber mediante una herramienta en linea que al ingresar la URL se corrobore que están correctamente aplicados los ajustes y este corriendo los CDN?. Espero puedas ayudarme y además que me haya podido expresar de manera adecuada. Cordial Saludo y Gracias.

    • Te respondo rapido pues ando en la calle luego amplio mi respuesta. en tu pregunta 2 debes poner la access key y la secret key que te proporciona cloudfront para que funcione.

      • En cuanto al 2° punto, lo que me indicabas ya lo había hecho, la solución fue editar un archivo: que indica en el siguiente link: http://wordpress.org/support/topic/v-093-cdn-cloudfront-error-empty-access-key en la siguiente ruta: lib/W3/AdminActions/CdnActionsAdmin.php:371, funciono y cambio a Test passed, creo que esta funcionando, porque ya vi los reportes del trayecto del dia en Informes de consumo en la cuenta de AWS, lo que si me gustaría saber es si hay una herramienta en linea donde le señale que esta funcionando así como la hheramienta de CacheCheck opendns, si lo sabes, me lo haces saber por favor, finalmente procederé a seguir tu tutorial de cloudflare. Saludos!

        • Tenia el mismo problema, y siguiendo tus pasos ya pude resolver, pense que debido a los cambios de Amazon S3, específicamente por las politicas, anuncio de la eliminación de Security Credentials y otras razones seria algo mas complejo.

          Quizás ya deberían estar trabajando en una solución a ese percance de manera oficial

          Saludos

  28. Yo lo pongo todo en S3.
    Lo subo manualmente y pongo los enlaces en mi web.
    S3 sale mucho más barato que usar Cloud

    • Es muy tedioso tener que hacer todo manual. Del mismo modo no se ve profesional dado que no mostrar hacer que se muestre la dirección url de tu pagina.

      Para finalizar tengo entendido que CloudFront es mas rápido que el S3 normal.

      Personalmente como mis proyectos son con fines de lucro, prefiero pagar mas por una buena calidad; eso también lo digo por el servicio de hospedaje tradicional.

      Saludos

  29. Hola Abraham, lo primero agradecerte mucho por esta sección que nos ha servido de gran ayuda junto con la configuración de W3 Total Cache.

    Administro una página web: Ver página

    He realizado todos los pasos anteriores minuciosamente (a falta de añadir más direcciones dns), pero a la hora de ver los efectos de la carga…

    Sorpresón!! Mi web carga en muy poquito tiempo, en menos de un segundo, pero sin hojas de estilos, sin archivos js, sin imágenes..es decir sólo el HTML

    Es desactivar el servicio de CDN y todo vuelve a la normalidad.. Qué puede estar pasando?

    Muchas Gracias!

    Saludos

    • Crea al menos 4 CDN porque Cloudfront asigna uno a cada una de esas tareas (CSS, Javascript, Images…). Luego usa el plugin “javascript to footer” para que la página cargue primero y los scripts después. Por último usa Cloudflare que gestiona muy bien el Minify liberando a W3TC de esa tarea. Cloudflare se encargará de cargar los estilos y algunos javascript. Aquí mismo en el blog está el tutorial.
      Saludos.

  30. Hola Abraham,

    Solo un comentario agradeciéndote el tutorial. He conseguido reducir en más de un segundo el tiempo de carga y la mejora que ello implica en todo.

    Muchas gracias

  31. Pedazo de turorial, de no saber ni configurar W3 Total Cache de forma correcta a montarlo todo y encima funcionando bien, subo en google search speed y todo gracias a tu post, muchas gracias crack

  32. abraham laria muchas gracias por tu información, quisiera pedirte el favor de como puedo conectar mi pagina web dinamic esta echa en php, ya estoy inscrito en aws soy novato y quisiera encontrar la vía. Muchisimas gracias

  33. Tengo una duda. Gracias a tu gran tutorial conseguí instalar perfectamente el CDN de Amazon. Sin embargo, estoy teniendo algunos problemas en mi web. Es una web que genera muchas entradas diarias. Igual podemos generar 20 o 30. Esto provoca que cuando llevamos un buen rato añadiendo nuevas entradas, el servidor (Hostgator) empiece a sentirse sobrecargado. Con Apache Logs vemos las peticiones GET que recibimos, y vemos que hay muchas provenientes de sitios relacionados con Amazon. ¿Puede ser que el CDN me esté generando un sobretráfico en mi sitio para conseguir listar e indexar mi web? Empezamos hace poco por lo que ahora “solo” tenemos 888 entradas. Gracias.

  34. Hola , ante todo gracias por el tutorial. Pero tengo un problema, sigo tus pasos pero se me queda en el paso creating cuando esta creando la distribucione en amazon y no pasa de ahi . Esta parte del proceso que puede tardar ? Gracias.

  35. Hola abraham, en principio gracias por el tuto. Todo perfecto, solo tengo una duda con la creacion de los cnames. Cual es su utilidad?. Funciona sin crearlos bien ? Algun problema con contenido duplicado?. Ufff, disculpa son mcuhas dudas.

Deja un comentario