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

Help! My client is a WebPerf meetup!

Adam Onishi
October 04, 2016

Help! My client is a WebPerf meetup!

At first it seems like a good idea. The chance to build the website for one of your favourite meetups. Great! Then the realisation dawns on you. They’re not just a great meetup, they’re a WebPerf meetup, hosting some of the most performance-minded developers in our industry.

Challenge accepted!

Follow along as I take you on a journey through the project from design to deployment. We’ll look at all the steps taken to ensure the site could pass the tough scrutiny of the WebPerf community. We’ll cover design considerations, font choices, the tools for optimising front-end assets, and performance testing.

Finally, we’ll go one step further and see how service workers can be used to improve site performance with client-side caching techniques.

Adam Onishi

October 04, 2016

More Decks by Adam Onishi

Other Decks in Technology


  1. ” “How much of the above- the-fold content is visually

    complete over time until it is 100% complete Daniel Imms
  2. ” “The decisions made by designers are what typically drive

    the rest of how a website is built Lara Hogan
  3. ” “…if done correctly can be used to deliver a

    “one roundtrip” critical path length where only the HTML is a blocking resource. Addy Osmani
  4. ├─────────────────────────────┼─────────────────┤ │ Style Sheets │ 1 ├─────────────────────────────┼─────────────────┤ │ Size │

    28.6KB ├─────────────────────────────┼─────────────────┤ │ Gzipped Size │ 5.7KB ├─────────────────────────────┼─────────────────┤
  5. function lwp_inline_styles() { if (file_exists( get_template_directory() . '/css/ main.min.css')) {

    $css = file_get_contents(get_template_directory_uri() . '/ css/main.min.css'); if (false !== $css) { echo '<style>' . $css . '</style>'; return; } } echo '<link rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/css/main.min.css" type="text/css" media="all" />'; } add_action( 'wp_head', 'lwp_inline_styles', 50);
  6. function lwp_async_defer_script($tag, $handle) { $src_async = ' async="async" defer="defer" src';

    if ('webperf-scripts' === $handle) { return str_replace(' src', $src_async, $tag ); } return $tag; } add_action('script_loader_tag', 'lwp_async_defer_script');
  7. ” “Quick WPT reveals a bit of image optimisation and

    CDN use as the main issues on home page. Perry
  8. CDN

  9. ” “ a bit of image optimisation Quick WPT reveals

    CDN use as the main issues on home page. Perry
  10. Reading list / Thanks Pro WordPress Theme Development by Adam

    Onishi http:/ /www.apress.com/9781430259145 Designing for Performance by Lara Hogan http:/ /shop.oreilly.com/product/0636920033578.do Designers Guide to Web Performance by Jon Yablonski: http:/ /jonyablonski.com/2016/designers-guide-to-web-performance-optimization/ Emoji’s from Emoji One http:/ /emojione.com/ Doorman icon by Dan Hetteix - The Noun Project https:/ /thenounproject.com/term/doorman/188002 Slides and Paisley Shirt icon by Margarida Sousa