Post on 15-Apr-2017
transcript
In collaboration with:
Presented by:
Ilya Grigorik, Web Performance Engineer – GoogleSuzanne Aldrich, Solutions Engineer – CloudFlare
Exceptional page speed optimizations from CloudFlare and
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
Ilya GrigorikWeb Performance Engineer
Suzanne Aldrich Solutions Engineer
CloudFlare
In collaboration with:
In collaboration with:
In collaboration with:
In collaboration with:
https://www.udacity.com/course/website-performance-optimization--ud884 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
Optimize Content Efficiency!Text, fonts, images… all the things.
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
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
In collaboration with:
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
Concatenation...
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
Inlining vs Server Push
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
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
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
Tools/Resources
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
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
Q & A
In collaboration with:
Exceptional page speed optimizations from CloudFlare and Google
Ilya Grigorik & Suzanne Aldrich
Ilya Grigorik@igrigorik
Suzanne Aldrich @SuzanneAldrich