Help! My client is a WebPerf meetup!

Fc7368fd45560e1e7401bc80684f5867?s=47 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.

Fc7368fd45560e1e7401bc80684f5867?s=128

Adam Onishi

October 04, 2016
Tweet

Transcript

  1. Adam Onishi LDN WebPerf @onishiweb Help! My client is a

    #WebPerf meetup!
  2. Hello!

  3. FINANCIAL TIMES @onishiweb

  4. @onishiweb Tickets please!

  5. None
  6. 1. Testing & Metrics 2. Design 3. Images (1) 4.

    Styles & Scripts 5. Fonts
  7. 6. Hosting 7. CDN 8. Images (2) 9. Next steps

    10. Review
  8. @onishiweb

  9. @onishiweb

  10. @onishiweb Buy Now!

  11. Testing & Metrics

  12. https:/ /www.webpagetest.org/

  13. https:/ /developers.google.com/speed/pagespeed/insights/

  14. @onishiweb

  15. Metrics @onishiweb

  16. Speed Index Start Render PageSpeed Insights Cost

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

    complete over time until it is 100% complete Daniel Imms
  18. @onishiweb

  19. https:/ /whatdoesmysitecost.com/

  20. 3G in London Testing the homepage @onishiweb

  21. Benchmarks @onishiweb

  22. http:/ /www.meetup.com/London-Web-Performance-Group/

  23. 6752 2822 5.489s 2.686s 58/100 42/100 $$$$$ http:/ /www.meetup.com/London-Web-Performance-Group/

  24. http:/ /www.frontendlondon.co.uk/

  25. 2280 658 1.883s 0.387s 88/100 72/100 $$ http:/ /www.frontendlondon.co.uk/

  26. What about a Perf Budget? @onishiweb

  27. One more… @onishiweb

  28. None
  29. Client happiness

  30. Design

  31. Performance starts at design

  32. ” “The decisions made by designers are what typically drive

    the rest of how a website is built Lara Hogan
  33. Specifics… @onishiweb

  34. Banner images… @onishiweb

  35. Designers banner images @onishiweb

  36. http:/ /www.webdesign-inspiration.com/web-designs/page/2

  37. High-res banner images! @onishiweb

  38. What if… @onishiweb

  39. https:/ /ldnwebperf.org/about-us/

  40. CSS Blend Modes @onishiweb

  41. Reduce image quality without losing the effect @onishiweb

  42. Fonts @onishiweb

  43. Designers custom fonts @onishiweb

  44. Limit weights and styles @onishiweb

  45. Custom font for headings, system font for body @onishiweb

  46. Designers should know how the web works.

  47. @onishiweb Good designers make this stuff easy @onishiweb

  48. Images (1)

  49. Content images @onishiweb

  50. https:/ /ldnwebperf.org/

  51. The responsive web https:/ /ldnwebperf.org/

  52. What about when there’s a new sponsor? @onishiweb

  53. You can’t expect the client to do all the optimising

    @onishiweb
  54. Even if they are a #WebPerf expert! @onishiweb

  55. @onishiweb

  56. https:/ /en-gb.wordpress.org/plugins/wp-smushit/

  57. 2552 1400 2.296s 1.393s $

  58. Styles & Scripts

  59. Build steps… @onishiweb

  60. Critical path CSS @onishiweb

  61. ” “It goes against everything we’ve been taught as front-end

    developers Patrick Hamann
  62. ” “…if done correctly can be used to deliver a

    “one roundtrip” critical path length where only the HTML is a blocking resource. Addy Osmani
  63. @onishiweb • Critical • Penthouse • LoadCSS

  64. ” “Ideally, the [above the fold] content should fit under

    14KB PageSpeed Insights
  65. Stylestats @onishiweb

  66. ├─────────────────────────────┼─────────────────┤ │ Style Sheets │ 1 ├─────────────────────────────┼─────────────────┤ │ Size │

    28.6KB ├─────────────────────────────┼─────────────────┤ │ Gzipped Size │ 5.7KB ├─────────────────────────────┼─────────────────┤
  67. 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);
  68. Async scripts @onishiweb

  69. 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');
  70. 2548 1540 2.488s 1.381s $

  71. Fonts

  72. Google Fonts @onishiweb

  73. https:/ /fonts.google.com/specimen/Work+Sans?selection.family=Work+Sans

  74. Render blocking CSS @onishiweb

  75. <link href="https://fonts.googleapis.com/ css?family=Work+Sans" rel="stylesheet">

  76. Self-hosting Google Fonts @onishiweb

  77. https:/ /google-webfonts-helper.herokuapp.com/fonts/

  78. https:/ /www.zachleat.com/web/comprehensive-webfonts/

  79. 2037 1334 1.592s 1.193s 84/100 85/100 $

  80. None
  81. Hosting

  82. @onishiweb

  83. This could all change with PHP7 @onishiweb

  84. http:/ /talks.php.net/china16#/

  85. http:/ /talks.php.net/china16#/

  86. https:/ /wpengine.com/

  87. ” “At WP Engine, there’s no confusing caching plugins WPEngine

    blog
  88. Nothing enabled on staging @onishiweb

  89. @onishiweb

  90. 912 800 0.891s 0.788s 99/100 99/100 $

  91. @onishiweb

  92. London, UK Chrome - ? @onishiweb

  93. London, UK Chrome - Cable @onishiweb

  94. @onishiweb

  95. 2052 1700 1.689s 1.686s 99/100 99/100 $

  96. None
  97. ” “Quick WPT reveals a bit of image optimisation and

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

  99. @onishiweb

  100. @onishiweb

  101. ” “Akamai are setting up a CDN account for us.

    Perry Dyball
  102. https:/ /wpengine.com/

  103. ” “ Sorry we can’t help with third-party CDNs WP

    Engine support
  104. Images (2)

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

    CDN use as the main issues on home page. Perry
  106. https:/ /wordpress.org/plugins/winsite-image-optimizer/

  107. You can’t expect the client to do all the optimising

    @onishiweb
  108. None
  109. Dimensions: 2044 × 1150 @onishiweb

  110. Before: 2044 × 1150 (103Kb) After: 400 × 212 (11Kb)

    @onishiweb
  111. add_image_size( 'speaker-thumb', 55, 55, true ); add_image_size( 'event-image', 400, 212,

    true );
  112. 2144 1356 1.783s 1.286s 99/100 99/100 $

  113. Next Steps…

  114. @onishiweb 1. Investigate TTFB 2. Reduce first render 3. Investigate

    browser cache 4. Service Worker (PWA)
  115. Review

  116. Design with performance in mind @onishiweb

  117. Do the work so your content editors don’t have to

    @onishiweb
  118. Always be open to better tools @onishiweb

  119. Keep testing consistent @onishiweb

  120. Benchmarks @onishiweb

  121. 6752 5.489s 58/100 $$$$$ Meetup 2280 1.883s 88/100 $$ FEL

    2144 1.783s 99/100 $ WebPerf
  122. 26 14 WebPerf FEL 172 KB 552 KB

  123. None
  124. Make sure you’re adjusting for the right metric

  125. https:/ /www.webpagetest.org/result/161002_S3_E80/

  126. None
  127. Adam Onishi LDN WebPerf @onishiweb Thanks!

  128. 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