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

How to get a PageSpeed score in the 90s

How to get a PageSpeed score in the 90s

Users hate waiting at their desktop, they hate waiting on 3G. Users hate waiting for Open Sans when Arial is adequate. If users hate it, Google hates it; performance has become an important metric in PageRank

Peter Wilson

May 30, 2015
Tweet

More Decks by Peter Wilson

Other Decks in Programming

Transcript

  1. How To Get A Page Speed Score In The 90s

    Peter Wilson ! peterwilson.cc • @pwcc
  2. Comparison timelines No SSL vs SSL Timed using WebPageTest -

    pwcc.cc/wcbne/thesslquestion 0.9s 1.0s 1.1s 1.2s 99% 99% 99% 99% 0% 0% 0% 99% No SSL SSL
  3. Comparison timelines No SSL vs SSL Timed using WebPageTest -

    pwcc.cc/wcbne/thesslquestion 0.9s 1.0s 1.1s 1.2s 99% 99% 99% 99% 0% 0% 0% 99% No SSL SSL
  4. Comparison timelines No SSL vs SSL Timed using WebPageTest -

    pwcc.cc/wcbne/thesslquestion 0.9s 1.0s 1.1s 1.2s 99% 99% 99% 99% 0% 0% 0% 99% No SSL SSL
  5. Comparison timelines No SSL vs SSL Timed using WebPageTest -

    pwcc.cc/wcbne/thesslquestion 0.9s 1.0s 1.1s 1.2s 99% 99% 99% 99% 0% 0% 0% 99% No SSL SSL
  6. Key metrics Document Complete Fully Loaded Load Time First Byte

    Start Render Visually Complete Speed Index DOM Elements Time Requests Bytes In Time Requests Bytes In 3.466s 0.835s 1.190s 3.300s 1221 356 3.466s 18 310 KB 3.614s 20 312 KB WebPageTest - webpagetest.org
  7. if.(.!is_css_file_cached().).{. ..echo.'<style>'...$inlineCss...'</style>';. ..echo.'<script>';. ..echo.'loadCss(."style.min.css".);';. ! ..echo.'</script>';. } CSS, the WordPress

    way header.php/(pseudo/code) if.(.!is_css_file_cached().).{. ..echo.'<style>'...$inlineCss...'</style>';. ..echo.'<script>';. ..echo.'loadCss(."style.min.css".);';. ..set_css_cached(.'pwcc0styles'.);. ..echo.'</script>';. }
  8. We could also use browser fonts. Just occasionally. We could

    also use browser fonts. Just occasionally.
  9. “That’s fooked, how the fook can it take fifty-two-point-fooking-eight- fooking-kilobytes

    to display a fooking like button. A fooking like button no one will ever fooking press anyway!”
  10. A mark a yen a buck or a pound money

    makes the world go round
  11. Download 15 free, beautiful, high res photos for your next

    project. ! ! Ads by the Network Ian Sane (CC) - flic.kr/p/dqLXek