High Performance Front-End Development

853 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
853
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

High Performance Front-End Development

  1. 1. high-performancefront-end development ben@cornershopcreative.com
  2. 2. SPEED MATTERS
  3. 3. NOT COVEREDApache/mySQL config Using a CDNChoosing a good host
  4. 4. OUR ENEMIES DNS lookups HTTP connections Sequential loading Bloated DOM Bloated CSS Payload size
  5. 5. DNS LOOKUPS Every domain mentioned on your page needs to beresolved to an IP (20-120 ms) But too few domains is bad too.
  6. 6. HTTP CONNECTIONS
  7. 7. HTTP CONNECTIONS Each asset (script, image, css file, font, etc) is retrieved via an HTTP connection.Each connection takes a momentto start due to overhead (headers).
  8. 8. HTTP HEADERS
  9. 9. REDUCINGCONNECTIONS Combine CSS Files Combine JS Files Use CSS Sprites Lazy-load images
  10. 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. 11. COMBINING JS FILESUse a plugin (e.g. W3 Total Cache) to combine+compress them for you. Manually put all your jQuery plugins into a single file.
  12. 12. CSS SPRITESPut all your images into a singlefile, and use CSS to position the background properly.
  13. 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. 14. LAZY-LOADDoesn’t technically reduce number of HTTP connections, but defers them from initial load. jQuery “lazyload” for images.
  15. 15. SCRIPTS TOO! Use “defer” and/or “async” (HTML5) attribute for JavaScripts.<script defer async src="script.js" onload="init()"></script>
  16. 16. DON’T USE IMAGES CSS3 provides alternatives: Gradients Rounded Corners Text and box shadows Rotation
  17. 17. SEQUENTIAL LOADING
  18. 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. 19. CSS AND SCRIPTSJS should be at bottom of page.CSS should go at the top of your page and be loaded via <link> not @import
  20. 20. IN WORDPRESSwp_enqueue_script( $handle, $src, $deps, $ver, $in_footer Set to TRUE);
  21. 21. BLOATED DOM
  22. 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>
  23. 23. BLOATED CSS
  24. 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 {}
  25. 25. REDUCING PAYLOAD
  26. 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. 27. 200K OR 50K One 200K file Ten 5K filesDNS Lookup 20ms DNS Lookup 20msHTTP Overhead 40ms HTTP Overhead 40msTransfer 782ms Transfer 20msTOTAL 842ms TOTAL 80ms
  28. 28. TOOLS
  29. 29. FOR MORE Google “Steve Souder”https://developers.google.com/speed/docs/ best-practices/rules_intro http://developer.yahoo.com/yslow/
  30. 30. CONNECT Ben Byrneben@cornershopcreative.com facebook.com/drywall Twitter: @drywall

×