Transcript
Page 1: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Presented by:

Ilya Grigorik, Web Performance Engineer – GoogleSuzanne Aldrich, Solutions Engineer – CloudFlare

Exceptional page speed optimizations from CloudFlare and

Google

Page 2: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Ilya GrigorikWeb Performance Engineer

Google

Suzanne Aldrich Solutions Engineer

CloudFlare

Page 3: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Page 4: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Page 5: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Page 6: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Page 7: Exceptional page speed optimizations from Google and CloudFlare

https://www.udacity.com/course/website-performance-optimization--ud884 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

Page 8: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Optimize Content Efficiency!Text, fonts, images… all the things.

Page 9: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

❏ Image Quantity❏ Vector vs. Raster❏ Format❏ Metadata❏ Compression❏ Scaling❏ Automated Optimization

Page 10: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

❏ Compress text content❏ Compress fonts❏ Minify resources❏ Cache the assets

❏ Cache-Control❏ ETag for revalidation

Page 11: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Page 12: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Page 13: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Concatenation...

Page 14: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Page 15: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Page 16: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Page 17: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Inlining vs Server Push

Page 18: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Multiple Link headersLink: </asset/to/push.js>; rel=preload; as=script

Multiple assets per Link headerLink: </css/main/style.css?v=0ab123c456>; rel=preload; as=style,</content/images/logo.png>; rel=preload; as=image,</scripts/js/jquery.js?v=0ab123c456>; rel=preload; as=script

Page 19: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Reduce your distance (use a CDN!)"Forrester showing that 47% of users expect pages to load in two

seconds or less.” - http://cfl.re/conversup

Page 20: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Page 21: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Tools/Resources

Page 22: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

● hpbn.co/http2● bit.ly/http2-opt● Isthewebhttp2yet.com● cloudflare.com/http2● istlsfastyet.com

Tools/Resources● Critical Rendering Path @ Udacit

y● Web Fundamentals

Page 23: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Q & A

Page 24: Exceptional page speed optimizations from Google and CloudFlare

In collaboration with:

Exceptional page speed optimizations from CloudFlare and Google

Ilya Grigorik & Suzanne Aldrich

Ilya Grigorik@igrigorik

Suzanne Aldrich @SuzanneAldrich


Top Related