מקרה לדוגמה של כמה שינויים משמעותיים שהושקו ב-Wix במטרה לשפר את ביצועי טעינת האתרים של מיליוני אתרים, במטרה לאפשר להם לקבל ציונים טובים במדדי PageSpeed Insights ובמדדי הליבה לבדיקת חוויית המשתמש באתר.
בזכות מינוף של התקנים המקובלים בתחום, ספקי שירותי ענן ויכולות CDN, בשילוב עם שכתוב חשוב של זמן הריצה של האתר, אחוז האתרים ב-Wix שמגיעים לציונים טובים באחוזון ה-75 של כל מדדי הליבה לבדיקת חוויית המשתמש באתר יותר מפי שלושה בהשוואה לשנה הקודמת, על סמך נתונים מ-CrUX ומ-HTTPArchive.
ב-Wix אימצו תרבות מוכוונת-ביצועים, ושיפורים נוספים ימשיכו להיפתח למשתמשים. כשאנחנו מתמקדים במדדי KPI של ביצועים, אנחנו מצפים לראות עלייה במספר האתרים שעוברים ערכי סף של מדדי ליבה לבדיקת חוויית המשתמש באתר.
סקירה כללית
עולם הביצועים הוא מורכב להפליא, עם הרבה משתנים ומורכבות. מחקרים מראים שמהירות האתר משפיעה ישירות על שיעורי ההמרות וההכנסות של עסקים. בשנים האחרונות התחום שמים דגש רב יותר על חשיפת הביצועים ועל שיפור המהירות של האינטרנט. החל ממאי 2021, אותות של חוויית משתמש בדף ייכללו בדירוג בחיפוש Google.
האתגר הייחודי ב-Wix תומך במיליוני אתרים, שחלקם נבנו לפני הרבה שנים ולא עודכנו מאז. יש לנו כלים ומאמרים שונים שנועדו לעזור למשתמשים שלנו להבין מה הם יכולים לעשות כדי לנתח ולשפר את הביצועים של האתרים שלהם.
Wix היא סביבה מנוהלת ולא הכול בידי המשתמש. שיתוף תשתיות משותפות מהווה אתגרים רבים לכל האתרים האלה, אבל גם פותח הזדמנויות לשיפורים משמעותיים בכל התחומים, כלומר מינוף היתרונות של קנה מידה נרחב.
מדברים בשפה נפוצה
אחד הקשיים העיקריים בביצועים הוא למצוא מינוח משותף כדי לדון בהיבטים שונים של חוויית המשתמש, תוך התחשבות בביצועים הטכניים וגם בביצועים. בזכות שפה משותפת ומוגדרת היטב בתוך הארגון, הצלחנו לדון בקלות בין החלקים הטכניים והיתרונות השונים ולסווג אותם, להבהיר את דוחות הביצועים שלנו ועזרנו מאוד להבין באילו היבטים כדאי לנו להתמקד קודם.
ערכנו את כל הניטור והדיונים הפנימיים שלנו כך שיכללו מדדים סטנדרטיים בתחום כמו Web Vitals, כולל:
מורכבות האתר וציון הביצועים שלו
די קל ליצור אתר שנטען מיד, כל עוד הופכים אותו לפשוט מאוד באמצעות HTML בלבד ומציג אותו באמצעות CDN.
אבל למעשה, האתרים הופכים למורכבים ומתוחכמים יותר ויותר, פועלים כמו אפליקציות ולא כמו מסמכים, ותומכים בפונקציות כמו בלוגים, פתרונות מסחר אלקטרוני, קוד מותאם אישית וכו'.
ב-Wix יש מגוון רחב של תבניות, כך שהמשתמשים יכולים לבנות בקלות אתר עם יכולות עסקיות רבות. בדרך כלל, התכונות הנוספות האלו כרוכות בעלויות ביצועים מסוימות.
המסע
בהתחלה, היה HTML
בכל פעם שדף אינטרנט נטען, הוא מתחיל תמיד בבקשה ראשונית לכתובת URL כדי לאחזר את מסמך ה-HTML. תגובת ה-HTML הזו מפעילה את כל בקשות הלקוח הנוספות ואת הלוגיקה של הדפדפן להרצה ולעיבוד של האתר. זה החלק החשוב ביותר בטעינת הדף, כי שום דבר לא קורה עד לתחילת התגובה (שנקראת TTFB – זמן עד לבייט ראשון).
העבר: עיבוד בצד הלקוח (CSR)
כשמפעילים מערכות בקנה מידה גדול, תמיד יש פשרות שצריך להביא בחשבון, כמו ביצועים, אמינות ועלויות. עד לפני מספר שנים, ב-Wix השתמשו בעיבוד בצד הלקוח (CSR), שבו תוכן ה-HTML בפועל נוצר באמצעות JavaScript בצד הלקוח (כלומר בדפדפן), וכך יכולנו לתמוך באתרים בקנה מידה גדול בלי שתצטרכו לצבור עלויות תפעול עצומות בקצה העורפי.
CSR אפשר לנו להשתמש במסמך HTML נפוץ, שלמעשה היה ריק. כל מה שעשינו הוא להפעיל את ההורדה של הקוד והנתונים הנדרשים, שלאחר מכן שימשו ליצירת ה-HTML המלא במכשיר הלקוח.
היום: רינדור בצד השרת (SSR)
לפני כמה שנים עברנו לעיבוד בצד השרת (SSR), מכיוון שהדבר מועיל גם לאופטימיזציה למנועי חיפוש (SEO) וגם לביצועים, שיפרנו את זמני החשיפה הראשוניים של הדף והבטחנו הוספה משופרת לאינדקס של מנועי חיפוש שלא מקבלים תמיכה מלאה בהרצת JavaScript.
גישה זו שיפרה את חוויית החשיפה, במיוחד במכשירים/חיבורים איטיים יותר, וחצה על האפשרות לבצע אופטימיזציות נוספות של הביצועים. עם זאת, המשמעות היא גם שלכל בקשה בדף אינטרנט נוצרה תגובת HTML ייחודית תוך כדי תנועה, וזה רחוק מהאופטימיזציה, במיוחד באתרים עם כמות גדולה של צפיות.
חדש: שמירה במטמון בכמה מיקומים
ה-HTML של כל אתר היה סטטי ברובו, אבל הוא כלל כמה נקודות:
- הוא משתנה לעיתים קרובות. בכל פעם שמשתמש עורך את האתר שלו או מבצע שינויים בנתוני האתר, למשל במלאי בחנות באתר.
- היו בו נתונים וקובצי cookie מסוימים שהיו ספציפיים למבקר, כלומר שני אנשים שיבקרו באותו אתר יראו HTML מעט שונה. לדוגמה, כדי לתמוך בתכונות של מוצרים, כמו לזכור אילו פריטים המבקר הוסיף לעגלת הקניות, או הצ'אט שבו המבקר התחיל עם העסק קודם לכן ועוד.
- לא כל הדפים ניתנים לשמירה במטמון. לדוגמה, דף שמכיל קוד משתמש מותאם אישית שמציג את השעה הנוכחית כחלק מהמסמך, לא מתאים לשמירה במטמון.
בשלב הראשון נקטנו גישה בטוחה יחסית של שמירת קוד ה-HTML במטמון ללא נתוני מבקרים, ולאחר מכן שינינו רק חלקים ספציפיים בתגובת ה-HTML בזמן אמת לכל מבקר, עבור כל התאמה במטמון.
פתרון CDN פנימי
עשינו זאת על ידי פריסת פתרון פנימי: שימוש במטמון HTTP של Varnis להעברת proxy ושמירה במטמון, ב-Kafka להודעות ביטול תוקף ובשירות שמבוסס על Scala/Netty ששרת את תגובות ה-HTML האלה בשרתי proxy, אבל מבצע שינויים ב-HTML ומוסיף קובצי cookie ונתונים ספציפיים למבקרים בתגובה שנשמרה במטמון.
הפתרון הזה אפשר לנו לפרוס את הרכיבים הצרים האלה במיקומים גיאוגרפיים רבים יותר ובמספר אזורים של ספקי ענן, שמפוזרים בכל העולם. בשנת 2019 הצגנו יותר מ-15 אזורים חדשים, והפעלתם בהדרגה שמירה במטמון של יותר מ-90% מהצפיות בדפים שעמדו בדרישות לשמירה במטמון. הצגת אתרים ממיקומים נוספים מצמצמת את זמן האחזור של הרשת בין הלקוחות לשרתים שמפעילים את תגובת ה-HTML, על ידי קירוב התוכן למבקרים באתר.
בנוסף, התחלנו לשמור במטמון תשובות מסוימות מ-API לקריאה בלבד על ידי שימוש באותו פתרון וביטול התוקף של המטמון בכל שינוי בתוכן האתר. לדוגמה, רשימת הפוסטים בבלוג באתר נשמרת במטמון ומבוטלת במהלך פרסום/שינוי של פוסט.
מצמצמים את המורכבות
הטמעת השמירה במטמון שיפרה משמעותית את הביצועים, בעיקר בשלבי TTFB ו-FCP, ושיפרה את האמינות שלנו על ידי הצגת התוכן ממיקום קרוב יותר למשתמש הקצה.
עם זאת, הצורך לשנות את ה-HTML לכל תגובה הציג מורכבות מיותרת, שאם היא תוסר, הייתה הזדמנות לשיפורים נוספים בביצועים.
שמירה במטמון של הדפדפן (והכנות ל-CDN)
~ 13%
בקשות HTML שמתקבלות ישירות מהמטמון של הדפדפן חוסכות רוחב פס רב ומקצרות את זמני הטעינה בתצוגות חוזרות
השלב הבא היה להסיר בפועל את הנתונים הספציפיים למבקרים מה-HTML לגמרי, ולאחזר אותם מנקודת קצה נפרדת שהלקוח קרא למטרה זו, אחרי הגעת ה-HTML.
העברנו בקפידה את הנתונים ואת קובצי ה-cookie האלה לנקודת קצה חדשה, שנקראת בכל טעינת דף, אבל מחזירים קובץ JSON מצומצם, שנדרש רק לתהליך המים, כדי להגיע לאינטראקטיביות מלאה בדף.
כך יכולנו להפעיל שמירה במטמון בדפדפן של ה-HTML, כלומר שעכשיו הדפדפנים שומרים את תגובת ה-HTML לביקורים חוזרים, וקוראים לשרת רק כדי לוודא שהתוכן לא השתנה. זה נעשה באמצעות ETag של HTTP, שהוא למעשה מזהה שמוקצה לגרסה ספציפית של משאב HTML. אם התוכן עדיין ללא שינוי, תגובה מסוג 304 Not Variable נשלחת על ידי השרתים שלנו ללקוח, ללא גוף.
בנוסף, המשמעות של שינוי זה היא שה-HTML שלנו כבר אינו ספציפי למבקרים ואינו מכיל קובצי Cookie. במילים אחרות, אפשר לשמור אותו במטמון בכל מקום, וכך להשתמש בספקי CDN שיש להם נוכחות גיאוגרפית הרבה יותר טובה במאות מיקומים ברחבי העולם.
DNS, SSL ו-HTTP/2
אחרי שהשמירה במטמון הופעלה, זמני ההמתנה הופחתו וחלקים חשובים אחרים בחיבור הראשוני הפכו למשמעותיים יותר. בזכות השיפור של התשתית והניטור שלנו אנחנו יכולים לשפר את זמני ה-DNS, החיבורים וה-SSL.
HTTP/2 הופעל בכל הדומיינים של המשתמשים, וכך הצטמצם גם כמות החיבורים הנדרשים וגם התקורה שמגיעה עם כל חיבור חדש. זה היה שינוי קל יחסית לפריסה, תוך מינוף היתרונות של ביצועים ועמידות בזכות HTTP/2.
דחיסת Brotli (לעומת gzip)
21 - 25%
הקטנת גודל החציון של העברת הקבצים
באופן מסורתי, כל הקבצים שלנו נדחסו באמצעות דחיסת gzip, שהיא אפשרות דחיסת ה-HTML הנפוצה ביותר באינטרנט. פרוטוקול הדחיסה הזה הוטמע במקור לפני כמעט 30 שנה!
הגרסה החדשה יותר של דחיסת Brotli כוללת שיפורים בדחיסה ללא פשרות כמעט, והיא הופכת לפופולרית יותר בהדרגה, כפי שמתואר בפרק הדחיסה השנתי של Web Almanac. הוא נתמך על ידי כל הדפדפנים המובילים כבר זמן מה.
הוספנו תמיכה ב-Brotli בשרתי ה-proxy ל-nginx שלנו, לכל הלקוחות שתומכים בה.
המעבר לשימוש בדחיסת Brotli הפחית את החציון של העברת הקבצים שלנו ב-21% ל-25%, וכתוצאה מכך השימוש ברוחב הפס פחת וזמני הטעינה השתפרו.
רשתות להעברת תוכן (CDN)
בחירת CDN דינמי
ב-Wix, תמיד השתמשנו ב-CDN כדי להציג את כל הקוד והתמונות של JavaScript באתרים של המשתמשים.
לאחרונה, שילבנו פתרון של ספק ה-DNS שלנו כדי לבחור באופן אוטומטי את רשת ה-CDN שמניבה את הביצועים הטובים ביותר, בהתאם לרשת ולמקור של הלקוח. כך אנחנו יכולים להציג את הקבצים הסטטיים מהמיקום הטוב ביותר לכל מבקר, ולהימנע מבעיות זמינות ב-CDN מסוים.
בקרוב... דומיינים של משתמשים שמקבלים שירות מ-CDN
החלק האחרון בפאזל הוא החלק האחרון והקריטי ביותר, דרך CDN: ה-HTML מדומיין המשתמש.
כפי שתואר קודם, יצרנו פתרון פנימי משלנו כדי לשמור במטמון ולהציג את תוצאות ה-HTML וה-API הספציפיות לאתר. תחזוקה של הפתרון הזה באזורים חדשים רבים כל כך כרוכה בעלויות תפעול, והוספת מיקומים חדשים הופכת לתהליך שאנחנו צריכים לנהל ולבצע בו אופטימיזציה כל הזמן.
אנחנו מבצעים כרגע שילוב עם ספקי CDN שונים כדי לתמוך בשירות המלא של אתר Wix ישירות ממיקומי CDN, במטרה לשפר את הפצת השרתים שלנו ברחבי העולם ובכך לשפר עוד יותר את זמני התגובה. זהו אתגר בגלל הכמות הגדולה של דומיינים שאנחנו מספקים שירות, שמחייבים סיום SSL בקצה.
השילוב עם CDNs מקרב את אתרי Wix ללקוח יותר מאי פעם, וכולל שיפורים נוספים בחוויית הטעינה, כולל טכנולוגיות חדשות יותר כמו HTTP/3 ללא מאמץ נוסף מצידנו.
כמה מילים על מעקב אחר ביצועים
אם אתם מנהלים אתר ב-Wix, אתם בטח תוהים איך זה מתבטא בתוצאות הביצועים של האתר ב-Wix, ואיך אנחנו משווים מול פלטפורמות אחרות של אתרים.
רוב העבודה שנעשתה למעלה נפרסה בשנה האחרונה, וחלקן עדיין בהשקה.
מהדורת 2020 של Web Almanac ב-HTTPArchive פרסמה לאחרונה את מהדורת 2020, שכוללת פרק מצוין בנושא חוויית המשתמש במערכת ניהול התוכן. חשוב לזכור שרבים מהנתונים שמתוארים במאמר הזה הם מאמצע שנת 2020.
נשמח לקבל את הדוח המעודכן ב-2021, ואנחנו עוקבים באופן פעיל אחרי דוחות CrUX באתרים שלנו ואחר מדדי הביצועים הפנימיים שלנו.
אנחנו מחויבים לשפר את זמני הטעינה באופן קבוע ולספק למשתמשים שלנו פלטפורמה שבה הם יוכלו לבנות אתרים לפי מה שהם חושבים, בלי לפגוע בביצועים.
לאחרונה פרסמנו ב-DebugBear סקירה מעניינת מאוד לגבי הביצועים של הכלי לבניית אתרים, שעוסקת בכמה מהתחומים שהזכרתי למעלה, ונבחנת את הביצועים של אתרים פשוטים מאוד שנבנו בכל פלטפורמה. האתר הזה נבנה כמעט שנתיים ולא השתנה מאז, אבל הפלטפורמה ממשיכה להשתפר כל הזמן ויחד איתה ניתן לראות את ביצועי האתר באמצעות הצגת הנתונים שלו בשנה וחצי.
סיכום
אנחנו מקווים שהחוויה שלנו תעודד אתכם לאמץ תרבות מוכוונת ביצועים בארגון שלכם, ושהפרטים שלמעלה שימושיים ורלוונטיים לפלטפורמה או לאתר שלכם.
לסיכום:
- בחרו קבוצת מדדים שניתן לעקוב אחריהם בעקביות באמצעות כלים שהתחום ממליץ עליה. אנחנו ממליצים על מדדי ליבה לבדיקת חוויית המשתמש באתר.
- נצל את השמירה במטמון הדפדפן ו-CDN.
- עוברים ל-HTTP/2 (או ל-HTTP/3 אם אפשר).
- משתמשים בדחיסת Brotli.
תודה שלמדתם על הסיפור שלנו, ואנחנו מזמינים אתכם לשאול שאלות, לשתף רעיונות ב-Twitter וב-GitHub ולהצטרף לשיחה על הביצועים באינטרנט בערוצים האהובים עליכם.