SlideShare a Scribd company logo

High Performance Front-End Development

•
•
D
drywallbmb

This document provides tips for improving front-end website performance. It discusses how DNS lookups, HTTP connections, sequential loading, bloated DOM, bloated CSS, and large payload sizes can negatively impact performance. It recommends strategies like combining CSS and JavaScript files, using CSS sprites for images, lazy-loading images, minimizing selectors in CSS, reducing the total bits transferred, and optimizing media files. Tools like Sass, asset plugins, and minification are suggested to help implement these techniques.

1 of 30
Download to read offline
high-performance front-end development ben@cornershopcreative.com
SPEED MATTERS
NOT COVERED Apache/mySQL config Using a CDN Choosing a good host
OUR ENEMIES DNS lookups HTTP connections Sequential loading Bloated DOM Bloated CSS Payload size
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.
HTTP CONNECTIONS
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).
HTTP HEADERS
REDUCING CONNECTIONS Combine CSS Files Combine JS Files Use CSS Sprites Lazy-load images
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.
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.
CSS SPRITES Put all your images into a single file, and use CSS to position the background properly.
CSS SPRITE EXAMPLE sprite.png measures 304 x 910 .sprite-ben { height: 117px; width: 91px; background-image: url('img/sprite.png'); background-position: 0 -525px; I’m here background-repeat: no-repeat; }
LAZY-LOAD Doesn’t technically reduce number of HTTP connections, but defers them from initial load. jQuery “lazyload” for images.
SCRIPTS TOO! Use “defer” and/or “async” (HTML5) attribute for JavaScripts. <script defer async src="script.js" onload="init()"></script>
DON’T USE IMAGES CSS3 provides alternatives: Gradients Rounded Corners Text and box shadows Rotation
SEQUENTIAL LOADING
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.
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
IN WORDPRESS wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer Set to TRUE );
BLOATED DOM
MORE ELEMENTS = SLOWER <body class="page"> You can do a count with: <div id="wrapper"> <div id="page"> $(‘*’).length; <div id="main"> <div class="main-side"> <aside id="sidebar"> ... </aside> </div> </div> </div> </div> </body>
BLOATED CSS
SIMPLE SELECTORS html body div#main article#post-22 p a.inline { property: value; } VS. .inline { property: value; } ul li {} is slower than ul > li {} which is slower than .ul-li {}
REDUCING PAYLOAD
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
200K OR 50K One 200K file Ten 5K files DNS Lookup 20ms DNS Lookup 20ms HTTP Overhead 40ms HTTP Overhead 40ms Transfer 782ms Transfer 20ms TOTAL 842ms TOTAL 80ms
TOOLS
FOR MORE Google “Steve Souder” https://developers.google.com/speed/docs/ best-practices/rules_intro http://developer.yahoo.com/yslow/
CONNECT Ben Byrne ben@cornershopcreative.com facebook.com/drywall Twitter: @drywall

More Related Content

High Performance Front-End Development

  • 1. high-performance front-end development ben@cornershopcreative.com
  • 3. NOT COVERED Apache/mySQL config Using a CDN Choosing a good host
  • 4. OUR ENEMIES DNS lookups HTTP connections Sequential loading Bloated DOM Bloated CSS Payload size
  • 5. 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.
  • 7. 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).
  • 9. REDUCING CONNECTIONS Combine CSS Files Combine JS Files Use CSS Sprites Lazy-load images
  • 10. 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.
  • 11. 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.
  • 12. CSS SPRITES Put all your images into a single file, and use CSS to position the background properly.
  • 13. CSS SPRITE EXAMPLE sprite.png measures 304 x 910 .sprite-ben { height: 117px; width: 91px; background-image: url('img/sprite.png'); background-position: 0 -525px; I’m here background-repeat: no-repeat; }
  • 14. LAZY-LOAD Doesn’t technically reduce number of HTTP connections, but defers them from initial load. jQuery “lazyload” for images.
  • 15. SCRIPTS TOO! Use “defer” and/or “async” (HTML5) attribute for JavaScripts. <script defer async src="script.js" onload="init()"></script>
  • 16. DON’T USE IMAGES CSS3 provides alternatives: Gradients Rounded Corners Text and box shadows Rotation
  • 18. 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.
  • 19. 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
  • 20. IN WORDPRESS wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer Set to TRUE );
  • 22. MORE ELEMENTS = SLOWER <body class="page"> You can do a count with: <div id="wrapper"> <div id="page"> $(‘*’).length; <div id="main"> <div class="main-side"> <aside id="sidebar"> ... </aside> </div> </div> </div> </div> </body>
  • 24. SIMPLE SELECTORS html body div#main article#post-22 p a.inline { property: value; } VS. .inline { property: value; } ul li {} is slower than ul > li {} which is slower than .ul-li {}
  • 26. 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
  • 27. 200K OR 50K One 200K file Ten 5K files DNS Lookup 20ms DNS Lookup 20ms HTTP Overhead 40ms HTTP Overhead 40ms Transfer 782ms Transfer 20ms TOTAL 842ms TOTAL 80ms
  • 28. TOOLS
  • 29. FOR MORE Google “Steve Souder” https://developers.google.com/speed/docs/ best-practices/rules_intro http://developer.yahoo.com/yslow/
  • 30. CONNECT Ben Byrne ben@cornershopcreative.com facebook.com/drywall Twitter: @drywall