Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a better web

1,642 views

Published on

On the eve of what was hoped to be of the biggest traffic days for New York Magazine’s sites, the company was the target of a DDoS attack that caused their sites to go dark. New York quickly turned to Fastly to deflect and overcome the attack. Larry discusses how New York Mag went from zero page views per second to getting back online and recording one of their biggest traffic days of the year with the aid of Fastly’s team and tech. In addition he discusses how New York is leveraging Fastly as part of a larger strategy of performance improvements to deliver the build a better web and deliver the best premium content experience in the context of alternative distribution and consumption channels, such as Google Amp and FB Instant Article.

Published in: Technology
  • Be the first to comment

Building a better web

  1. 1. New York Mag Network of Sites
  2. 2. DDoS • Combination HTTP/SSDP UDP Flood • Target multiple origin server IPs • Highly distributed botnet • Targeted IPsof origin servers • At peak, consumed 5 Gbps origin bandwidth
  3. 3. Attack Starts My Alert First day of vacaction. Check email :-( 2:00 AM 8:00 AM Troubleshoot Work with ISPs. “False” pauses in attack. Attempt recovery. 11:40 AM Help Reach out to Jeff @ Fastly Service Fastly calls me back 11:45 AM Action IRC established. 4-5 Fastly members online. Noon 1:45 PM 2:00 PM Service Provisioned Ready to activate Sites Up Almost immediate across the board recovery of all digital assets.
  4. 4. One of my favorite emails…
  5. 5. Mitigation Details • Swing over DNS for all sites to point to Fastly • Configure a single catch-all service for all HTML under nymag.com domain • Whitelist the Fastly IPs, denying all others • Configure firewall, routers and load balancer for new Fastly connections • VCL adjustments to aid in swing over • Update internal DNS and host entries
  6. 6. New York’s Technology
  7. 7. express Tech we build with now
  8. 8. and…
  9. 9. Tech we’ve Built: Clay CMS Core Engine: Amphora • Composes components into renderable pages • Uses any key-value store of your choice • Architected to provide non-blocking delivery of content • Provides a full RESTful API for managing instances of components, uris, and pages Key Features • Node.js/Express-based CMS • Collection of lightweight frameworks • Based on DRY principles, maintainability, and rapid development
  10. 10. Open Source - http://github.com/nymag
  11. 11. https://www.npmjs.com/~nymdev
  12. 12. New York and Fastly
  13. 13. Fastly@NYMag 14 Services 36 Production Domains 7 QA Domains Full API integration 40% Cost Reduction
  14. 14. Rapid prototyping/testing Iterative Development Instant Feedback Extensible, open and flexible APIs Continuous Integration/Deploy Extra layer of security Fastly Complements the Way We Work
  15. 15. And the results….
  16. 16. The Definition of Fast • Respond quickly (<200ms) • Prioritize above-the-fold content • Use browser cache appropriately (cache-control) • Compress everything • No render blocking js/css calls above fold • Minify • Optimize Images (for each device and use) • Use asynchronous scripts
  17. 17. Page Load Time - 65% Reduction 0 1 2 3 4 5 6 7 8 9 Old CMS Clay
  18. 18. Time to start render - 50% Reduction 0 0.5 1 1.5 2 Old CMS Clay
  19. 19. CSS/JS Reduction - 85% Reduction 0 100 200 300 400 Old CMS Clay
  20. 20. Pagespeed Score - 100% Improvement 0 10 20 30 40 50 60 70 80 90 Old CMS Clay
  21. 21. So we should be happy, but…
  22. 22. “In the first quarter of 2016, 85 cents of every new dollar spent in online advertising will go to Google or Facebook, said Brian Nowak, a Morgan Stanley analyst.” http://www.nytimes.com/2016/04/18/business/media-websites-battle-falteringad- revenue-and-traffic.html
  23. 23. https://www.theguardian.com/media/2016/jul/12/how-technology-disrupted-the-truth
  24. 24. And of course there’s AdBlock
  25. 25. http://digiday.com/agencies/fix-user-experience-first-groupm-wont-pay-ads-forced-ad-blockers/
  26. 26. Fixing the User Experience
  27. 27. Here’s one example…. Readable in less than 1.5 seconds
  28. 28. Fixing the User Experience: Alternative Solutions
  29. 29. To produce great online content you just need… FB IA Markup and API Apple News JSON Format Amp HTML, JS, and Cache
  30. 30. Introduction of Inefficiencies • Increased the cost of innovation and product development • Reduced ability to monetize • Distances content providers from their customers • Data ownership and privacy is muddied even further.
  31. 31. And the user experience?
  32. 32. Google Amp Page - Start render in 4.1, 103 objects
  33. 33. NY’s Mobile Pages - Start render in 3.8s 98 objects
  34. 34. New York Magazine Page - iPhone 6, LTE Connection Google Amp Page Load - iPhone 6, LTE Connection
  35. 35. Where are we going from here? • Use partners like Fastly who obsess about speed • Leverage accepted standards: HTML5, CSS3, HTTP/2 • Make pages faster and experience better and richer • Owning our data, leveraging intelligence at the edge • Personalizing content - optimizing for each user • And Video, of course, lots and lots of Video

×