Wicked Fast WordPress - WordCamp Boston 2013

Wicked Fast WordPress - WordCamp Boston 2013

Slides from my talk at WordCamp Boston 2013.

At Google, a 500 millisecond delay (just 0.5 seconds) resulted in a 20% decrease in search traffic. 74% of mobile web users will leave a site if it takes longer than 5 seconds to load. Meanwhile, web-enabled devices and user bandwidth are getting more varied and less predictable. This talk explores tips, tricks and techniques you can use to build wicked fast WordPress sites.

Want to see this talk in person? Get in touch: http://gomakethings.com/speaking/

Df5f3b6aeb1caacc0acabf2cb45264da?s=128

Chris Ferdinandi

October 26, 2013
Tweet

Transcript

  1. 3.

    20% decrease in search traffic from just a 500ms delay

    Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
  2. 4.

    1% loss in sales from just a 100ms delay Source:

    www.slideshare.net/stubbornella/designing-fast-websites-presentation
  3. 14.

    55% AMERICANS WHO HAVE ACCESSED THE WEB via a mobile

    device in 2012 Source: blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html
  4. 15.

    31% AMERICANS WHO HAVE PRIMARILY ACCESSED THE WEB via a

    mobile device in 2012 Source: blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html
  5. 16.

    74% of mobile users will leave your site if it

    takes more than 5 seconds to load Source: bradfrostweb.com/blog/post/performance-as-design/
  6. 18.
  7. 22.
  8. 23.
  9. 24.
  10. 25.
  11. 27.

    0 5,000 10,000 15,000 20,000 25,000 May 2011 May 2012

    January 2013 August 2013 ~9% ~23% ~36% ~45%
  12. 28.
  13. 29.
  14. 32.

    ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2

    at a time) CSS stops rendering JS stops downloads
  15. 33.
  16. 34.

    ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2

    at a time) CSS stops rendering JS stops downloads
  17. 35.

    ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2

    at a time) CSS stops rendering JS stops downloads
  18. 37.

    CSS AT THE TOP to avoid repaints JS AT THE

    BOTTOM* to maximize downloads * Exception: Modernizr (and similar scripts)
  19. 40.

    ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2

    at a time) CSS stops rendering JS stops downloads
  20. 41.

    +

  21. 46.

    Browsers download all files regardless of screen size @ SLOW

    <link rel="stylesheet" href="style.css”> <link rel="stylesheet" media="(min-width: 20em)" href="phone.css"> <link rel="stylesheet" media="(min-width: 40em)” href="tablet.css"> <link rel="stylesheet" media="(min-width: 60em)" href="desk.css"> header.php
  22. 47.

    # FAST <link rel="stylesheet" href="style.css"> .base-styles { … } @media

    (min-width: 20em) { … } @media (min-width: 40em) { … } @media (min-width: 60em) { … } header.php style.css
  23. 50.
  24. 52.
  25. 53.
  26. 54.
  27. 55.
  28. 58.
  29. 59.
  30. 64.
  31. 66.
  32. 68.
  33. 69.
  34. 71.

    ICON FONTS Lightweight A single file Styleable with CSS Scalable

    Compatible back to IE 5 Considerations 1 color per icon* Windows Phone 7 support sucks
  35. 81.

    BROWSER FOREGROUND BACKGROUND Chrome Firefox IE 8 IE 9 Safari

    Opera BROWSER “SUPPORT” Source: http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/
  36. 86.
  37. 96.

    # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /your-site/ RewriteRule

    ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /your-site/index.php [L] </IfModule> # END WordPress
  38. 99.

    # Your document html ExpiresByType text/html "access plus 0 seconds"

    # Media: images, video, audio ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month"
  39. 103.

    ! & + & + & = ) ) READS

    HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
  40. 105.

    ! & + & + & = ) ) READS

    HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
  41. 109.

    1.  HTML order matters 2.  Combine like files 3.  Remove

    whitespace 4.  Use icon fonts (or sprites) 5.  Pick the right image format 6.  Compress & smush images 7.  Use adaptive images 8.  Compress your site 9.  Set Expires headers 10.  Prebuild your site #! WICKED FAST WORDPRESS