מיזם Aurora של Chrome הוא שיתוף פעולה בין Chrome לבין מסגרות JavaScript בקוד פתוח וכלים לשיפור חוויית המשתמש באינטרנט. אם רק התחלתם, כדאי לקרוא את פוסט המבוא שלנו כדי לקבל מידע נוסף על המשימה והמתודולוגיה שלנו.
מכיוון שלא פרסמנו מפת דרכים מאז 2021, רצינו לספר לכם על מה שעשינו עד עכשיו, ועל כמה פרויקטים מרגשים שאנחנו מתכננים לשנת 2023.
פרויקטים חשובים מהזמן האחרון
בשנים האחרונות שיתפנו פעולה עם frameworks כמו Next.js, Angular ו-Nuxt כדי לבצע אופטימיזציה של מדדי הליבה לבדיקת חוויית המשתמש באתר. הנה כמה מהשינויים הבולטים מאז העדכון האחרון.
תמונות
תמונות הן בדרך כלל מקור לבעיות בביצועים. בהמשך מפורטות כמה מהשיטות שפיתחנו עם בעלי עניין ב-framework כדי להבטיח שהשיטות המומלצות יהיו זמינות מראש, כדי שמפתחים יציגו תמונות באופן אופטימלי כברירת מחדל כשהם משתמשים ב-frameworks שאנחנו עובדים איתן.
הדירקטיבה בנושא תמונה זוויתית
פרסמנו הוראת תמונה יציבה עבור Angular framework. ההנחיה הייתה זמינה ב-Angular 15 ועברה גיבוי אוטומטי לגרסאות 13.4 ו-14.3. ההוראה הזו מפעילה טעינה מדורגת דינמית כברירת מחדל, מוסיפה רמזים של fetchpriority לתמונות בעדיפות גבוהה ויוצרת באופן אוטומטי מאפייני srcset מתאימים לתמונות רספונסיביות.
ההשפעה: בדיקות מעבדה של Lighthouse בוצעו בסביבת בקרת האיכות של Land's End לפני ואחרי השימוש בהוראת התמונה. במחשב, החציון של המדד LCP (המהירות שבה נטען רכיב התוכן הכי גדול (LCP)) ירד מ-12.0 שניות ל-3.0 שניות – שיפור של 75% ב-LCP.
אפשר לקרוא מידע נוסף על ההנחיה הזו בפוסט בבלוג שלנו, Optimizing Images with the Angular image Directive (אופטימיזציה של תמונות באמצעות ההנחיה של תמונות זוויתיות).
next/image חודש
כמו כן, עבדנו עם צוות Next.js כדי לעדכן את רכיב התמונה כך שישתמש בתכונות חדשות של הדפדפן, כמו טעינה עצלה מקורית ומאפיין HTML fetchpriority. הגרסה החדשה זמינה כברירת מחדל ב-Next 13.
ההשפעה : השותף שלנו Leboncoin הצליח לשפר את ה-LCP בחלק מהדפים בשיעור של עד 60% אחרי המעבר לגרסה החדשה של next/image.
גופני אינטרנט
לפעמים קשה לבצע אופטימיזציה של גופן אינטרנט, מכיוון שהדבר מורכב יותר מהקטנת גודל ההעברה של משאבי גופנים. גם גופני אינטרנט יכולים להשפיע באופן משמעותי על המדד Cumulative Layout Shift (CLS) של הדף, ולמזער את התנודות בפריסה עקב החלפת גופנים נדרש מאמץ רב. למרבה המזל, שיתפנו פעולה עם מסגרות כדי להקל על מפתחי אתרים לבצע את המשימה הזו.
שימוש בכלים לשיפור חלופות הגופנים ב-Next.js , Nuxt ו-Vite
שלחנו תכונה ב-Next 13 שמתאימה את המידות של הגופן החלופי של הדף כך שיתאים יותר לגופן האינטרנט כשהוא נטען. כך מפחיתים את ערכי ה-CLS הקשורים לגופנים. שיתפנו את המתודולוגיה שלנו עם הצוות של Nuxt, והיא הפכה למקור ההשראה למודול nuxtjs/fontaine ולפלאגין fontaine של Vite, ששניהם משתמשים באותו אלגוריתם.
ההשפעה: השותפה שלנו, Vox Media, הצליחה להפחית את ערך ה-CLS ב-The Verge ל-0 במהלך הייצור בדפים מסוימים באמצעות התכונה הזו.
אפשר לקרוא מידע נוסף בפוסטים בבלוג שלנו על יצירת חלופות משופרות לגופנים וכלים ל-framework להחלפת גופנים.
מודול nuxtjs/google-fonts
שיתפנו פעולה עם הצוות של Nuxt כדי להשיק מודול במטרה לבצע אופטימיזציה של הביצועים של Google Font. המודול מוריד ומארח באופן אוטומטי גופני Google כדי להימנע ממעבר נוסף לשרת הלוך ושוב, ותומך באפשרויות להטבעת גופנים.
סקריפטים של צד שלישי
קוד JavaScript של צד שלישי הוא מקור פוטנציאלי לבעיות בביצועים, והוא עשוי להשפיע על מדדים כמו אינטראקציה עם הסרטון הבא (INP), כי הפעילות של הסקריפטים האלה עשויה לעכב את ההפעלה של אינטראקציות של משתמשים.
רכיב next/script לסקריפטים של צד שלישי
בנינו רכיב סקריפט ל-Next 12 ואילך שמוגדר כברירת מחדל לטעינת סקריפטים לאחר שתייה, כדי למנוע חסימה של הנתיב הקריטי במהלך הטעינה. הוא כולל גם מצב של Web worker שמשלב את Partyטאון כדי להעביר סקריפטים לגמרי מה-thread הראשי.
ההשפעה: בבדיקות מעבדה של Lighthouse, ב-CareerKarma נרשמה ירידה של 24% ב-LCP באמצעות next/script component כשמצב העובד הופעל.
אפשר לקרוא מידע נוסף בפוסט בבלוג שלנו בנושא אופטימיזציה של טעינת סקריפטים של צד שלישי ב-Next.js.
שונות
השותפות שלנו עם מפתחי framework לא מסתיימת בשיפור מדדי הליבה לבדיקת חוויית המשתמש באתר. אנחנו גם פועלים כדי למנף יותר מה שחדש, כדי להקל על המפתחים להתחיל להשתמש בתכונות של פלטפורמת האינטרנט החדשניות ביותר.
polyfill של שאילתות קונטיינר
עדכנו את ה-Polyfill של שאילתות הקונטיינרים כדי לתמוך במגוון רחב יותר של תכונות CSS ולשפר את הביצועים שלה – בגרסה 1.0.
קראו עוד בפוסט בבלוג שלנו, בתוך The Container Query Polyfill (בתוך Container Query Polyfill).
מה צפוי בזוהר הצפוני?
בשנים 2023-2024, נשיק כמה פרויקטים מלהיבים לצינור עיבוד הנתונים כדי לבצע אופטימיזציה של מדדי הליבה לבדיקת חוויית המשתמש באתר עבור מפתחי framework.
בשנה הקרובה נתמקד בנושאים הבאים:
רכיבי wrapper של צד שלישי עבור Next.js ו-Nixt: רכיבי wrapper יכולים לאפשר טעינה של ספריות צד שלישי פופולריות באופן אופטימלי עבור LCP ו-INP. צריך לשחרר תג רכיב ב-DOM כדי לטעון את הצד השלישי במקום תג סקריפט, וה-framework תבחר את אסטרטגיית הטעינה הטובה ביותר. פרטים נוספים זמינים ב-RFC.
חוויית פיתוח של SSR ושתיית מים ב-Angular: עבדנו בשיתוף פעולה הדוק עם צוות Angular על פרויקט SSR ושתיית מים. ההתמקדות שלנו הייתה בשדרוג חוויית השימוש של המפתחים ב-SSR, כדי לאפשר ליותר אפליקציות לנצל את היתרונות של LCP. בקרוב נשלח עדכון RFC רשמי לגבי תכונות של מניפולציית SSR DOM.
הנחיות לתמונות ב-Angular ותכונות של
nuxt/image: אנחנו מתכננים להשתמש בכמה תכונות מלהיבות ל-Angular, כמו יצירת רמז לחיבור מראש באופן אוטומטי, כלי העברה שיעזרו במעבר מרכיבי<img>בסיסיים, תמיכה ברכיבי<picture>ורכיבי placeholder. בנוסף, נבצע ייעוץ עם צוות Nuxt בנוגע למספר תכונות חדשות עבורnuxt/image.מחקר INP (בתמונות שונות): בשנת 2024 אנחנו מגבירים את התמיכה בשיפור INP כדי לשפר את מודל ה-INP ב-2024 ובמקום את העיכוב הראשון בקלט (INP). התהליך הזה יכלול ניתוח של הסיבות העיקריות לבעיות ב-INP ב-frameworks ויצירת פתרונות מובנים למשתמשי framework כשזה אפשרי.
מד מהירות 3: אנחנו גם עוזרים להטמיע את הדור הבא של כלי ההשוואה לשוק, מד מהירות, כדי לייצג את הסביבה המודרנית של מסגרת האינטרנט לשנת 2023.
רוצה לקבל עדכונים וטיפים?
כדאי להוסיף לסימניות את דף הנחיתה שלנו כדי להתעדכן בחדשות האחרונות, בשיחות הטכנולוגיות ובפוסטים בבלוג של צוות Aurora. אפשר גם לעקוב אחרינו ב-Twitter:
- Kara Erickson – karaforthewin@
- Houssein Djirdeh – hdjirdeh@
- Katie Hempenius – katiehempenius@
- Alex Castle – atcastle@
- ג'רלד מונקו – devknoll@
- Janicklas Ralph James – janicklas@
- Thorsten Kober – tckober@