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/)

Transcript

1. Does This Theme Make My Website Look Fat?
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
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
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
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
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
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?
36. let’s tar et some common issues
37. Scenario 1: Lar e Ima es
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
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
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
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
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
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
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
68. any questions?
69. for Happier Visitors and Stickier User Experiences Adam Dunford adam@steepleashton.com