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 CloudFrontOn 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 ChartDesktop 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 ampBoilerplate 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