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.

Transcript

1. Adam Onishi LDN WebPerf @onishiweb Help! My client is a #WebPerf meetup!
2. Hello!
3. FINANCIAL TIMES @onishiweb
4. @onishiweb Tickets please!
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
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 $
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 $
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
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
124. Make sure you’re adjusting for the right metric
125. https:/ /www.webpagetest.org/result/161002_S3_E80/
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