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