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

Wicked Fast WordPress

Wicked Fast WordPress

How can you build a WordPress site that loads in less than a second, and why does it matter?

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.

View the talk on YouTube: http://www.youtube.com/watch?v=cHZ1kCYGR6E
Read the tutorial: http://gomakethings.com/high-performance-websites/

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

Chris Ferdinandi

July 23, 2013
Tweet

More Decks by Chris Ferdinandi

Other Decks in Programming

Transcript

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

    Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
  2. 1% loss in sales from just a 100ms delay Source:

    www.slideshare.net/stubbornella/designing-fast-websites-presentation
  3. 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. 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. 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. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2

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

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

    at a time) CSS stops rendering JS stops downloads
  9. CSS AT THE TOP to avoid repaints JS AT THE

    BOTTOM* to maximize downloads * Exception: Modernizr (and similar scripts)
  10. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2

    at a time) CSS stops rendering JS stops downloads
  11. 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
  12. # 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
  13. REPLACE THIS <link rel="stylesheet” href="<?php bloginfo('stylesheet_url'); ?>"> WITH THIS <link

    rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.min.css">
  14. 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
  15. # 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
  16. # 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"
  17. ! & + & + & = ) ) READS

    HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
  18. ! & + & + & = ) ) READS

    HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
  19. 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