Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ben@cornershopcreative.com front-end performance optimization #WCDAYTON
SPEED MATTERS SEO - UX - Sales - Mobile
OUR ENEMIES Payload size
 Bloated DOM & CSS
 HTTP connections JavaScript blocking DNS lookups
NOT COVERED Apache/mySQL config ! Using a CDN ! Choosing a good host
REDUCE PAYLOAD a.k.a. front-end performance 101
REDUCE ASSET SIZES Minify your JS and CSS (and HTML) Load properly-sized images Use right image filetypes 
 (gif/jpg/png/sv...
DEFER ASSET LOADING “lazy load” images when they 
 appear in browser window Use async/defer <script> attributes ! Also, lo...
TRICKING WP_ENQUEUE_SCRIPT function  add_async(  $url  )  {      if  (strpos($url,  '#async')===false) ...
USING GOOGLE’S JQUERY wp_deregister_script('jquery');   wp_register_script(      'jquery',        'http:...
BLOATED DOM & CSS make it clean before you make it mini
MORE ELEMENTS = SLOWER <body class="page"> <div id="wrapper"> <div id="page"> <div id="main"> <div class="main-side"> ...
SIMPLE SELECTORS html body div#main article#post-22 p a.inline {
 property: value;
 } .inline {
 property: value;
 } VS. u...
HTTP CONNECTIONS your biggest obstacles to fast loads
HTTP CONNECTIONS Each asset (script, image, css file, font, etc) is retrieved via an HTTP connection. Each connection takes...
HTTP HEADERS
REDUCING CONNECTIONS Combine CSS Files Combine JS Files Use CSS Sprites Avoid images in favor of CSS Don’t load stuff you d...
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 To...
COMBINING JS FILES Use a plugin (e.g. W3 Total Cache) to combine+compress
 them for you. Manually put all your jQuery 
 pl...
COMBINING JS FILES WordPress is especially prone to loading lots of JS files It’s worth the effort to mitigate against this....
CSS SPRITES Put all your images into a single 
 file, and use CSS to position the background properly.
CSS SPRITE EXAMPLE .sprite-ben { height: 117px; width: 91px; background-image: url('img/sprite.png'); background-position:...
DON’T USE IMAGES CSS3 provides alternatives: Gradients Rounded Corners Text and box shadows Rotation
JAVASCRIPT BLOCKING And sequential loading general
SEQUENTIAL VS. PARALLEL Browsers can load some assets in parallel, such as CSS files, images, and fonts. This is good. But ...
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
DNS LOOKUPS hidden time thieves
DNS LOOKUPS Every domain mentioned 
 on your page needs to be resolved to an IP (20-120 ms) ! But too few domains 
 is bad...
TOOLS
FOR MORE Google “Steve Souder” https://developers.google.com/speed/docs/best- practices/rules_intro ! http://developer.yah...
CONNECT Ben Byrne ben@cornershopcreative.com facebook.com/drywall Twitter: @drywall
Upcoming SlideShare
Loading in …5
×

Front-End Performance Optimization in WordPress

3,284 views

Published on

Data from major Internet providers like Google, Amazon and Akamai has shown that how fast a website loads significantly affects user behavior. And because users don’t like slow sites, Google uses load time as a factor in computing PageRank results. In short: It pays to be fast.

There are a lot of factors that can affect your site’s performance. While some are dependent on your hosting environment, there are plenty of factors beyond server/internet speed (and the obvious sheer number of bits to be loaded) that affect your page load time, such as HTTP connections, DNS lookups, and asset load sequencing.

If you’re a front-end developer and you’re serious about building websites that load as fast as possible, come learn about techniques (such as non-blocking Javascript) you can use in your markup and themes — whether on WordPress or some other system — to help things load as quickly as possible. We’ll also review tools you can use to assess whether your site is doing all it can to load quickly.

Published in: Technology
License: CC Attribution-NonCommercial-NoDerivs License
no profile picture user

  • Be the first to comment

Front-End Performance Optimization in WordPress

  1. 1. ben@cornershopcreative.com front-end performance optimization #WCDAYTON
  2. 2. SPEED MATTERS SEO - UX - Sales - Mobile
  3. 3. OUR ENEMIES Payload size
 Bloated DOM & CSS
 HTTP connections JavaScript blocking DNS lookups
  4. 4. NOT COVERED Apache/mySQL config ! Using a CDN ! Choosing a good host
  5. 5. REDUCE PAYLOAD a.k.a. front-end performance 101
  6. 6. REDUCE ASSET SIZES Minify your JS and CSS (and HTML) Load properly-sized images Use right image filetypes 
 (gif/jpg/png/svg)
  7. 7. DEFER ASSET LOADING “lazy load” images when they 
 appear in browser window Use async/defer <script> attributes ! Also, load pre-cached stuff! <script defer async src="script.js"></script>
  8. 8. TRICKING WP_ENQUEUE_SCRIPT function  add_async(  $url  )  {      if  (strpos($url,  '#async')===false)          return  $url;      else  if  (is_admin())          return  str_replace('#async',  '',  $url);      else          return  str_replace('#async',  '',  $url)."'  async";     }   add_filter('clean_url',  'add_async',  11,  1); wp_enqueue_script('demo',  '/js/myscript.js#async'  );
  9. 9. USING GOOGLE’S JQUERY wp_deregister_script('jquery');   wp_register_script(      'jquery',        'http://ajax.googleapis.com/ajax/libs/jquery/ 1.11.0/jquery.min.js',      array(),      '1.11.0'   );  
  10. 10. BLOATED DOM & CSS make it clean before you make it mini
  11. 11. 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; ! or ! document. getElementsByTagName(‘*”). length
  12. 12. 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 {}
  13. 13. HTTP CONNECTIONS your biggest obstacles to fast loads
  14. 14. 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.
  15. 15. HTTP HEADERS
  16. 16. REDUCING CONNECTIONS Combine CSS Files Combine JS Files Use CSS Sprites Avoid images in favor of CSS Don’t load stuff you don’t need*
  17. 17. 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.
  18. 18. 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.
  19. 19. COMBINING JS FILES WordPress is especially prone to loading lots of JS files It’s worth the effort to mitigate against this. Seriously.
  20. 20. CSS SPRITES Put all your images into a single 
 file, and use CSS to position the background properly.
  21. 21. CSS SPRITE EXAMPLE .sprite-ben { height: 117px; width: 91px; background-image: url('img/sprite.png'); background-position: 0 -525px; background-repeat: no-repeat; } overall sprite.png file measures 304 x 910 but my headshot is a small part
  22. 22. DON’T USE IMAGES CSS3 provides alternatives: Gradients Rounded Corners Text and box shadows Rotation
  23. 23. JAVASCRIPT BLOCKING And sequential loading general
  24. 24. 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.
  25. 25. 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
  26. 26. IN WORDPRESS wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); Set to TRUE
  27. 27. DNS LOOKUPS hidden time thieves
  28. 28. 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.
  29. 29. TOOLS
  30. 30. FOR MORE Google “Steve Souder” https://developers.google.com/speed/docs/best- practices/rules_intro ! http://developer.yahoo.com/yslow/ ! https://developers.google.com/speed/ pagespeed/
  31. 31. CONNECT Ben Byrne ben@cornershopcreative.com facebook.com/drywall Twitter: @drywall

×