Improving Web Performance in a Mobile World

Mobile usage has grown by leaps and bounds over the last decade, and not just for entertainment. Financial decisions are being made using mobile devices, and if your website is slow, it can influence how users perceive your brand.

Presented at the following conferences:
- 2017 Digital Summit Detroit
- 2018 AAF Michiana
- 2019 Huddle Conference

Transcript

1. Improving Web Performance in a Mobile World Erik Runyon @erunyon #NDHuddle2019 July 19, 2019
2. <about/> Erik Runyon Technical Director Marketing Communications The University of Notre Dame @erunyon ErikRunyon.com
3. @erunyon
4. Let’s talk about stress
7. !
11. Who?
12. Raise your hand if your institution has a website ȱ @erunyon #NDHuddle2019
13. How?
14. Everything should have value, because everything has a cost. - Tim Kadlec https://vimeo.com/181110885
15. Marketing AND Management have to be on board
16. Images are a low- hanging fruit @erunyon #NDHuddle2019
17. Reduce the number of trackers and embeds @erunyon #NDHuddle2019
18. Custom fonts @erunyon #NDHuddle2019
19. Performance has to be part of the culture @erunyon #NDHuddle2019
20. Make performance part of concept and design @erunyon #NDHuddle2019
21. Give your web team time to focus on performance @erunyon #NDHuddle2019
22. Carousels @erunyon #NDHuddle2019
25. Hero Videos AKA Full width background videos AKA WHEEE just bought a drone!!! @erunyon #NDHuddle2019
26. @erunyon #NDHuddle2019
27. Hero videos are the new carousel." - Erik Runyon Huddle 2019 @erunyon #NDHuddle2019
28. B I N G O Drone footage Students walking Statues Marching Band Free Students researching SPORTS!!! Students having fun Graduation
29. Yeah, but your marketers were so preoccupied with whether or not they could, they didn't stop to think if they should.
30. Hero videos aren't inherently evil @erunyon #NDHuddle2019
31. Progressive Web Apps (PWA)
32. Progressive Web Apps? https://developers.google.com/web/progressive-web-apps/ Websites that use newer web technology to deliver an app-like experience including saving to home screen and running offline.
33. Advantages of PWA https://developers.google.com/web/progressive-web-apps/ App install banners Function offline Push Notifications Functions like an app Typically smaller than native Fast installation One code-base No app store submissions Instant updates Can be found via Search
34. @erunyon #NDHuddle2019
35. @erunyon #NDHuddle2019
36. @erunyon #NDHuddle2019
37. @erunyon #NDHuddle2019
38. @erunyon #NDHuddle2019
39. @erunyon #NDHuddle2019
40. @erunyon #NDHuddle2019
41. @erunyon #NDHuddle2019
42. https://www.nd.edu/
43. https://www.nd.edu/
44. https://www.pwastats.com/
45. MakeMyTrip’s PWA saw a 3× increase in conversion and 160% increase in shopper sessions. Pages are 38% faster. First-time shoppers are 3× more likely to convert on the PWA than in native app. https://developers.google.com/web/showcase/2017/make-my-trip
46. The Weather Channel saw an 80% improvement in load time after shipping Progressive Web Apps in 62 languages to 178 countries. https://developers.google.com/web/showcase/2016/weather-channel
47. Forbes’ saw 2× increase in average user session length, 6× completion rate, and 20% more impressions. Loads in 0.8s down from 3 to 12s. http://www.niemanlab.org/2017/03/forbes-rebuilt-its-new-mobile-website-as-a-progressive-web-app/
48. Prospective students use their smartphones to complete and submit online forms. This year, 53% of seniors (vs. 37% in 2018) have used their mobile phone to complete a RFI form, 35% (vs. 33%) a cost calculator and an admissions application (vs. 23%)! higheredexperts.com/edu/2019/07/09/top-highered-websites-insights-from-the-2019-e-expectations-survey-exclusive/
49. Get competitive
50. https://www.webpagetest.org/
51. https://www.webpagetest.org/
52. https://www.webpagetest.org/
53. https://www.webpagetest.org/
54. https://www.webpagetest.org/
55. https://www.webpagetest.org/
56. https://www.webpagetest.org/
57. https://www.webpagetest.org/
58. https://www.webpagetest.org/video/compare.php?tests=190718_2N_ab01c1b6203a633da479fc9cc68caaa9,190718_7S_a2a9150088c82be45a75833496892367
59. https://www.webpagetest.org/video/compare.php?tests=170906_CG_bb57a080acdf7c8c602c59a6ce8c383b,170906_ES_930c8b19fc3a912ed11f0e019274b22a VS
60. https://www.webpagetest.org/video/compare.php?tests=170906_CG_bb57a080acdf7c8c602c59a6ce8c383b,170906_ES_930c8b19fc3a912ed11f0e019274b22a The Jets Visually Complete: 16s Weight: 6.1MB The Sharks Visually Complete: 19s Weight: 3.3MB
61. https://www.webpagetest.org/video/compare.php?tests=170912_QR_afad316434633c483a1cb5ac444d7e4b,170912_CC_ca3d301d379081b1e78afa0cb67c4ec9,170912_8Y_6fdcb2327e1445e7a53f4d95a4db31c3 VS VS
62. https://www.webpagetest.org/video/compare.php?tests=170912_QR_afad316434633c483a1cb5ac444d7e4b,170912_CC_ca3d301d379081b1e78afa0cb67c4ec9,170912_8Y_6fdcb2327e1445e7a53f4d95a4db31c3 VS VS
63. https://www.webpagetest.org/video/compare.php?tests=170912_QR_afad316434633c483a1cb5ac444d7e4b,170912_CC_ca3d301d379081b1e78afa0cb67c4ec9,170912_8Y_6fdcb2327e1445e7a53f4d95a4db31c3 The Lions Weight: 3.3MB The Tigers Weight: 6.6MB The Bears Weight: 4.6MB
64. https://www.webpagetest.org/video/compare.php?tests=170906_MP_87a7b4cca0766377bfa9272efac40584,170906_4Y_8ab98f87bc562205809b3b927ae9ed01 VS
65. https://www.webpagetest.org/video/compare.php?tests=170906_MP_87a7b4cca0766377bfa9272efac40584,170906_4Y_8ab98f87bc562205809b3b927ae9ed01 The Hatfields Visually Complete: 7.8s Weight: 2.6MB The McCoys Visually Complete: 10.5s Weight: 2MB
66. https://www.webpagetest.org/video/compare.php?tests=170906_ZN_13b144141fd9da4cf2f19563c500150b,170906_DK_55c45e56305694e2629bd6cd268b3631 VS
67. https://www.webpagetest.org/video/compare.php?tests=190718_S3_43d8f23871b79074d7d19f6abeeb305f,190718_AW_01fe3c0af28a1a14209e474d91fdd4e7 Michigan Visually Complete: 7.4s Weight: 1.9MB Ohio State Visually Complete: 13.9s Weight: 2.1MB
68. https://www.webpagetest.org/video/compare.php?tests=170906_ZN_13b144141fd9da4cf2f19563c500150b,170906_DK_55c45e56305694e2629bd6cd268b3631 VS
69. https://www.webpagetest.org/video/compare.php?tests=190718_2N_ab01c1b6203a633da479fc9cc68caaa9,190718_7S_a2a9150088c82be45a75833496892367 Notre Dame Visually Complete: 3.9s Weight: 418KB USC Visually Complete: 10.7s Weight: 1.9MB
70. https://www.webpagetest.org/
71. https://www.webpagetest.org/
72. https://www.webpagetest.org/
73. https://www.webpagetest.org/
74. Wrapping Up
75. There are exceptions… @erunyon #NDHuddle2019
76. @erunyon #NDHuddle2019
77. Showing You Stories That Link to Faster Loading Webpages “If signals indicate the webpage will load quickly, the link to that webpage might appear higher in your feed.” “Webpages that are particularly slow could see decreases in referral traffic.” https://newsroom.fb.com/news/2017/08/news-feed-fyi-showing-you-stories-that-link-to-faster-loading-webpages/ ȍ
78. Page Weight Matters “…there was a disproportionate increase in traffic from places like Southeast Asia, South America, Africa, and even remote regions of Siberia.” “By keeping your client side code small and lightweight, you can literally open your product up to new markets.” http://blog.chriszacharias.com/page-weight-matters
79. lite.cnn.io text.npr.org @erunyon #NDHuddle2019
80. Performance is about Search https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
81. https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale Performance is about Retaining Users
82. Performance is about People
83. Be part of the solution, not the problem. Be faster than your “competition”. Advocate for a better user experience. @erunyon #NDHuddle2019
84. Erik Runyon erikrunyon.com @erunyon thank you Offline phone graphic: @tpacket