מהירות בקנה מידה נרחב: מה חדש בביצועי האינטרנט?

מידע על שלושה השקות חדשות של תכונות לשיפור הביצועים באינטרנט שפורסמו בכנס I/O 2019.

Katie Hempenius
Katie Hempenius

במהלך ההרצאה מהירות בקנה מידה נרחב בכנס Google I/O 2019, הודענו על שלושה דברים שאנחנו מקווים שישפרו את ביצועי האתרים במהלך השנה הקרובה.

עכשיו יש ב-Lighthouse תמיכה בתקציב מבוסס-ביצועים

LightWallet הוא תכונת חדשה ב-Lighthouse שמוסיפה תמיכה בתקציבי ביצועים. תקציבי ביצועים מאפשרים להגדיר יעדי ביצועים עבור האתר. חשוב מכך, הם מאפשרים לזהות בקלות רגרסיות בביצועים ולתקן אותן לפני השקת הגרסה.

דוח LightWallet שבו מוצגים הנכסים שגודל הקובץ שלהם חורג מהתקציב.

LightWallet זמין בגרסה החדשה ביותר של ה-CLI של Lighthouse, וההגדרה שלו נמשכת רק כמה דקות. כאן תוכלו לקרוא מידע נוסף.

לא בטוחים מהם התקציבים שאתם צריכים להגדיר? כדאי לנסות את מחשבון התקציב לצורכי ביצועים הניסיוני שלנו, שיכול ליצור הגדרת תקציב שתואמת ל-LightWallet.

טעינת פריטים לאט ברמת הדפדפן – תמונות ו-iframe מגיעים לאינטרנט

דפי אינטרנט מכילים לעיתים קרובות מספר רב של תמונות, שתורמות לשימוש בנתונים, לנפח גדול מדי של דפים ולטעינה איטית יותר של דפים. רבות מהתמונות האלה לא מוצגות במסך, ולכן המשתמשים צריכים לגלול כדי לראות אותן.

עד עכשיו, כדי להפעיל טעינת תמונות בזמן אמת צריך להשתמש בספריית JavaScript, אבל יכול להיות שהמצב ישתנה בקרוב. בקיץ הקרוב, נוסיף ל-Chrome תמיכה במאפיין loading, שיאפשר להשתמש באינטרנט בטעינת <img> ו-<iframe> רגילה ובטעינה איטית (lazy loading) רגילה.

טעינה איטית ברמת הדפדפן שמציגה תוכן מחוץ למסך שנטען על פי דרישה

האטריבוט loading מאפשר לדפדפן לדחות את טעינת התמונות וה-iframes שמחוץ למסך עד שהמשתמשים גוללים לידיהם. יש תמיכה ב-loading בשלושה ערכים:

  • lazy: מתאים לטעינה איטית.
  • eager: לא מתאים לטעינה איטית. טעינה מיידית.
  • auto: הדפדפן יקבע אם לבצע טעינה איטית או לא.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

השיטה ההיוריסטית המדויקת ל'כשהמשתמש גולל ליד' נתונה לשיקול דעת הדפדפן. באופן כללי, אנחנו מקווים שהדפדפנים יתחילו לאחזר תמונות ותוכן של iframe שהועברו לטיפול מאוחר קצת לפני שהם מופיעים בחלון התצוגה.

המאפיין loading מוטמע מאחורי דגלים ב-Chrome Canary. אפשר לנסות את הדמו הזה ב-Chrome מגרסה 75 ואילך, כשהדגלים about://flags/#enable-lazy-image-loading ו-about://flags/#enable-lazy-frame-loading מופעלים.

במאמר הזה מפורט מידע נוסף על התכונה 'טעינה איטית'.

Google Fonts תומך עכשיו ב-font-display כפרמטר של שאילתה

הודענו שתמיכה ב-font-display זמינה עכשיו בסביבת הייצור לכל גופני Google באמצעות הפרמטר של מחרוזת השאילתה של התצוגה:

https://fonts.googleapis.com/css?family=Lobster&display=swap

באמצעות המתאר font-display אפשר לקבוע איך ייראו הגופנים באינטרנט או איך הם יוחלפו, בהתאם למשך הזמן שלוקח להם לטעון. הוא תומך במספר ערכים, כולל auto,‏ block,‏ swap,‏ fallback ו-optional.

בעבר, הדרך היחידה לציין את font-display לגופני אינטרנט מ-Google Fonts הייתה לארח אותם בעצמכם, אבל בעקבות השינוי הזה אין צורך לעשות זאת.

המסמכים של Google Fonts עודכנו כך שיכללו את font-display בהטמעות ברירת המחדל של הקוד (כפי שמוצג בהמשך). אנחנו מקווים שהדבר יעודד מפתחים נוספים לנסות את התוספת המרגשת הזו.

הטמעת קוד של Google Fonts עם font-display שכלול בכתובת ה-URL כפרמטר של שאילתה

הדגמה ב-Glitch של שימוש בתצוגה עם כמה משפחות גופנים. כדי לראות את ההשפעה של font-display: swap, אפשר לנסות את הדמיית הרשת של DevTools.

צפייה בסרטונים נוספים

בנוסף, דיברנו על כמה מחקרים מעשיים בנושא שימוש בתבניות מתקדמות של ביצועים כדי לשפר את חוויית המשתמש. האתרים האלה השתמשו ב-CDN של תמונות, בדחיסת Brotli, בהצגה חכמה של JavaScript ובאחסון מראש כדי להאיץ את הדפים שלהם. כדאי לצפות בהרצאה כדי לקבל מידע נוסף :)