Improving Web Performance in a Mobile World

Slide 1

Slide 1 text

Improving Web Performance in a Mobile World Erik Runyon @erunyon #NDHuddle2019 July 19, 2019

Slide 2

Slide 2 text

Erik Runyon Technical Director Marketing Communications The University of Notre Dame @erunyon ErikRunyon.com

Slide 3

Slide 3 text

@erunyon

Slide 4

Slide 4 text

Let’s talk about stress

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Who?

Slide 12

Slide 12 text

Raise your hand if your institution has a website ȱ @erunyon #NDHuddle2019

Slide 13

Slide 13 text

How?

Slide 14

Slide 14 text

Everything should have value, because everything has a cost. - Tim Kadlec https://vimeo.com/181110885

Slide 15

Slide 15 text

Marketing AND Management have to be on board

Slide 16

Slide 16 text

Images are a low- hanging fruit @erunyon #NDHuddle2019

Slide 17

Slide 17 text

Reduce the number of trackers and embeds @erunyon #NDHuddle2019

Slide 18

Slide 18 text

Custom fonts @erunyon #NDHuddle2019

Slide 19

Slide 19 text

Performance has to be part of the culture @erunyon #NDHuddle2019

Slide 20

Slide 20 text

Make performance part of concept and design @erunyon #NDHuddle2019

Slide 21

Slide 21 text

Give your web team time to focus on performance @erunyon #NDHuddle2019

Slide 22

Slide 22 text

Carousels @erunyon #NDHuddle2019

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Hero Videos AKA Full width background videos AKA WHEEE just bought a drone!!! @erunyon #NDHuddle2019

Slide 26

Slide 26 text

@erunyon #NDHuddle2019

Slide 27

Slide 27 text

Hero videos are the new carousel." - Erik Runyon Huddle 2019 @erunyon #NDHuddle2019

Slide 28

Slide 28 text

B I N G O Drone footage Students walking Statues Marching Band Free Students researching SPORTS!!! Students having fun Graduation

Slide 29

Slide 29 text

Yeah, but your marketers were so preoccupied with whether or not they could, they didn't stop to think if they should.

Slide 30

Slide 30 text

Hero videos aren't inherently evil @erunyon #NDHuddle2019

Slide 31

Slide 31 text

Progressive Web Apps (PWA)

Slide 32

Slide 32 text

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 ofﬂine.

Slide 33

Slide 33 text

Advantages of PWA https://developers.google.com/web/progressive-web-apps/ App install banners Function ofﬂine Push Notiﬁcations Functions like an app Typically smaller than native Fast installation One code-base No app store submissions Instant updates Can be found via Search

Slide 34

Slide 34 text

@erunyon #NDHuddle2019

Slide 35

Slide 35 text

@erunyon #NDHuddle2019

Slide 36

Slide 36 text

@erunyon #NDHuddle2019

Slide 37

Slide 37 text

@erunyon #NDHuddle2019

Slide 38

Slide 38 text

@erunyon #NDHuddle2019

Slide 39

Slide 39 text

@erunyon #NDHuddle2019

Slide 40

Slide 40 text

@erunyon #NDHuddle2019

Slide 41

Slide 41 text

@erunyon #NDHuddle2019

Slide 42

Slide 42 text

https://www.nd.edu/

Slide 43

Slide 43 text

https://www.nd.edu/

Slide 44

Slide 44 text

https://www.pwastats.com/

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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/

Slide 48

Slide 48 text

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/

Slide 49

Slide 49 text

Get competitive

Slide 50

Slide 50 text

https://www.webpagetest.org/

Slide 51

Slide 51 text

https://www.webpagetest.org/

Slide 52

Slide 52 text

https://www.webpagetest.org/

Slide 53

Slide 53 text

https://www.webpagetest.org/

Slide 54

Slide 54 text

https://www.webpagetest.org/

Slide 55

Slide 55 text

https://www.webpagetest.org/

Slide 56

Slide 56 text

https://www.webpagetest.org/

Slide 57

Slide 57 text

https://www.webpagetest.org/

Slide 58

Slide 58 text

https://www.webpagetest.org/video/compare.php?tests=190718_2N_ab01c1b6203a633da479fc9cc68caaa9,190718_7S_a2a9150088c82be45a75833496892367

Slide 59

Slide 59 text

https://www.webpagetest.org/video/compare.php?tests=170906_CG_bb57a080acdf7c8c602c59a6ce8c383b,170906_ES_930c8b19fc3a912ed11f0e019274b22a VS

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

https://www.webpagetest.org/video/compare.php?tests=170912_QR_afad316434633c483a1cb5ac444d7e4b,170912_CC_ca3d301d379081b1e78afa0cb67c4ec9,170912_8Y_6fdcb2327e1445e7a53f4d95a4db31c3 VS VS

Slide 62

Slide 62 text

https://www.webpagetest.org/video/compare.php?tests=170912_QR_afad316434633c483a1cb5ac444d7e4b,170912_CC_ca3d301d379081b1e78afa0cb67c4ec9,170912_8Y_6fdcb2327e1445e7a53f4d95a4db31c3 VS VS

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

https://www.webpagetest.org/video/compare.php?tests=170906_MP_87a7b4cca0766377bfa9272efac40584,170906_4Y_8ab98f87bc562205809b3b927ae9ed01 VS

Slide 65

Slide 65 text

https://www.webpagetest.org/video/compare.php?tests=170906_MP_87a7b4cca0766377bfa9272efac40584,170906_4Y_8ab98f87bc562205809b3b927ae9ed01 The Hatﬁelds Visually Complete: 7.8s Weight: 2.6MB The McCoys Visually Complete: 10.5s Weight: 2MB

Slide 66

Slide 66 text

https://www.webpagetest.org/video/compare.php?tests=170906_ZN_13b144141fd9da4cf2f19563c500150b,170906_DK_55c45e56305694e2629bd6cd268b3631 VS

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

https://www.webpagetest.org/video/compare.php?tests=170906_ZN_13b144141fd9da4cf2f19563c500150b,170906_DK_55c45e56305694e2629bd6cd268b3631 VS

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

https://www.webpagetest.org/

Slide 71

Slide 71 text

https://www.webpagetest.org/

Slide 72

Slide 72 text

https://www.webpagetest.org/

Slide 73

Slide 73 text

https://www.webpagetest.org/

Slide 74

Slide 74 text

Wrapping Up

Slide 75

Slide 75 text

There are exceptions… @erunyon #NDHuddle2019

Slide 76

Slide 76 text

@erunyon #NDHuddle2019

Slide 77

Slide 77 text

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 trafﬁc.” https://newsroom.fb.com/news/2017/08/news-feed-fyi-showing-you-stories-that-link-to-faster-loading-webpages/ ȍ

Slide 78

Slide 78 text

Page Weight Matters “…there was a disproportionate increase in trafﬁc 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

Slide 79

Slide 79 text

lite.cnn.io text.npr.org @erunyon #NDHuddle2019

Slide 80

Slide 80 text

Performance is about Search https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

Slide 81

Slide 81 text

https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale Performance is about Retaining Users

Slide 82

Slide 82 text

Performance is about People

Slide 83

Slide 83 text

Be part of the solution, not the problem. Be faster than your “competition”. Advocate for a better user experience. @erunyon #NDHuddle2019

Slide 84

Slide 84 text

Erik Runyon erikrunyon.com @erunyon thank you Ofﬂine phone graphic: @tpacket