high performance front-end development
TRANSCRIPT
![Page 1: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/1.jpg)
high-performance front-end development
![Page 2: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/2.jpg)
SPEED MATTERS
![Page 3: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/3.jpg)
NOT COVERED
Apache/mySQL config
Using a CDN
Choosing a good host
![Page 4: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/4.jpg)
OUR ENEMIES
DNS lookupsHTTP connectionsSequential loading
Bloated DOMBloated CSS Payload size
![Page 5: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/5.jpg)
DNS LOOKUPS
Every domain mentioned on your page needs to be
resolved to an IP (20-120 ms)
But too few domains is bad too.
![Page 6: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/6.jpg)
HTTP CONNECTIONS
![Page 7: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/7.jpg)
HTTP CONNECTIONS
Each asset (script, image, css file, font, etc) is retrieved via an HTTP
connection.
Each connection takes a moment to start due to overhead (headers).
![Page 8: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/8.jpg)
HTTP HEADERS
![Page 9: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/9.jpg)
REDUCING CONNECTIONS
Combine CSS Files
Combine JS Files
Use CSS Sprites
Lazy-load images
![Page 10: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/10.jpg)
COMBINING CSS FILES
Use a tool like SASS that combines them for you
Only write a single style.css
Use a plugin (e.g. W3 Total Cache) to combine (& compress!) them for you.
![Page 11: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/11.jpg)
COMBINING JS FILES
Use a plugin (e.g. W3 Total Cache) to combine+compress
them for you.
Manually put all your jQuery plugins into a single file.
![Page 12: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/12.jpg)
CSS SPRITES
Put all your images into a single file, and use CSS to position the
background properly.
![Page 13: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/13.jpg)
CSS SPRITE EXAMPLE
.sprite-ben { height: 117px; width: 91px; background-image: url('img/sprite.png'); background-position: 0 -525px; background-repeat: no-repeat;}
sprite.png measures 304 x 910
I’m here
![Page 14: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/14.jpg)
LAZY-LOAD
Doesn’t technically reduce number of HTTP connections, but defers
them from initial load.
jQuery “lazyload” for images.
![Page 15: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/15.jpg)
SCRIPTS TOO!
Use “defer” and/or “async” (HTML5) attribute for JavaScripts.
<script defer async src="script.js" onload="init()"></script>
![Page 16: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/16.jpg)
DON’T USE IMAGES
CSS3 provides alternatives:
Gradients
Rounded Corners
Text and box shadows
Rotation
![Page 17: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/17.jpg)
SEQUENTIAL LOADING
![Page 18: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/18.jpg)
SEQUENTIAL VS. PARALLEL
Browsers can load some assets in parallel, such as CSS files, images, and fonts. This is good.
But some assets —JS files — are loaded in sequence and block others.
![Page 19: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/19.jpg)
CSS AND SCRIPTS
JS should be at bottom of page.
CSS should go at the top of your page and be loaded via
<link> not @import
![Page 20: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/20.jpg)
IN WORDPRESS
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Set to TRUE
![Page 21: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/21.jpg)
BLOATED DOM
![Page 22: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/22.jpg)
MORE ELEMENTS = SLOWER
<body class="page"> <div id="wrapper"> <div id="page"> <div id="main"> <div class="main-side"> <aside id="sidebar"> ... </aside> </div> </div> </div> </div></body>
You can do a count with:
$(‘*’).length;
![Page 23: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/23.jpg)
BLOATED CSS
![Page 24: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/24.jpg)
SIMPLE SELECTORS
html body div#main article#post-22 p a.inline { property: value;}
.inline { property: value;}
VS.
ul li {} is slower than ul > li {} which is slower than .ul-li {}
![Page 25: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/25.jpg)
REDUCING PAYLOAD
![Page 26: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/26.jpg)
REDUCE TOTAL BITS
Minify JS and CSS (and HTML)
Write clean code
Don’t scale images in browser
Use right image filetype, blur in JPGs
![Page 27: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/27.jpg)
200K OR 50KDNS Lookup 20ms
HTTP Overhead 40ms
Transfer 782ms
TOTAL 842ms
DNS Lookup 20ms
HTTP Overhead 40ms
Transfer 20ms
TOTAL 80ms
One 200K file Ten 5K files
![Page 28: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/28.jpg)
TOOLS
![Page 29: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/29.jpg)
FOR MORE
Google “Steve Souder”
https://developers.google.com/speed/docs/best-practices/rules_intro
http://developer.yahoo.com/yslow/
![Page 30: High Performance Front-End Development](https://reader033.vdocuments.net/reader033/viewer/2022060206/55a25d731a28ab962b8b47d7/html5/thumbnails/30.jpg)
CONNECT
Ben Byrne
facebook.com/drywall
Twitter: @drywall