מידע על שלושה השקות חדשות של תכונות לשיפור הביצועים באינטרנט שפורסמו בכנס I/O 2019.
במהלך ההרצאה מהירות בקנה מידה נרחב בכנס Google I/O 2019, הכרזנו על שלושה דברים שאנחנו מקווים שישפרו את ביצועי האתרים במהלך השנה הקרובה.
עכשיו יש ב-Lighthouse תמיכה בתקציב מבוסס-ביצועים
LightWallet הוא תכונת חדשה ב-Lighthouse שמוסיפה תמיכה בתקציבי ביצועים. תקציבי ביצועים מאפשרים להגדיר יעדי ביצועים עבור האתר. חשוב מכך, הן מאפשרות לזהות בקלות רגרסיות בביצועים ולתקן אותן לפני שהן נשלחות.
LightWallet זמין בגרסה החדשה ביותר של ה-CLI של Lighthouse, וההגדרה שלו נמשכת רק כמה דקות. בהוראות האלה מפורט מידע נוסף.
לא בטוחים מהם התקציבים שאתם צריכים להגדיר? כדאי לנסות את מחשבון התקציב לביצועים הניסיוני שלנו, שיכול ליצור הגדרת תקציב שתואמת ל-LightWallet.
טעינת פריטים לאט ברמת הדפדפן – תמונות ו-iframe מגיעים לאינטרנט
דפי אינטרנט מכילים לעיתים קרובות מספר רב של תמונות, שתורמות לשימוש בנתונים, לנפח גדול מדי של דפים ולטעינה איטית יותר של דפים. רבות מהתמונות האלה לא מוצגות במסך, ולכן המשתמשים צריכים לגלול כדי לראות אותן.
עד עכשיו, כדי להפעיל טעינת תמונות בזמן אמת צריך להשתמש בספריית JavaScript, אבל יכול להיות שהמצב ישתנה בקרוב. בקיץ הקרוב, נוסיף ל-Chrome תמיכה במאפיין loading, שיאפשר להשתמש באינטרנט בטעינת <img> ו-<iframe> רגילה ובטעינה איטית (lazy loading) רגילה.
האטריבוט loading מאפשר לדפדפן לדחות את טעינת התמונות והפריטים מסוג iframe מחוץ למסך עד שהמשתמשים גוללים לידיהם. יש תמיכה ב-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 בהטמעות ברירת המחדל של הקוד (כפי שמוצג בהמשך). אנחנו מקווים שהדבר יעודד מפתחים נוספים לנסות את התוספת המרגשת הזו.
הדגמה ב-Glitch של שימוש בתצוגה עם כמה משפחות גופנים. כדי לראות את ההשפעה של font-display: swap, אפשר לנסות את הדמיית הרשת של DevTools.
צפייה בסרטונים נוספים
בנוסף, דיברנו על כמה מחקרים מעשיים בנושא שימוש בתבניות מתקדמות של ביצועים כדי לשפר את חוויית המשתמש. האתרים האלה השתמשו ב-CDN לתמונות, בדחיסת Brotli, בהצגה חכמה של JavaScript ובאחסון מראש כדי להאיץ את הדפים שלהם. כדאי לצפות בהרצאה כדי לקבל מידע נוסף :)