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

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

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

Adam Dunford

September 21, 2013
Tweet

More Decks by Adam Dunford

Other Decks in Technology

Transcript

  1. Does This Theme
    Make My Website
    Look Fat?

    View full-size slide

  2. 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

    View full-size slide

  3. 0 kB
    400 kB
    800 kB
    1,200 kB
    1,600 kB
    2010 2011 2012 2013
    125% increase
    it’s ettin worse

    View full-size slide

  4. and responsive web desi n
    doesn’t make it better

    View full-size slide

  5. 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

    View full-size slide

  6. What’s oin on
    behind the scenes

    View full-size slide

  7. Browser &
    Device
    The
    Internet
    how the Internet works
    (basically)
    End-User
    Network
    Webhost
    Network
    Web
    server
    Cell Radio
    DNS

    View full-size slide

  8. device ≠ connection speed

    View full-size slide

  9. Browser/Device
    • Connections per hostname
    • Max connections
    • Cache size
    • Processor, underpowered to run JS, CSS
    • Cell Radio

    View full-size slide

  10. Network & Internet
    • File sizes
    • 3G/4G Slowness
    • Latency, TCP slow start, con estion control
    • DNS

    View full-size slide

  11. Servers
    • Proximity to request
    • Load & capacity
    • Confi uration

    View full-size slide

  12. Application
    • Wordpress core
    • Theme files
    • Plu in quality (not quantity!)

    View full-size slide

  13. Database
    • Proximity to server
    • Load & capacity
    • Confi uration

    View full-size slide

  14. Browser &
    Device
    The
    Internet
    how the Internet works
    (basically)
    End-User
    Network
    Webhost
    Network
    Web
    server
    Cell Radio
    DNS

    View full-size slide

  15. What
    does all this have to do
    with Wordpress?

    View full-size slide

  16. Get ready for your
    wei h in

    View full-size slide

  17. 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

    View full-size slide

  18. Let’s do some
    tests

    View full-size slide

  19. • YSlow
    • Goo le Pa eSpeed
    • Webpa etest
    • GTmetrix combines both YSlow & Pa eSpeed
    • Plu in: GTmetrix for Wordpress
    • others at siteloadtest.com
    Front-end

    View full-size slide

  20. • Plu ins:
    • Databases: Debu Bar, Debu Objects for
    Databases
    • Themes: Theme Check
    • Plu ins: Plu in Performance Profiler (!)
    Wordpress

    View full-size slide

  21. • Are most site visitors new or returnin ?
    • International or domestic?
    • Usin mobile browsers or desktop browsers?
    • Which browser versions are they usin ?
    Analytics

    View full-size slide

  22. • 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

    View full-size slide











  23. ! "
    ###








    !
    "#

    $
    %&
    '
    (#$
    )$*+
    ,#-
    ..
    /

    ..
    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

    View full-size slide





  24. "!!
    ";/<<=('+/= "'( "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

    &$.

    View full-size slide
































































































































































































































































  25. !"##$%##$%## $#$'##$(##$(## ) $*+$ $ +$*$ +$

    , ! )"##$%##$%## $#$'##$(##$(## ) $*+$ $ +$*$ +$



    -

    ' .

    ' .

    - % ' #

    - . # .

    . # .

    / . .# 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 -

    /





    / -- *

    /


    View full-size slide

  26. let’s tar et some common
    issues

    View full-size slide

  27. Scenario 1:
    Lar e Ima es

    View full-size slide

  28. 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

    View full-size slide

  29. Scenario 2:
    Lots of ima es

    View full-size slide

  30. CSS Sprites
    • combine ima e files
    • wearekiss.com/spritepad
    • css.sprite en.com
    • www.spritecow.com
    • sprite en.website-performance.or
    • csssprites.com

    View full-size slide

  31. Replace
    • Webfonts
    • free: Goo le Fonts, FontSquirrel
    • paid: FontSprin , Myfonts, Typekit
    • Icon Webfonts
    • Font Awesome
    • ShiftIcons
    • IcoMoon

    View full-size slide

  32. Scenario 3:
    Loads of assets

    View full-size slide

  33. 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

    View full-size slide

  34. 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

    View full-size slide

  35. Scenario 4:
    Hu e Webfonts

    View full-size slide

  36. Reduce your fontset
    • Goo lefonts ive you the full set of
    characters, includin multi-lin ual
    • FontSquirrel Generator

    View full-size slide

  37. Scenario 4:
    JS in header

    View full-size slide

  38. Move it to the bottom
    //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);?>
    ?>

    View full-size slide

  39. Scenario 5:
    Lots of CSS & JS

    View full-size slide
































































































































































































































































  40. !"##$%##$%## $#$'##$(##$(## ) $*+$ $ +$*$ +$

    , ! )"##$%##$%## $#$'##$(##$(## ) $*+$ $ +$*$ +$



    -

    ' .

    ' .

    - % ' #

    - . # .

    . # .

    / . .# 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 -

    /





    / -- *

    /


    View full-size slide

  41. 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');
    }

    View full-size slide

  42. 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' );
    }
    }

    View full-size slide

  43. Scenario 6:
    Slow mobile
    renderin

    View full-size slide

  44. 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

    View full-size slide

  45. browserscope.or

    View full-size slide

  46. Understand devices
    • Processor constraints
    • Use CSS3 elements sparin ly, particularly drop-
    shadow
    • DOM renderin issues

    View full-size slide

  47. and yes…
    Add Cachin ,
    Minify & Gzip

    View full-size slide

  48. any questions?

    View full-size slide

  49. for Happier Visitors and Stickier User Experiences
    Adam Dunford
    [email protected]

    View full-size slide