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