Performance - How to improve website performance

1. ‫האור‬ ‫במהירות‬ ‫אתר‬
?‫ההמרות‬ ‫את‬ ‫ולהזניק‬ ‫האתר‬ ‫את‬ ‫להאיץ‬ ‫כיצד‬
‫אתרים‬ ‫מאיץ‬ - ‫גליקשטיין‬ ‫עמינדב‬

2. ‫מייגעת‬ ‫ההמתנה‬

3. ‫מייגעת‬ ‫ההמתנה‬
‫כמו‬ ‫קצת‬ ‫נראה‬ ‫למעלה‬ ‫שביקשתי‬ ‫הסגול‬ !!!‫דחוף‬ ‫דחוף‬
....‫מחכה‬ !‫אלי‬ ‫תחזור‬ .‫למיילים‬ ‫עונה‬ ‫לא‬ ‫אתה‬ .‫כחול‬
VIP ‫לקוח‬
‫בעבודה‬ ‫יעדים‬ ‫להגשים‬ ‫לך‬ ‫אעזור‬ ‫אני‬
‫בטלגרם‬ ‫אישי‬ ‫אימון‬
Bitcoin is down in 5%
CoinMarketCap

4. ‫מייגעת‬ ‫ההמתנה‬

5. ‫השרת‬ ‫מיקום‬
30 ms * 50 Request =
1.5 Seconds
6 ms * 50 Request =
0.3 Seconds

6. ‫השרת‬ ‫מיקום‬
‫שלוקח‬ ‫הזמן‬ ‫את‬ ‫למדוד‬ ‫כיצד‬
?‫השרת‬ ‫עם‬ ‫קשר‬ ‫ליצור‬

7. ‫השרת‬ ‫מיקום‬
‫שלוקח‬ ‫הזמן‬ ‫את‬ ‫למדוד‬ ‫כיצד‬
?‫השרת‬ ‫עם‬ ‫קשר‬ ‫ליצור‬

8. #ATD2018
‫גאוגרפית‬ ‫קרובים‬ ‫שלי‬ ‫השרתים‬ ‫האם‬
?‫למשתמשים‬
‫בית‬ ‫שיעורי‬

9. ‫מייגעת‬ ‫ההמתנה‬

10. #ATD2018
CDN

11. CloudFlare

12. CloudFlare

13. CloudFlare

14. CloudFlare

15. CloudFlare

16. CloudFlare

17. CloudFlare

18. CloudFlare

19. CloudFlare

20. #ATD2018
CDN ‫בשירות‬ ‫משתמשים‬ ‫אנחנו‬ ‫האם‬
?‫כלשהוא‬
‫בית‬ ‫שיעורי‬

21. #ATD2018

22. ‫דינמי‬ ‫מול‬ ‫סטטי‬

23. ‫דינמי‬ ‫מול‬ ‫סטטי‬
‫סטטי‬‫דינמי‬

24. ‫אישית‬ ‫מותאמים‬ ‫כללים‬ ‫ליצור‬

25. Cache Everything

26. ?‫האתר‬ ‫את‬ ‫לעדכן‬ ‫כשרוצים‬ ‫לעשות‬ ‫מה‬

27. #ATD2018
‫את‬ ‫גם‬ CDN‫ב‬ ‫לאחסן‬ ‫אפשר‬ ‫האם‬
?‫האתר‬ ‫של‬ ‫הראשי‬ ‫הדף‬
‫בית‬ ‫שיעורי‬

28. #ATD2018
?‫הדפדפן‬ ‫על‬ ‫להקל‬ ‫אפשר‬ ‫האם‬
‫בית‬ ‫שיעורי‬

29. ‫כרום‬ ‫של‬ ‫המפתחים‬ ‫סרגל‬

31. ‫כרום‬ ‫של‬ ‫המפתחים‬ ‫סרגל‬

33. ?‫איטי‬ ‫בחיבור‬ ‫נראה‬ ‫האתר‬ ‫איך‬

34. ?‫איטי‬ ‫בחיבור‬ ‫נראה‬ ‫האתר‬ ‫איך‬

35. ‫מיקרוסופט‬ ‫של‬ ‫הבית‬ ‫דף‬ ‫המקור‬ ‫קוד‬

36. ‫גוגל‬ ‫של‬ ‫הבית‬ ‫דף‬ ‫המקור‬ ‫קוד‬

