מידע על שלוש השקות חדשות של ביצועי אתרים מכנס I/O 2019.
במהלך הרצאה של"Speed at Scale" ב-Google I/O 2019, הודענו על שלושה דברים שאנחנו מקווים שישפרו את ביצועי האתרים בשנה הקרובה.
הכלי Lighthouse תומך עכשיו ב'תקצוב ביצועים'
LightWallet היא תכונה חדשה ב-Lighthouse שמוסיפה תמיכה בתקציבים של ביצועים. תקציבי ביצועים קובעים סטנדרטים לביצועים של האתר שלכם. יותר מכך, הם מאפשרים לזהות ולתקן רגרסיות ביצועים בקלות לפני המשלוח.
אפליקציית LightWallet זמינה בגרסה החדשה ביותר של Lighthouse CLI, ותהליך ההגדרה שלה נמשך רק כמה דקות. בהוראות האלה מופיע מידע נוסף.
לא בטוחים מה צריך להיות התקציבים שלכם? כדאי לנסות את מחשבון תקציב הביצועים הניסיוני שלנו, שיכול ליצור הגדרת תקציב תואמת ל-LightWallet.
טעינה מדורגת של תמונה ברמת הדפדפן ו-iframe מגיעה לאינטרנט
דפי אינטרנט מכילים בדרך כלל מספר גדול של תמונות, מה שתורמות לשימוש בנתונים, לריבוי דפים ולטעינה איטית יותר של דפים. חלק גדול מהתמונות האלה לא מופיעות במסך, ולכן המשתמש צריך לגלול כדי לראות אותן.
עד עכשיו, הייתם צריכים לפתור תמונות בטעינה מדורגת באמצעות ספריית JavaScript, אבל זה עשוי להשתנות בקרוב. בקיץ הזה נשיק ב-Chrome תמיכה במאפיין טעינה, שתוביל לדפי אינטרנט סטנדרטיים של <img> ו-<iframe> טעינה מדורגת.
המאפיין 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 זמינה עכשיו בסביבת הייצור לכל הגופנים ב-Google Fonts באמצעות הפרמטר display query-string:
https://fonts.googleapis.com/css?family=Lobster&display=swap
מתאר font-display מאפשר לך להחליט איך גופני האינטרנט יעובדו או ייחזרו, בהתאם למשך הזמן שייקח להם להיטען. יש בה תמיכה בכמה ערכים, כולל auto, block, swap, fallback ו-optional.
בעבר, הדרך היחידה לציין font-display לגופני אינטרנט מ-Google Fonts הייתה לארח אותם בעצמכם, אבל השינוי הזה ביטל את הצורך לעשות זאת.
המסמכים של Google Fonts עודכנו כך שיכללו את font-display בהטמעות הקוד שמוגדרות כברירת מחדל (כפי שנראה בהמשך). אנחנו מקווים שזה יעודד עוד מפתחים לנסות את התוספת המלהיבה הזו.
הנה הדגמה של השימוש ברשת המדיה עם מספר משפחות גופנים. כדאי לנסות בעזרת DevTools אמולציית רשת כדי לראות את ההשפעה של font-display: swap.
צפייה בתכנים נוספים
בנוסף, דיברנו על מספר מקרים לדוגמה של שימוש בדפוסי ביצועים מתקדמים כדי לשפר את חוויית המשתמש. אלו כוללים אתרים שנעשה בהם שימוש ברשתות CDN של תמונות, דחיסת Brotli, הצגה חכמה של JavaScript ושליפה מראש (prefetch) כדי להאיץ את הדפים. למידע נוסף: