Your SlideShare is downloading. ×
Front-End Performance Optimization in WordPress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Front-End Performance Optimization in WordPress

1,838

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 …

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,838
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ben@cornershopcreative.com front-end performance optimization #WCDAYTON
  • 2. SPEED MATTERS SEO - UX - Sales - Mobile
  • 3. OUR ENEMIES Payload size
 Bloated DOM & CSS
 HTTP connections JavaScript blocking DNS lookups
  • 4. NOT COVERED Apache/mySQL config ! Using a CDN ! Choosing a good host
  • 5. REDUCE PAYLOAD a.k.a. front-end performance 101
  • 6. REDUCE ASSET SIZES Minify your JS and CSS (and HTML) Load properly-sized images Use right image filetypes 
 (gif/jpg/png/svg)
  • 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. 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. 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. BLOATED DOM & CSS make it clean before you make it mini
  • 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. 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. HTTP CONNECTIONS your biggest obstacles to fast loads
  • 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. HTTP HEADERS
  • 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. 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. 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. COMBINING JS FILES WordPress is especially prone to loading lots of JS files It’s worth the effort to mitigate against this. Seriously.
  • 20. CSS SPRITES Put all your images into a single 
 file, and use CSS to position the background properly.
  • 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. DON’T USE IMAGES CSS3 provides alternatives: Gradients Rounded Corners Text and box shadows Rotation
  • 23. JAVASCRIPT BLOCKING And sequential loading general
  • 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. 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. IN WORDPRESS wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); Set to TRUE
  • 27. DNS LOOKUPS hidden time thieves
  • 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. TOOLS
  • 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. CONNECT Ben Byrne ben@cornershopcreative.com facebook.com/drywall Twitter: @drywall

×