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

Help! My client is a WebPerf meetup!

Adam Onishi
November 07, 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

November 07, 2016

More Decks by Adam Onishi

Other Decks in Technology


  1. 1. Testing & Metrics 2. Design 3. Images 4. Styles

    & Scripts 5. Fonts 6. Hosting & CDN
  2. 7. Images (pt. 2) 8. Fonts (pt. 2) 9. Service

    Worker 10. Styles (pt. 2) 11. Conclusion
  3. ” “How much of the above- the-fold content is visually

    complete over time until it is 100% complete Daniel Imms
  4. ” “…since the browser can ditch the cache whenever it

    wants, it shouldn't be relied upon Jake Archibald
  5. ” “The decisions made by designers are what typically drive

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

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

    28.6KB ├─────────────────────────────┼─────────────────┤ │ Gzipped Size │ 5.7KB ├─────────────────────────────┼─────────────────┤
  8. 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);
  9. 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');
  10. ” “Quick WPT reveals a bit of image optimisation and

    CDN use as the main issues on home page. Perry Dyball
  11. function lwp_image_atts($attr) { if($attr['srcset']) { return $attr; } if($attr['src']) {

    $attr['data-echo'] = $attr['src']; $attr['src'] = get_template_directory_uri() . '/ img/blanc.gif'; $attr['class'].= ' img--loading'; } return $attr; } add_filter('wp_get_attachment_image_attributes', 'lwp_image_atts');
  12. if(document.querySelectorAll('img').length) { // Init the echo JS loader echo.init({ callback:

    function(element, op) { element.classList.remove('img--loading'); } }); }
  13. function inlineSvg() { var ajax = new XMLHttpRequest(); ajax.open("GET", "/icons.svg",

    true); ajax.send(); ajax.onload = function(e) { var div = document.createElement("div"); div.style.display = 'none'; div.innerHTML = ajax.responseText; document.body.appendChild(div); }; }
  14. 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 Lighthouse icon by Carla Dias - The Noun Project https:/ /thenounproject.com/term/lighthouse/566292/ Slides and Paisley Shirt icon by Margarida Sousa