37. Minifier

38. #ATD2018
MINIFY ‫עשית‬ ‫האם‬
?‫הנילווים‬ ‫הקבצים‬ ‫ולכל‬ ‫לאתר‬
(HTML, CSS, JS ‫)כולל‬
‫בית‬ ‫שיעורי‬

39. #ATD2018
MERGE/CONCAT ‫עשית‬ ‫האם‬
JS‫ה‬ ‫קבצי‬ ‫לכל‬
?CSS‫ה‬ ‫וקבצי‬
‫בית‬ ‫שיעורי‬

40. ‫במשאבים‬ ‫חיסכון‬

41. #ATD2018
‫הקבצים‬ ‫כמות‬ ‫את‬ ‫להוריד‬ ‫אפשר‬ ‫איך‬
?‫דורש‬ ‫שהאתר‬
‫בית‬ ‫שיעורי‬

42. ‫הספריות‬ ‫של‬ ‫רק‬ CDN‫מה‬ ‫טעינה‬

43. Google CDN

44. Google CDN

45. #ATD2018
Libraries‫ה‬ ‫כל‬ ‫את‬ ‫העברת‬ ‫האם‬
?‫פופולרי‬ CDN‫ב‬ ‫לשימוש‬
‫בית‬ ‫שיעורי‬

46. !‫רבה‬ ‫תודה‬
‫בלינקדין‬ ‫אחריי‬ ‫עקבו‬
/https://www.linkedin.com/in/aminadavg

47. GitHub Pages

48. Publish to GH Pages

49. Surge.sh

50. Surge Publishing

51. #ATD2018
‫הלקוח‬ ‫צד‬ ‫את‬ ‫הפרדת‬ ‫האם‬
‫בשביל‬ ‫השרת‬ ‫צד‬ ‫ואת‬
?‫נפרדים‬ ‫בשרתים‬ ‫אותם‬ ‫לשים‬ ‫שנוכל‬
‫בית‬ ‫שיעורי‬

52. #ATD2018
‫כאשר‬ ‫המהירות‬ ‫על‬ ‫ישמור‬ ‫האתר‬ ‫האם‬
?‫משתמשים‬ ‫של‬ ‫מסה‬ ‫אליו‬ ‫יתחברו‬
‫בית‬ ‫שיעורי‬

53. LoadImpact

54. #ATD2018
WEB ‫לאפליקציית‬ ‫עושים‬ ‫אנחנו‬ ‫האם‬
?Server Side Rendering ‫שלנו‬
‫בית‬ ‫שיעורי‬

55. ‫שרת‬ ‫צד‬ ‫דקלום‬

56. AMP

57. Instant Articles

58. AMP & Instant Pages
[Shopify | WordPress | Blogger] [AMP | INSTANT PAGES]

59. ?‫זמן‬ ‫לוקח‬ ‫מה‬

60. ‫דף‬ ‫ליצור‬ ‫לשרת‬ ‫שלוקח‬ ‫הזמן‬ ‫בדיקת‬
$ curl http://www.atdconf.com
$ curl http://www.atdconf.com -xlocalhost:80
WIN + R
CMD

61. WP Super Cache

62. Redis

63. #ATD2018
‫הדפים‬ ‫את‬ ‫מייצר‬ ‫השרת‬ ‫האם‬
?(200ms‫מ‬ ‫)פחות‬ ‫במהירות‬
‫בית‬ ‫שיעורי‬

64. ‫וגדלות‬ ‫הולכות‬ ‫בדרישות‬ ‫לתמוך‬ ‫היכולת‬
‫אופקית‬ ‫גדילה‬‫אנכית‬ ‫גדילה‬

65. #ATD2018
‫כעת‬ ‫אופקית‬ ‫בצורה‬ ‫לגדול‬ ‫נוכל‬ ‫האם‬
?‫עומס‬ ‫יותר‬ ‫יהיה‬
‫בית‬ ‫שיעורי‬

66. #ATD2018
‫פרוטוקול‬ ‫את‬ ‫להטמיע‬ ‫ניתן‬ ‫האם‬
?‫בשרת‬ SPDY
SPDY ‫העתיד‬ ‫זה‬

67. Google Style Guide
https://google.github.io/styleguide/htmlcssguide.html