Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)

E62bbc00ebdf1044b7d4a09525982750?s=47 Adam Dunford
September 21, 2013

Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)

Cut out the junk that’s larding up your Wordpress sites so you can better meet the demand of users wanting fast-loading user experiences–no matter the device or connection.

Presented at WordCamp Salt Lake City 2013 (http://2013.slc.wordcamp.org/)

E62bbc00ebdf1044b7d4a09525982750?s=128

Adam Dunford

September 21, 2013
Tweet

Transcript

  1. Does This Theme Make My Website Look Fat?

  2. None
  3. 0 kB 250 kB 500 kB 750 kB 1,000 kB

    Ima es Scripts Flash HTML Stylesheets Other total: 1585 kB Avera e Bytes Per Pa e
  4. 0 kB 400 kB 800 kB 1,200 kB 1,600 kB

    2010 2011 2012 2013 125% increase it’s ettin worse
  5. and responsive web desi n doesn’t make it better

  6. None
  7. None
  8. 8 MOBILE ONLY? US: 25% NEVER/INFREQUENT DESKTOP USE UK: 22%

    NEVER/INFREQUENT DESKTOP USE Asia: 50+% DON’T USE INTERNET ON PC Africa: 50+% DON’T USE INTERNET ON PC India: 49% NEVER/INFREQUENT DESKTOP USE US: 50+% MORE MOBILE THAN PC BY 2015 Source: http://www.lukew.com/ /entry.asp?1391 KENYA: M-PESA 17% of GDP 54% of adults
  9. What’s oin on behind the scenes

  10. None
  11. Browser & Device The Internet how the Internet works (basically)

    End-User Network Webhost Network Web server Cell Radio DNS
  12. device ≠ connection speed

  13. Constraints

  14. None
  15. Browser/Device • Connections per hostname • Max connections • Cache

    size • Processor, underpowered to run JS, CSS • Cell Radio
  16. Network & Internet • File sizes • 3G/4G Slowness •

    Latency, TCP slow start, con estion control • DNS
  17. Servers • Proximity to request • Load & capacity •

    Confi uration
  18. Application • Wordpress core • Theme files • Plu in

    quality (not quantity!)
  19. Database • Proximity to server • Load & capacity •

    Confi uration
  20. Browser & Device The Internet how the Internet works (basically)

    End-User Network Webhost Network Web server Cell Radio DNS
  21. What does all this have to do with Wordpress?

  22. Get ready for your wei h in

  23. None
  24. Sprin Cleanin • Remove plu ins and themes you don’t

    use • Delete unattached ima es in Media Library • Optimize the database • Clean out old revisions • Remove references to inactive plu ins or themes • Plu in: WP Clean Up
  25. Let’s do some tests

  26. None
  27. • YSlow • Goo le Pa eSpeed • Webpa etest

    • GTmetrix combines both YSlow & Pa eSpeed • Plu in: GTmetrix for Wordpress • others at siteloadtest.com Front-end
  28. • Plu ins: • Databases: Debu Bar, Debu Objects for

    Databases • Themes: Theme Check • Plu ins: Plu in Performance Profiler (!) Wordpress
  29. • Are most site visitors new or returnin ? •

    International or domestic? • Usin mobile browsers or desktop browsers? • Which browser versions are they usin ? Analytics
  30. • DOM Node Count (via Chrome Developer Tools Timeline) •

    CSS Stress Test bookmarklet • CSS Audits • Firefox add-ons - Dust-Me Selectors & CSS Usa e • Chrome Developer Tools Audits • Unused-CSS.com Advanced Testin
  31.          

           ! "    ##  #            !  "#  $ %& ' (#$ )$*+ ,#- ..  /  . .  012 . .        3   3 4  $    % $# #52 5 ## 1  #$ $* $ 5#6 1 $  #&#7 -  ## 5    $$  *# *$ 2#$. # $*  $6   $&$    !!!     !    !  !&!    )       !% "5$#  $#  1#$# *  #$ 2$5 91  05:6# $&# * 52  # 1  #$ * $$; #. "5      ! 52 211 5 #& ( < 5#  5# 1#.    + , -. / 0   )   & - =# @$5     !! )   & -1 =# @$5 2     ! )    & -  @$5 !  0   ! )   & 1  @$5  3  '4!!   A   & 5  @$5       . #     0 . B   !   6 
  32.      " ! ! ";/<<=('+/= "'(

    "2'+3   "+/"+ / 0   )   & - =# @$5 >$$;$ 5 *112$ $# &1 & 5$ #$;  .D$B   &$. <##1##1 &##$ 5 CC222.&1#.&C2!&C1#C$E.F &1 # .D$B   &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C1#C$E .F &1 # .D$B 3 &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C1#C$E .F &1 # . D$B   &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C. &1 # .D$B 3 &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C2$. &1 # . D$B 4 &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C1. &1 # .D$B 4 &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C*&-. &1 # .D$B 3  &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C1$-$. &1 # .D$B 3 &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C$#. &1 # .D$B  3 &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C1. &1 # .D$B   &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C1$#C#1$C#!1$C###C11. &1 # .D$B 4 &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C1#E+. &1 # B  &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C2!11. &1 #  B 4 &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C1$#C#1$C#!1$C###C$. &1 # B  &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C1#E. &1 #  B  &$.  $$; #$ <##1##1 &##$ 5 CC222.&1#.&C2!&C5#CC$#C1E1#. &1 # B  &$. 
  33.          

                                                                                                                                                                                                                                                                                                                                                       !"##$%##$%## $&##$'##$(##$(## ) $*+$ $ +$*$ +$  , ! )"##$%##$%## $&##$'##$(##$(## ) $*+$ $ +$*$ +$    -    ' .   ' .   - % ' #   - . # .   . # . / . .# 0 /+  . 0 . / 11     ' .   - *- / % ' # /++.  .  # / # 2 2   -  % ' #    3(  3%  3.  /  1  0 . #+0#.0.0#' /   -  0 . #+0#.0.0#' -4  / 5-! +' 0 .+*-  / 1  6--  /    /   -+  /     / -  / 1 -  /  -1     /  1 -  /       / -- *   /     
  34. Now what?

  35. None
  36. let’s tar et some common issues

  37. Scenario 1: Lar e Ima es

  38. None
  39. Optimize • Before upload: • Ima eOptim (Mac), Jpe mini

    (Windows), Trima e (Linux) • TinyPNG, PNGGauntlet • After upload: • WP Smush.it (!) • EWWW Ima e Optimizer • WP Minify
  40. Scenario 2: Lots of ima es

  41. None
  42. CSS Sprites • combine ima e files • wearekiss.com/spritepad •

    css.sprite en.com • www.spritecow.com • sprite en.website-performance.or • csssprites.com
  43. Replace • Webfonts • free: Goo le Fonts, FontSquirrel •

    paid: FontSprin , Myfonts, Typekit • Icon Webfonts • Font Awesome • ShiftIcons • IcoMoon
  44. Scenario 3: Loads of assets

  45. None
  46. Poor Man’s CDN • Add a subdomain to your site

    • Chan e where your media files point (Settin s > Uploadin Files) • upload path to “/home/www/public_html/assets” • upload_url_path to “http://assets.domain.com” • Plu in: Upload Url and Path Enabler
  47. Poor Man’s CDN caveats • Only works when you have

    www subdomain • Make sure it’s cookie-free • wp-config: define("COOKIE_DOMAIN", 'www.domain.com'); • May also need to chan e Goo le Analytics
  48. Scenario 4: Hu e Webfonts

  49. None
  50. Reduce your fontset • Goo lefonts ive you the full

    set of characters, includin multi-lin ual • FontSquirrel Generator
  51. Scenario 4: JS in header

  52. None
  53. Move it to the bottom <?php //First remove all JS

    loaded in the head section remove_action('wp_head', 'wp_print_scripts'); remove_action('wp_head', 'wp_print_head_scripts', 9); remove_action('wp_head', 'wp_enqueue_scripts', 1); //Load JS at the footer of the template add_action('wp_footer', 'wp_print_scripts', 1); add_action('wp_footer', 'wp_enqueue_scripts', 1); add_action('wp_footer', 'wp_print_head_scripts', 1);?> ?>
  54. Scenario 5: Lots of CSS & JS

  55. None
  56.          

                                                                                                                                                                                                                                                                                                                                                       !"##$%##$%## $&##$'##$(##$(## ) $*+$ $ +$*$ +$  , ! )"##$%##$%## $&##$'##$(##$(## ) $*+$ $ +$*$ +$    -    ' .   ' .   - % ' #   - . # .   . # . / . .# 0 /+  . 0 . / 11     ' .   - *- / % ' # /++.  .  # / # 2 2   -  % ' #    3(  3%  3.  /  1  0 . #+0#.0.0#' /   -  0 . #+0#.0.0#' -4  / 5-! +' 0 .+*-  / 1  6--  /    /   -+  /     / -  / 1 -  /  -1     /  1 -  /       / -- *   /     
  57. Dequeue what you don’t function swk_remove_scripts() { ! wp_dequeue_script('custom_js'); !

    wp_dequeue_script('chirp_js'); ! wp_dequeue_script('fitvid_js'); ! wp_deregister_script('chirp_js'); ! wp_deregister_script('fitvid_js'); } add_action('wp_enqueue_scripts', 'swk_remove_scripts', 500); function swk_remove_styles() { ! wp_deregister_style('media_queries_css'); ! wp_deregister_style('google_merriweather'); }
  58. Selectively enable add_action('wp_print_scripts', 'deregister_cf7_javascript', 100); function deregister_cf7_javascript() { if (!is_page(array(8,10)))

    { wp_deregister_script('contact-form-7'); wp_dequeue_script('contact-form-7'); } } add_action('wp_print_styles', 'deregister_cf7_styles', 100); function deregister_cf7_styles() { if (!is_page(array(8,10))) { wp_deregister_style( 'contact-form-7' ); wp_dequeue_style( 'contact-form-7' ); } }
  59. Scenario 6: Slow mobile renderin

  60. None
  61. Understand browsers • cache size is smaller, meanin it can't

    store as many files in memory • maximum size of file that can be cached is also smaller • fewer parallel connections • cell radio turns on and o
  62. browserscope.or

  63. Understand devices • Processor constraints • Use CSS3 elements sparin

    ly, particularly drop- shadow • DOM renderin issues
  64. and yes… Add Cachin , Minify & Gzip

  65. None
  66. None
  67. None
  68. any questions?

  69. for Happier Visitors and Stickier User Experiences Adam Dunford adam@steepleashton.com