Supercharge Your Load Time: – Amazon CloudFront & AMP – christinemovius.com/amp-cloudfront



Supercharge Your Load Time: – Amazon CloudFront & AMP – christinemovius.com/amp-cloudfront

0 0


amp-cloudfront

DevSummit 2017 Presentation: Supercharge Your ArcGIS App with AMP (Accelerated Mobile Pages) and AWS CloudFront

On Github cmmovius / amp-cloudfront

Supercharge Your Load Time:

Amazon CloudFront & AMP

The magic of distributed networks and optimized files

christinemovius.com/amp-cloudfront

I'm Christine Movius

  • Application Developer at Blue Raster (Arlington, VA)
  • Boston College & General Assembly Grad
  • Former Actor & Fulbright Grantee in Malaysia
  • Loves Bad Puns & Elephants

So you have just spent all this time coding a new project...

You want your user to see this:

But the only thing your user on the other side of globe sees is:

Web Hosting Versus Content Delivery Network:

So you have just spent all this time coding a new project AND you have set up a CDN...

But the only thing your user on a mobile device STILL sees is:

File Size Overload:

Mobile Phone Usage > Desktop Usage

Live Chart

Desktop vs. Mobile Usage: Global

Desktop vs. Mobile Usage: Asia

Desktop vs. Mobile Usage: India

Amazon CloudFront & AMP

Amazon CloudFront

  • Powerful CDN service designed to accelerate web content delivery worldwide
  • Integrates easily with other AWS products (e.g. S3)
  • Supports Gzip compression

Set Up Amazon CloudFront

Amazon CloudFront Content Distribution

Don't Forget: Time to Live (TTL)

  • Development: SHORT TTL to see changes in code
  • Production: LONG TTL to improve performance

But What If I Need to Immediately Overwrite My Old Content ☠?

  • Create an Invalidation: sends message to all Edge Locations that they need to pull new content from Origin upon next request
  • Costs extra $$

AMP: Look familiar?

AMP: Accelerated Mobile Pages

  • Google AMP Cache provides an incredibly fast CDN to deliver all valid AMP pages across the globe
  • Custom HTML and 'JavaScript' Components: encourages developers to create mobile-optimized content, use best performance practices, and manage resource loading

Create an AMP Page Demo

html amp

Boilerplate Markup

No script tags??

CloudFront & AMP: Pros & Cons

CloudFront Pros

  • Large global CDN network with cached content at edge locations
  • Flexible and easy to set up
  • Integration with other AWS tools

CloudFront & AMP: Pros & Cons

CloudFront Cons

  • Not a one-step solution for faster load times
  • $$

CloudFront & AMP: Pros & Cons

AMP Pros

  • Large global CDN network with cached content at edge locations
  • Relatively easy to set up, depending on complexity of site
  • Free

CloudFront & AMP: Pros & Cons

AMP Cons

  • Have to follow rules to create valid AMP pages
  • Limits use of JavaScript

Best Practices to Keep in Mind

  • Minify, Uglify, Compress Your Files
  • Avoid JavaScript Library Bloat
  • Don't Try to Cram a Desktop Version of App on a Mobile Device: Create a Simpler, Mobile Version

Helpful Resources

Thank you!

Twitter & GitHub: @cmmovius

christinemovius.com/amp-cloudfront

AMP Map Demo

blueraster.com