סיכום של החדשות והעדכונים העיקריים שפורסמו במהלך האירוע של הקהילה שלנו באינטרנט, שנמשך 3 ימים, ותזכורת לגבי האירועים האזוריים הקרובים.
בדיוק סיימנו את האירוע של שלושת הימים, web.dev LIVE, שבו חלק מקהילת האינטרנט התאחדו באינטרנט כדי לדבר על מצב הפיתוח באינטרנט. התחלנו כל יום באזור זמן אזורי שונה, וגוגלרים שיתפו סבב של עדכונים, חדשות וטיפים ברוח שבה אנחנו עוזרים למפתחים לקבל כלים והנחיות שיעזרו להם לשמור על האינטרנט יציב, חזק ונגיש.
אם פספסתם חלק מהשידור החי, כל הסשנים מוקלטים ותוכלו לצפות בהם ב-YouTube. בנוסף, אנחנו עורכים בכל העולם אירועים אזוריים שמאורגנים על ידי קבוצות המפתחים של Google, ונספק מפגשים מעמיקים בנושאים שקשורים לנושא שנלמד במהלך web.dev LIVE.
נבחן עכשיו כמה מהחדשות והעדכונים ששותפו במהלך שלושת הימים.
Web Vitals
צוות Chrome הכריז על מיזם Web Vitals כדי לספק הנחיות, מדדים וכלים מאוחדים שיעזרו למפתחים לספק חוויית משתמש מעולה באינטרנט. בנוסף, צוות חיפוש Google לאחרונה הודיע שהוא יבחן את חוויית השימוש בדף כקריטריון לדירוג, ויכלול מדדי ערך ליבה לבדיקת חוויית המשתמש באתר בתור הבסיס שלו.
שלושת עמודי התווך של מדדי הליבה לבדיקת חוויית המשתמש באתר לשנת 2020 הם טעינה, אינטראקטיביות ויציבות חזותית של תוכן הדף, לפי המדדים הבאים:
- המהירות שבה נטען רכיב התוכן הכי גדול (LCP) מודדת את מהירות הטעינה הנתפסת ומסמנת את הנקודה בציר הזמן של טעינת הדף שבה סביר להניח שהתוכן הראשי של הדף נטען.
- השהייה לאחר קלט ראשון מודדת את התגובה ומכמת את החוויה שהמשתמשים מרגישים כשהם מנסים ליצור אינטראקציה ראשונה עם הדף.
- Cumulative Layout Shift מודד את היציבות החזותית ומכמת את כמות התנועה הבלתי צפויה של תוכן הדף.
ב-web.dev LIVE, שיתפנו שיטות מומלצות לביצוע אופטימיזציה ל-Core Webvitals וכיצד להשתמש ב-Chrome DevTools כדי לבחון את הערכים החשובים של האתר. בנוסף, שיתפנו הרצאות רבות נוספות הקשורות לביצועים, שאפשר למצוא בכתובת web.dev/live בלוח הזמנים של היום הראשון.
tooling.report
הפיתוח עבור פלטפורמה רחבה כמו האינטרנט יכול להיות מאתגר. בדרך כלל כלי ה-build הם הלב של פרויקט פיתוח האתרים, והם ממלאים תפקיד מרכזי בטיפול במפתח ובמחזור החיים של המוצרים.
כולנו ראינו קובצי תצורה רבים של build, ולכן כדי לעזור למפתחי אינטרנט וגם למחברי כלים להתגבר על המורכבות של האינטרנט, בנינו את tooling.report. באתר הזה תוכלו לבחור את כלי ה-build שמתאים לפרויקט הבא, להחליט אם כדאי לעבור מכלי אחד לאחר או להבין איך לשלב את השיטות המומלצות בהגדרות של הכלים ובבסיס הקוד.
תכננו חבילת בדיקות כדי לקבוע אילו כלי build מאפשרים לכם לפעול לפי השיטות המומלצות לפיתוח אתרים. עבדנו עם המחברים של כלי ה-build כדי לוודא שהשתמשנו בכלים שלהם בצורה נכונה ושנציג אותם בצורה הוגנת.
בהשקה הראשונית של Tooling.report נעשה שימוש ב-webpack v4, ב-Rollup v2, ב-Parcel v2 וב-Browserify with Gulp, שנראים ככלי ה-build הפופולריים ביותר כרגע. יצרנו את Tooling.report מתוך הגמישות של הוספת עוד כלי פיתוח ובדיקות נוספות בעזרת הקהילה.
אם חסרה לנו שיטה מומלצת שצריך לבדוק, הציעו אותה בבעיה ב-GitHub. אם אתם מתכננים לכתוב בדיקה או להוסיף כלי חדש שלא כללנו בהגדרה הראשונית, אנחנו מזמינים אתכם לתרום!
בינתיים, אפשר לקרוא עוד על הגישה שלנו ליצירת Tooling.report ולצפות בסשן שלנו מ-web.dev בשידור חי.
פרטיות ואבטחה באינטרנט
ב-Chrome מאמינים באינטרנט פתוח שמכבד את פרטיות המשתמשים, ושומר על תרחישים מרכזיים לדוגמה כדי שהרשת תמשיך לפעול עבור כולם.
בשנת 2019, דפדפן Chrome הציע עדכון לתקן קובצי ה-cookie כדי להגביל את קובצי ה-cookie להקשרים של צד ראשון כברירת מחדל, ולדרוש שקובצי cookie יסומנו באופן מפורש בהקשר של צד שלישי. באופן ספציפי, זה מספק קו הגנה מפני התקפות מסוג Cross-Site Request Forgery. ההצעה מיושמת עכשיו ב-Chrome, ב-Firefox, ב-Edge ובדפדפנים אחרים.
למרות ש-Chrome החליט לשחזר את השינויים האלה באופן זמני לאור ההתפרצות של נגיף הקורונה (COVID-19), לצערנו, בתקופת משבר שבה אנשים נמצאים בסיכון הגבוה ביותר, סוגי ההתקפות האלה גוברים. לכן, בגרסה היציבה של Chrome 84 (מאמצע יולי 2020), השינויים יתחילו להשקה מחדש בכל גרסאות Chrome מגרסה 80 ואילך. כדי לקבל מידע נוסף, כדאי לעיין בהנחיות לקובצי cookie של SameSite ובסשן החי של web.dev.
בנוסף, מתחת לבאנר של ארגז החול לפרטיות ב-Chrome מוצגות כמה הצעות לתקנים, שמטרתן לתמוך בתרחישים לדוגמה שמאפשרים לאנשים להתגורר באמצעות פלטפורמת האינטרנט, אבל עושות זאת בצורה שמכבדת את פרטיות המשתמשים. צוות Chrome מבקש משוב על ההצעות האלה ומשתתף בפורומים הפתוחים של W3C כדי לדון בהצעות וגם באלה שהוגשו על ידי צדדים אחרים. מידע נוסף על היוזמה הזו זמין בסשן אבטחה ופרטיות באינטרנט הפתוח.
לבסוף, בדקתי את אבטחת המשתמשים, וגילה ש-Spectre הוא נקודת חולשה שיכול להיות שקוד זדוני שפועל בתהליך דפדפן אחד יוכל לקרוא את כל הנתונים שמשויכים לתהליך הזה, גם אם הם ממקור אחר. אחת ממיטיגציות הדפדפן היא בידוד אתרים, כלומר הכנסת כל אתר לתהליך נפרד. לקבלת מידע נוסף, צפו בסשן החי של web.dev בשידור חי בכללי המדיניות החדשים לפתיחה ולהטמעה של Cross-Origin (COOP ו-COEP).
בניית אינטרנט עם יכולות מתקדמות
ב-Chrome אתם רוצים להיות חופשיים ליצור אפליקציות אינטרנט באיכות הגבוהה ביותר, שיעניקו לכם את פוטנציאל החשיפה הגדול ביותר למשתמשים במכשירים שונים. ב-Chrome משלבים את יכולת ההתקנה והאמינות של אפליקציות PWA עם פרויקט היכולות (Project Fugu), כדי לעזור לכם לסגור את הפער בין אפליקציות ספציפיות לפלטפורמה לבין האינטרנט, במטרה ליצור ולספק חוויות מעולות.
ראשית, הצוותים של Chrome עבדו קשה כדי להעניק למפתחי אתרים ולמשתמשים שליטה רבה יותר בחוויית ההתקנה, להוסיף קידום של התקנות לסרגל הכתובות ועוד. למרות העובדה שהאינטרנט נפוץ, עדיין חשוב לעסקים מסוימים להציג את האפליקציה שלהם בחנות. כדי לעזור, Chrome השיקה את בועה, ספרייה ו-CLI שבזכותם הכנסת ה-PWA לחנות Play היא טריוויה. למעשה, ב-PWABuilder.com נעשה עכשיו שימוש ב'אריזה בועה' מתחת למכסה. בכמה לחיצות עכבר תוכלו ליצור APK ולהעלות את ה-PWA לחנות Play, כל עוד אתם עומדים בקריטריונים.
שנית, Chrome מספק אינטגרציה הדוקה יותר עם מערכת ההפעלה, כמו אפשרות לשתף תמונה, שיר או כל דבר אחר על ידי הפעלת שירות השיתוף ברמת המערכת באמצעות Web Share API, או היכולת לקבל תוכן כאשר משתפים אותו מאפליקציה אחרת מותקנת. בעזרת תגים לאפליקציות תוכלו לעדכן את המשתמשים או ליידע אותם באופן קטן לגבי פעילות חדשה. כמו כן, עכשיו קל יותר למשתמשים להתחיל במהירות פעולה באמצעות קיצורי דרך של אפליקציות, שיגיעו ל-Chrome 84 (אמצע יולי 2020).
ולסיום, Chrome עובד על יכולות חדשות שמאפשרות תרחישים חדשים שלא היו אפשריים בעבר, כמו עורכים שקוראים וכותבים בקבצים במערכת הקבצים המקומית של המשתמש, או מקבלים את רשימת הגופנים שהותקנו באופן מקומי כדי שהמשתמשים יוכלו להשתמש בהם בעיצובים שלהם.
באירוע web.dev LIVE, דיברנו על הרבה תכונות ותכונות אחרות שיכולות לאפשר לך לספק את אותה חוויה, עם אותן יכולות, כמו אפליקציות ספציפיות לפלטפורמה. ניתן לראות את כל ההפעלות בכתובת web.dev/live בלוח הזמנים של היום השני.
מה חדש ב-Chrome DevTools וב-Lighthouse 6.0
כלי הפיתוח ל-Chrome: כרטיסיית בעיות חדשה, אמולטור של חסרי צבע ותמיכה ב-Web Vitals
אחת התכונות העוצמתיות ביותר של כלי הפיתוח ל-Chrome היא היכולת לזהות בעיות בדף אינטרנט ולמשוך אותן לתשומת הלב של המפתח. זה רלוונטי ביותר כשאנחנו עוברים לשלב הבא של אינטרנט שבו הפרטיות עומדת בראש סדר העדיפויות. כדי להפחית את העייפות ואת העומס של ההתראות במסוף, כלי הפיתוח ל-Chrome השיקו את הכרטיסייה Issues, שמתמקדת בשלושה סוגים של בעיות קריטיות שאפשר להתחיל עם: בעיות בקובצי cookie, תוכן מעורב ובעיות ב-COEP. כדי להתחיל, צפו בסשן Web.dev LIVE בנושא חיפוש ותיקון בעיות בכרטיסייה 'בעיות'.
בנוסף, מאחר שמדדי הליבה לבדיקת חוויית המשתמש באתר הם אחת מקבוצות המדדים הקריטיות ביותר למעקב ולמדידה של מפתחי אתרים, המטרה של כלי הפיתוח היא להבטיח שהמפתחים יוכלו לעקוב בקלות אחרי הביצועים שלהם ביחס לערכי הסף האלה. שלושת המדדים האלה נמצאים עכשיו בחלונית הביצועים של כלי הפיתוח ל-Chrome.
לבסוף, עם יותר ויותר מפתחים שמתמקדים בנגישות, הוספנו ב-DevTools גם אמולטור של לקויות בראיית צבעים, שמאפשר למפתחים לדמות ראייה מטושטשת וסוגים אחרים של ליקויי ראייה. מידע נוסף על התכונה הזו ועל תכונות רבות נוספות זמין בסשן What's new in DevTools (מה חדש בכלי הפיתוח).
Lighthouse 6.0: מדדים חדשים, מדידות ב-Lab של מדדי ליבה לבדיקת חוויית המשתמש באתר, ציון ביצועים מעודכן וביקורות חדשות
Lighthouse הוא כלי אוטומטי בקוד פתוח שעוזר למפתחים לשפר את ביצועי האתר שלהם. בגרסה האחרונה, צוות Lighthouse התמקד בתובנות על סמך מדדים שמעניקים תמונה מאוזנת לגבי איכות חוויית המשתמש לעומת מאפיינים קריטיים.
כדי לשמור על עקביות, מערכת Lighthouse הוסיפה תמיכה במדדי הליבה לבדיקת חוויית המשתמש באתר: LCP, TBT (שרת proxy ל-FID, כי Lighthouse הוא כלי של מעבדה ו-FID ניתן למדוד רק בשדה) וגם ב-CLS. בנוסף, הוסרו שלושה מדדים ישנים: המשמעות הראשונה Paint, יחידת המעבד הראשונה Idle ו-פוטנציאל מקסימלי FID. ההסרות האלה נובעות משיקולים כמו שונות של מדדים ומדדים חדשים יותר, שמאפשרים לשקף טוב יותר את החלק בחוויית המשתמש שמערכת Lighthouse מנסה למדוד. בנוסף, ב-Lighthouse בוצעו כמה שינויים לגבי ההשפעה של כל מדד על ציון הביצועים הכולל, על סמך משוב מהמשתמשים.
Lighthouse הוסיף גם מחשבון ציונים כדי לעזור לכם לבדוק את ציון הביצועים, על ידי השוואה בין הציונים בגרסה 5 ל-6. כשמריצים ביקורת באמצעות Lighthouse 6.0, הדוח כולל קישור למחשבון שבו מוצגות התוצאות.
לבסוף, Lighthouse הוסיפה כמה ביקורות חדשות, שמתמקדות בניתוח ובנגישות של JavaScript.
למידע נוסף, תוכלו לצפות בסשן What's new in Speed Toolsing.
מידע נוסף
תודה לכל האנשים בקהילה שהצטרפו אלינו כדי לדון בהזדמנויות ובאתגרים של פלטפורמת האינטרנט.
הפוסט הזה סיכם כמה מהמיטב של האירוע, אבל יש עוד הרבה דברים נוספים. אל תשכחו לבקר בכל sessions ולהירשם לניוזלטר web.dev אם אתם רוצים לקבל תוכן נוסף ישירות לתיבת הדואר הנכנס. היכנסו לקטע אירועים אזוריים ב-web.dev/live כדי לראות אירוע קהילתי קרוב באזור הזמן שלכם.