WordCamp Denmark Hurtigere websites med simple optimeringer. Tobias Borg Petersen Digicure A/S

Transkript

1 WordCamp Denmark Hurtigere websites med simple optimeringer Tobias Borg Petersen Digicure A/S

2 Hvem er jeg Tobias Borg Petersen Team Lead & Performancekonsulent Front End udvikler dk.linkedin.com/in/tobiasbp 2

3 Agenda Wordcamp Denmark Hvorfor er god web performance vigtigt? Og hvad er brugernes forventninger til svartider? De besøgendes forventninger Hvad skal man fokusere på, for at få et hurtigere website? Hvilke typer testværktøjer har jeg behov for? Tips til at øge performanceniveauet Spørgsmål og diskussion 3

4 Hvorfor er god web performance vigtigt? 4

5 5

6 Web performance Hvorfor? Lavere bruger engagement 20 %.. mindre trafik blot ved at øge svartiden med 500 ms. 6

7 Web performance Hvorfor? Lavere bruger engagement 47 % af de adspurgte brugere forventer at et website er vist indenfor 2 sekunder 40 % af de adspurgte brugere vil forlade et website der er mere end 3 sekunder om at blive vist Kilde: 7

8 Web performance Hvorfor? Økonomiske gevinster GlassesDirect.co.uk Kilde: loss-in-customer-conversions/ 8

9 Web performance Hvorfor? Tekniske gevinster Reducerede svartider med mellem % Reducerede båndbredde forbruget med 43 % Reducerede DB CPU forbrug med 75 % Øgede maks. antallet af samtidige brugere med 300 % Kilde: 9

10 Web performance Hvorfor? Nedetider Nedetider kan koste dyrt Kilde: 10

11 Søgemaskineoptimering og lange svartider 11

12 Web performance Hvorfor? Search Engine Optimization (SEO) Google suggests that any site taking longer than 1.5 seconds to load is slow and will consequently be relegated within their search engine ranking Kilde: Whitepaper1.pdf 12

13 Web performance Hvorfor? Search Engine Optimization (SEO) Google Recommends Mobile Websites Load in One Second or Less Nu også på mobile websites Kilde: 13

14 Web performance Hvorfor? Search Engine Optimization (SEO) Kilde: 14

15 De besøgendes forventninger 15

16 De besøgendes forventninger 1960 = <10 sekunder 2006 = <4 sekunder 2009 = <2 sekunder 2014 = <1 sekund Højere krav til performance 16

17 De besøgendes forventninger Performance er en fundamental del af brugeroplevelsen på websitet! Brugeroplevelsen Højere krav til performance 17

18 De besøgendes forventninger Facebook sucks! Intuitive navigering Timelines elegance Svartiden! Brugeroplevelsen Højere krav til performance 18

19 De besøgendes forventninger Brugeroplevelsen Højere krav til performance 19

20 Hvor skal man fokusere sine optimeringer? 20

21 Båndbredde og svartider 21

22 Båndbredde og svartider Men vil den stigende hastighed på båndbreddelinjerne ikke løse vores problemer? NEJ! 22

23 Båndbredde og svartider 23

24 Båndbredde og svartider Båndredde og latency Båndbredde indikerer tykkelsen Latency indikerer transporttiden 24

25 Båndbredde og svartider Fra Holland Fra Australien 25

26 Båndbredde og svartider Fra Holland Fra Australien 26

27 Hvor skal jeg fokusere mine optimeringer? Reducering af antal HTTP forespørgsler Reducering af website indholdet

28 Hvilke typer testværktøjer har jeg behov for? 28

29 Udvælg dine testværktøjer Monitorering Test Optimering Udvælg de rigtige værktøjer 29

30 Testværktøjer Web performance Tilgængelighed Svartider IKKE kun ping Brugernes oplevelse udefra 3. part monitorering Monitorering 30

31

32 Link:

33 Testværktøjer Web performance Load test Hvor meget kan websitet holde til Stress test Hvor meget kan websitet holde til under en stor belastning Endurance test Hvordan opfører websitet sig under en længere vedvarende belastning Performancetest 33

34 Testværktøjer Web performance Lokalisér potentielle optimeringstiltag Udbedre flaskehalse Reducér svartider Reducér båndbreddeforbrug Reducér belastning på it-infrastruktur Performance optimering 34

35 Testværktøjer Web performance Performance værktøjer 35

36 Udvælg dine testværktøjer Værktøjerne er på plads! 36

37 Tips til at øge performanceniveauet på dit Wordpress-site 37

38 Hvad kan optimeres på dit website Reducér antallet af forespørgsler 38

39 39

40 1) Combinable JavaScript/CSS files 40

