Optimize or Die Tryin'

Optimize or Die Tryin’ Damian Le Nouaille CTO at Geeksters,
Prof’ IngéSup, HashtagBattle @damln

Today BACKEND FRONTEND Today it’s me!

FLAT DESIGN = PERFORMANCE

Frustration: Indirect Performance • Not visible in development • Fast
computers • Very fast Internet access • localhost Oh it’s fast! Look at my computer. PS: You’re not the end user.

Timeline HTML What we want ! JavaScript Images DOMReady <body>
CSS

Plan • Images • Concatenation • Minification • Compression •
Versionning • Async • Share Buttons • Extra

Images: format, size and optimisazion • Choose the format: PNG
8-24 bits? JPEG? • Right size: 800x600 for a thumbnail? • Paint: width + height on <img> • ImageOptim, remove meta-data, reduce image weight • No images: Fonts or SVG (for icons)

Images: Example

Reminder ...

Timeline HTML CSS JavaScript Images DOMReady <body>

Timeline HTML CSS JavaScript Images DOMReady <body> Goal

Concatenation Goal: • Reduce number of requests Tools: • Sass
: use partials for CSS • Grunt (grunt-contrib-concat) : Combine JavaScript files in the right order

Concatenation: Example _global.scss main.css _nav.scss _sidebar.scss 160 Ko 111 Ko

Timeline: After Concatenation HTML CSS JavaScript Images DOMReady <body> Goal

Minification Goal: • Reduce the weight of the request Tools:
• Sass : ouputFormat :compressed • Grunt : grunt-contrib-uglify

Thanks, Brackets <3 • Browsers don’t care about formating •
Thanks! {;}

Minification: Example 111 Ko 88 Ko

Timeline: After Minification HTML CSS JavaScript Images DOMReady <body> Goal

Compression (Gzip) Goal: • Reduce the weight of the request,
even MORE Why: • It’s easy to compress text • Good support (IE8+)

Compression: Example 88 Ko 16 Ko

Compression: Real Accept-Encoding:gzip,deflate, sdch /css/main.css main.css main.css.gz GZIP Content-Encoding:gzip GZIP
content NGINX / APACHE

Compression: Check Weight

Compression: Check Headers

Timeline HTML CSS JavaScript Images DOMReady <body> Goal

Versionning: Cache Busting Goal: • Don’t GET existing assets Basics:
• Rename assets (with MD5) • HTTP header : max-age=30000000

“It works for me” • “Hi Bob, I upload the
latest modifications.” • “I don’t see them, I have an old version.” • “Aaahhhhrrrrgffgg” Bob’s iPad is crap. NO!

Versionning: Grunt-Hash lib.min.js MD5 lib.min.12345678.js assets.json { “lib.min.js”: ”lib.min.12345678.js”, ...
}

Versionning: ViewHelper

Grunt, is it fast? 1.6 sec

Async loading Goal: • Accelerate the DOM Load • Provide
visual feedback to visitor Where: • Images • JavaScript

Async load: Images How: • Change the source: src=”load.gif” •
Add: data-src=”image.jpg” • Use a plugin to replace src by data-src • Unveil.js

Images: Example HTML JavaScript

Timeline: After Unveil.js HTML CSS JavaScript Images DOMReady <body> Goal

Async load: JavaScript How: • Use head.js • Declare the
files • Use the callback • NO AMD • DEAD SIMPLE

JavaScript: Example

Timeline: After head.js HTML CSS JavaScript Images DOMReady <body>

Timeline: After Cache HTML CSS JavaScript Images DOMReady <body>

Share Buttons • Facebook likes, Tweet button, etc • Useless
for the rendering • Trigger load at the right time Plugins: • Socialite • AddThis • Sharrre

Extra • Sprite CSS : Compass • CDN : Latency
/ Mobile • Turbolinks : PJAX evolution Tools et readings : • YSlow • Page Speed Insights : Online + Chrome • Guides : Yahoo et Google

Recap’ Source Concat Min Cache Hash Gzip Async 160 Ko
111 Ko 88 Ko 88 Ko 16 Ko MD5 Development Server Client

Thanks Damian Le Nouaille www.damln.com www.geeksters.co Twitter, Github, Coderwall: @damln

Optimize or Die Tryin'

Optimize or Die Tryin'

More Decks by Damian Le Nouaille

Other Decks in Programming

Featured

Transcript