• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Kansas City WordCamp - Website Performance
 

Kansas City WordCamp - Website Performance

on

  • 804 views

 

Statistics

Views

Total Views
804
Views on SlideShare
734
Embed Views
70

Actions

Likes
1
Downloads
1
Comments
0

2 Embeds 70

http://www.graphicpush.com 50
http://graphicpush.com 20

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Kansas City WordCamp - Website Performance Kansas City WordCamp - Website Performance Presentation Transcript

    • What the hell is this?
      what is performance and who cares?
      what’s dragging you down?
      is WordPress slow?
      what can I do on the front end?
      what are some plugins I can install that will make my life easier without having to really pay attention to you?
    • Questions?
    • Performance = Perceived Speed
      V
    • The Two Sides of the Website Coin
      back end
      front end
      (client side)
      (server side)
    • The Weight of the Front End
      80%
      20%
    • Who Cares?
    • The Landscape by 2015
      Quadruple Traffic Globally
      Devices:
      Desktop: 25%
      Laptop: 83%
      Smartphone: 194%
      EB Reader: 550%
      Tablet: 750%
    • What’s Dragging You Down?
    • network reliability
      file sizes
      HTTP requests
      server configuration
      WordPress itself
      Balls, Chains, Anchors, Speed Bumps
    • Network Factors
      space between mobile towers
      visitor’s data plan
      quality of connection
      random acts of God
      a billion other things
    • File Size
    • HTTP Requests
    • Server Configuration
    • Balls, Chains, Anchors, Speed Bumps
      network reliability
      file sizes
      HTTP requests
      server configuration
      WordPress itself
    • Is wordpress slow?
    • It’s Only as Fast as your theme.
    • 0 JS files(0k)
      1 CSS files(23k)
      2 images(53k)
      0 iframes(0k)
      80k+ download
      ~5 requests
    • 11 JS files(191k)
      3 CSS files(43k)
      6 images(179k)
      2 iframes(16k)
      500k+ download
      20+ requests
    • 23 JS files(1243k)
      6 CSS files(92k)
      70 images(549k)
      3 iframes(123k)
      2000k+ download
      100+ requests
    • What can I do on the front end?
    • HTML
      HTML5 is your friend
      more semantic tag use, less div soup; default WP does NOT do this
      avoid the hidden calories of iframes
      strip white space
    • CSS
      kill unnecessary rules
      shorthand
      combine
      minify
    • JavaScript
      if you load a library, load it from Google APIs(75% less load impact)
      native JS is faster(select element by ID through jQuery = 86% slower than native)
      combine
      minify
      load at the bottom
    • Images
      CSS3 is your friend
      image sprites
      CRUSH THEM
    • How CSS is More Efficient
      Traditional:
      2 images
      Extra markup
      ~ 5-6k, extra requests
      div {
      height: 300px;
      width: 300px;
      border: 2px solid #0c9da9;
      box-shadow: 0 5px 10px rgba(0,0,0,.4),
      inset 0 0 0 2px rgba(255,255,255,.7);
      border-radius: 10px;
      background: #daf0ff;
      background: -moz-linear-gradient(top, #daf0ff 0%, #99cfff 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daf0ff), color-stop(100%,#99cfff));
      background: -webkit-linear-gradient(top, #daf0ff 0%,#99cfff 100%);
      background: -o-linear-gradient(top, #daf0ff 0%,#99cfff 100%);
      background: -ms-linear-gradient(top, #daf0ff 0%,#99cfff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daf0ff', endColorstr='#99cfff',GradientType=0 );
      background: linear-gradient(top, #daf0ff 0%,#99cfff 100%);
      }
      CSS:
      No images
      No extra markup
      740 bytes, no requests
    • Image Sprites
      Individually:
      20 images = 17k
      20 requests
      Sprite:
      1 image = 4.2k
      1 request
    • Bonus Round
      content delivery network (CDN)
      use your own subdomain (crap.acme.com)
      gzip compression
      more: HTML5 boilerplate
    • What Plugins AreWorth a Shit?
    • There Are a Few
      WP Smush.it(automatic image compression)
      W3 Total Cache(complete server optimization, requires access to .htaccess)
      WP Minify(automatically minify JS and CSS)
      WP-HTML-Compression(strip white space from HTML)
      CDN Tools(helps set up a CDN i.e. Google API or MaxCDN)
    • How Can I Test?
    • Great Question.
    • It’s Easy. Really.
      Plugin: Debug Queries(discover where your site is slowing down)
      Websites and Tools:
      Pingdom Tools
      Web Page Analyzer
      Google Page Speed
      Yahoo! YSlow (firefoxplugin for Firebug)
      Yahoo! Boomerang
      Jdrop(mobile performance testing)
    • Thank You.Really.
    • @kevinpotts
      graphicpush.com/wp-performance