41 Hvad kan optimeres på dit website Reducér forespørgsler: Combinable JavaScript/CSS files Dyre HTTP forespørgsler Længere svartider Større belastning på infrastrukturen Effektiv komprimering 41

42 Hvad kan optimeres på dit website 42

43 Hvor gode er I? 43

44

45 2) Caching (Expire Headers) 45

46 Hvad kan optimeres på dit website The fastest HTTP request is the one not made. Reducér forespørgsler: 1) Caching (Expire Headers) 46

47 Hvad kan optimeres på dit website The fastest HTTP request is the one not made. Caching Headers Pas på med dynamiske komponenter! Indfør versionsnumre o Javascript_v01.js o Javascript_v02.js Reducér forespørgsler: 1) Caching (Expire Headers) Last-Modified løser næsten problemet Kilde: 47

48 Hvad kan optimeres på dit website Reducér forespørgsler: 1) Caching (Expire Headers) 48

49 Hvad kan optimeres på dit website Reducér forespørgsler: 1) Caching (Expire Headers) 49

50 Hvor gode er I? 50

51

52 Når forretningen bliver global 52

53 Når forretningen bliver global CDN, Content Delivery Network 53

54 Når forretningen bliver global Smart-route teknologi Komponenter placeret geografisk tættere på brugeren Typisk statiske Fordele: Reducering af trafik Større skalérbarhed 54

55 Når forretningen bliver global 55

56 Når forretningen bliver global 56

57 Hvad kan optimeres på dit website Reducér indhold 57

58 3) Activate HTTP Compression 58

59 Hvad kan optimeres på dit website Komprimering af: HTML, CSS og JavaScript Ikke billeder, videoer eller PDF er Konfiguration på webserver Uden gzip/deflate Med gzip/deflate Load balancer problem Reducér indhold: HTTP Compression 59

60 Hvad kan optimeres på dit website Reducér indhold: HTTP Compression 60

61 4) Minify JavaScript/CSS-files 61

62 Hvad kan optimeres på dit website /* Highlight */ #content table tr.sfhover, #content table tr.sfhover td { background-color: #b5dff3; color: #000 } /* Selected */ /* This always takes precedence over highlight color! */ #content table.ledger tr.selected td, #content table tr.selected td { background-color: #4775d1; color: #fff; border-left: 1px solid #346dbe; border-bottom: 1px solid #7daaea } Not Minified #content table tr.sfhover,#content table tr.sfhover td{backgroundcolor:#b5dff3;color:#000}#content table.ledger tr.selected td,#content table tr.selected td{background-color:#4775d1;color:#fff;border-left:1px Minified solid #346dbe;border-bottom:1px solid #7daaea} Reducér indhold: Minify JavaScript/CSS-files 62

63 Hvad kan optimeres på dit website YUI Compressor, Java baseret command line - developer.yahoo.com/yui/compressor/ CSS Tidy - Webperformance X-ray - Reducér indhold: Minify JavaScript/CSS-files 63

64 5) Optimise images 64

65 Hvad kan optimeres på dit website JPEG-filer kan indeholde: Embedded thumbnail images EXIF metadata Adobe XMP metadata Camera information and settings Geographical and timing data ICC color profile data Comments Kan ikke komprimeres med HTTP Compression! Benyt JPEGTran - Webperformance X-ray Reducér indhold: Optimise images - JPEG 65

66 Hvad kan optimeres på dit website Reducér indhold: Optimise images - PNG 66

67 6) JPEG Candidate Images 67

68 Hvad kan optimeres på dit website ImageMagick.org 879 kb ~94 % Reducér indhold: JPEG Candidate Images 45 kb URL: PNG/GIF filer JPEG filer Reducering i størrelse Ulemper: Skarpe hjørner (logoer eller grafer) 68

69 Hvad kan optimeres på dit website Optimér rendering 69

70 7) CSS in top / JavaScript at bottom 70

71 Hvad kan optimeres på dit website CSS i toppen <head> <link rel= stylesheet href= style.css type= text/css /> </head> JavaScript i toppen JavaScript i bunden Optimér rendering: CSS i toppen og JavaScript i bunden 71

72 Hvor gode er I? 72

73

74 8) Avoid 3. party SPOF (scripts) 74

75 Hvad kan optimeres på dit website DNS Load Balancers App Servers Read-only DB Master DB Optimér rendering: Avoid 3. party SPOF (scripts) 75

76 Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 76

77 Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 77

78 Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 78

79 Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 79

80 Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 80

81 Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 81

82 Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 82

83 Hvor gode er I? 83

84

85 Opsummering Combinable JavaScripts Caching HTTP Compression CSS i top/javascript i bund part SPOF

86 86

87 87

88 88

89 Og husk nu 89

90 Performance optimering som en løbende proces 90

91 Performance optimering - som en løbende proces 91

92 Spørgsmål!