Front-end Performance: NebraskaJS, 2015

Front-end performance or, how to make websites load super fast

Trevan Hetzel @trevanhetzel trevan.co

Beautiful WordPress hosting built for designers

Front-end performance or, how to make websites load super fast

“80-90% of the end-user response time is spent on the
front-end. Start there.” - Steve Souders

Caching headers Server-side caching CDN Images CSS JavaScript GZIP Reduce
cookies Dedicated host Minify HTML Database queries

Caching headers Server-side caching CDN Images CSS JavaScript GZIP Reduce
cookies Dedicated host Minify HTML Transients Database queries

Perceived performance The most valuable metric

How fast a user thinks your site loads

Test yourself before you wreck yourself

Images

No really, use CSS or icon fonts

Sprite

5kb 4kb 4kb 3kb 6kb 5kb 5kb 3kb 6kb ✗

14kb ✓

Compress

OptiPNG PNGGauntlet

Don’t scale images in HTML

What about retina & responsive design?

Lazy load

• Reduce the amount of images used • Sprite •
Compress • Don’t scale in HTML • Lazy load Summary

JavaScript

Is it necessary?

Okay then, concatenate & minify

Write performant code

Defer loading of scripts

Script loaders

https://github.com/ﬁlamentgroup/loadJS loadJS

<head> ... <script> // include loadJS here... function loadJS( src
){ ... } // load a file with loadJS loadJS( "path/to/script.js" ); </script> ... </head>

• Don’t overuse libraries & frameworks • Concatenate • Minify
• Write performant JS • Defer loading Summary

Follow some sort of standard

Concatenate & minify

Stylesheets go in the <head>

But Google says…

Google’s right. Inline critical CSS

Critical CSS Styles that are needed for the ﬁrst, above-the-fold
view are inlined in the <head> The full stylesheet is then loading asynchronously, not blocking the rest of the page

<head> <style>*{box-sizing:border-box}html{padding: 1em;background-color:#f4d93a}body{font- family:’Helvetica Neue',sans-serif; padding:0;margin:0;font-size:100%;line-height: 140%; ... </style> </head>

How to ﬁnd critical CSS • critical by Addy Osmani
• grunt-criticalcss by Filament Group

What about the full stylesheet?

https://github.com/ﬁlamentgroup/loadCSS loadCSS

<head> ... <script> // include loadCSS here... function loadCSS( href,
before, media ){ ... } // load a file loadCSS( "path/to/mystylesheet.css" ); </script> <noscript> <link href=“path/to/mystylesheet.css” rel=“stylesheet"> </noscript> ... </head>

But, but, inline styles aren’t cacheable…

<?php if(isset($_COOKIE['critical_css'])): ?> <link href=“path/to/style.css" rel="stylesheet"> <?php elseif: ?> <style></style> <script> // include loadCSS here... function loadCSS( href, before, media ){ ... } // load a file loadCSS( "path/to/mystylesheet.css" ); </script> <noscript> <link href=“path/to/style.css” rel=“stylesheet”> </noscript> // Set cookie here <?php endif; ?>

• Use a CSS methodology or standard • Concatenate •
Minify • Inline critical CSS • Load full stylesheet asynchronously Summary

Thanks! @trevanhetzel trevan.co

Front-end Performance: NebraskaJS, 2015

Front-end Performance: NebraskaJS, 2015

More Decks by Trevan Hetzel

Other Decks in Technology

Featured

Transcript