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