סיכום של החדשות והעדכונים העיקריים שהוכרזו במהלך אירוע הקהילה אונליין שנמשך 3 ימים, ותזכורת לגבי אירועים אזוריים קרובים.
בדיוק סיימנו את האירוע בן שלושת הימים, web.dev LIVE, שבו חלק מקהילת האינטרנט התכנסה אונליין כדי לדבר על מצב פיתוח האתרים. התחלנו כל יום באזור זמן אחר, וצוותי Google שיתפו עדכונים, חדשות וטיפים כדי לעזור למפתחים עם כלים והנחיות לשמירה על אינטרנט יציב, חזק ונגיש.
אם פספסתם חלק מהשידור החי, כל הסשנים מוקלטים ואתם יכולים לצפות בהם ב-YouTube. אנחנו גם מתכננים אירועים אזוריים ברחבי העולם, שיאורגנו על ידי קבוצות Google Developer Groups ויכללו מפגשים מעמיקים בנושאים שקשורים למה שכיסינו במהלך web.dev LIVE.
בואו נצלול לכמה מהחדשות והעדכונים ששותפו במהלך שלושת הימים.
Web Vitals
צוות Chrome הכריז על יוזמת Web Vitals כדי לספק הנחיות, מדדים וכלים אחידים שיעזרו למפתחים לספק חוויית משתמש מעולה באינטרנט. לאחרונה, הצוות של חיפוש Google הודיע שהם יעריכו את חוויית השימוש בדף כקריטריון דירוג, ויכללו את מדדי Core Web Vitals כבסיס.
שלושת עמודי התווך של Core Web Vitals לשנת 2020 הם טעינה, אינטראקטיביות ויציבות חזותית של תוכן הדף, והם נמדדים באמצעות המדדים הבאים:
- המהירות שבה נטען רכיב התוכן הכי גדול (LCP) מודדת את מהירות הטעינה הנתפסת ומציינת את הנקודה בציר הזמן של טעינת הדף שבה כנראה נטען התוכן הראשי של הדף.
- מהירות התגובה לאינטראקציה ראשונה (FID) מודדת את הרספונסיביות ומכמתת את החוויה של המשתמשים כשהם מנסים ליצור אינטראקציה עם דף בפעם הראשונה.
- מדד יציבות חזותית (CLS) מודד את היציבות החזותית ומכמת את כמות התנועה הבלתי צפויה של תוכן הדף.
באירוע web.dev LIVE, שיתפנו שיטות מומלצות לאופטימיזציה של Core Web Vitals ואיך להשתמש בכלי הפיתוח ל-Chrome כדי לבדוק את ערכי ה-vitals של האתר. שיתפנו גם הרבה הרצאות אחרות שקשורות לביצועים, שאפשר למצוא בכתובת web.dev/live בלוח הזמנים של היום הראשון.
tooling.report
פיתוח לפלטפורמה רחבה כמו האינטרנט יכול להיות מאתגר. כלי build הם בדרך כלל חלק מרכזי בפרויקט לפיתוח אתרים, ויש להם תפקיד חשוב בניהול מחזור החיים של המפתחים והמוצרים.
כולנו ראינו קובצי תצורה מסורבלים של build, אז כדי לעזור למפתחי אתרים וגם ליוצרי כלים להתגבר על המורכבות של האינטרנט, יצרנו את tooling.report. זהו אתר שעוזר לכם לבחור את כלי ה-build המתאים לפרויקט הבא שלכם, להחליט אם כדאי לעבור מכלי אחד לאחר, או להבין איך לשלב שיטות מומלצות בהגדרת הכלים וב-code base.
יצרנו חבילת בדיקות כדי לקבוע אילו כלי פיתוח מאפשרים לכם לפעול לפי השיטות המומלצות לפיתוח אתרים. עבדנו עם יוצרי כלי ה-build כדי לוודא שהשתמשנו בכלים שלהם בצורה נכונה וייצגנו אותם בצורה הוגנת.
הגרסה הראשונית של tooling.report כוללת את webpack v4, Rollup v2, Parcel v2 ו-Browserify עם Gulp, שנראה שהם כלי ה-build הפופולריים ביותר כרגע. יצרנו את tooling.report עם הגמישות להוסיף עוד כלי build ובדיקות נוספות בעזרת הקהילה.
אם חסרה שיטה מומלצת שצריך לבדוק, אפשר להציע אותה ב-GitHub. אם אתם רוצים לכתוב בדיקה או להוסיף כלי חדש שלא כללנו בקבוצה הראשונית, אתם מוזמנים לתרום.
בינתיים, אתם יכולים לקרוא מידע נוסף על הגישה שלנו לפיתוח tooling.report ולצפות בסשן שלנו מ-web.dev LIVE.
פרטיות ואבטחה באינטרנט
אנחנו ב-Chrome מאמינים באינטרנט פתוח שמכבד את פרטיות המשתמשים, ומאפשר להם להמשיך להשתמש באינטרנט בצורה שמתאימה להם.
בשנת 2019, Chrome הציע עדכון לתקן של קובצי Cookie, כדי להגביל את קובצי ה-Cookie לנתונים שנאספים ישירות ממשתמשים כברירת מחדל, ולדרוש שקובצי Cookie להקשרים של צד שלישי יסומנו במפורש ככאלה. באופן ספציפי, זה מספק קו הגנה מפני התקפות של זיוף בקשות בין אתרים (CSRF). ההצעה אומצה על ידי Chrome, Firefox, Edge ודפדפנים אחרים.
למרות שב-Chrome החליטו לבטל באופן זמני את השינויים האלה בגלל נגיף הקורונה, למרבה הצער, בתקופות משבר שבהן אנשים פגיעים יותר, יש גם עלייה במתקפות מהסוג הזה. לכן, עם השקת הגרסה היציבה של Chrome 84 (באמצע יולי 2020), השינויים יתחילו להתפרס שוב בכל הגרסאות של Chrome מ-80 ומעלה. כדי לקבל מידע נוסף, כדאי לעיין בהנחיות בנושא קובצי Cookie עם מאפיין SameSite וגם בסשן של web.dev LIVE.
בנוסף, במסגרת ארגז החול לפרטיות, אנחנו מציגים ב-Chrome כמה הצעות לתקנים שנועדו לתמוך בתרחישי שימוש שמאפשרים לאנשים להתפרנס באמצעות פלטפורמת האינטרנט, אבל בצורה שמכבדת יותר את פרטיות המשתמשים. אנחנו ב-Chrome מעוניינים לקבל משוב על ההצעות האלה, ומשתתפים בפורומים הפתוחים של W3C כדי לדון בהצעות האלה ובהצעות שהוגשו על ידי גורמים אחרים. מידע נוסף על היוזמה הזו זמין בסשן אבטחה ופרטיות באינטרנט הפתוח.
ולסיום, בהקשר של אבטחת משתמשים, Spectre הייתה פרצה שאיפשרה לקוד זדוני שפועל בתהליך אחד של הדפדפן לקרוא את כל הנתונים שמשויכים לתהליך הזה, גם אם הם הגיעו ממקור אחר. אחת מהדרכים שבהן הדפדפן מתמודד עם הבעיה הזו היא בידוד של אתר, כלומר, כל אתר פועל בתהליך נפרד. כדי לקבל מידע נוסף, אתם יכולים לצפות בסשן של web.dev LIVE בנושא המדיניות החדשה של פותח ממקורות שונים (COOP) ושל הטמעה ממקורות שונים (COEP).
פיתוח אינטרנט עם יכולות מתקדמות
אנחנו ב-Chrome רוצים לאפשר לכם ליצור אפליקציות אינטרנט באיכות הגבוהה ביותר, שיעזרו לכם להגיע לכמה שיותר משתמשים במכשירים שונים. אנחנו משלבים את יכולת ההתקנה והאמינות של אפליקציות אינטרנט פרוגרסיביות עם פרויקט היכולות (פרויקט Fugu), ומתמקדים בשלושה דברים ב-Chrome כדי לצמצם את הפער בין אפליקציות ספציפיות לפלטפורמה לבין האינטרנט, במטרה לעזור לכם ליצור ולספק חוויות נהדרות.
ראשית, הצוותים של Chrome עובדים קשה כדי לתת למפתחי אתרים ולמשתמשים יותר שליטה בחוויית ההתקנה, להוסיף קידום של התקנה לסרגל הכתובות ועוד. למרות שהאינטרנט נמצא בכל מקום, עדיין חשוב לעסקים מסוימים שהאפליקציה שלהם תהיה בחנות. כדי לעזור, Chrome השיק את Bubblewrap, ספרייה ו-CLI שמאפשרים להכניס את ה-PWA לחנות Play בקלות. למעשה, PWABuilder.com משתמש עכשיו ב-Bubblewrap מאחורי הקלעים. בכמה קליקים בלבד, אתם יכולים ליצור APK ולהעלות את ה-PWA לחנות Play, כל עוד אתם עומדים בקריטריונים.
שנית, Chrome מספק שילוב הדוק יותר עם מערכת ההפעלה, כמו היכולת לשתף תמונה, שיר או כל דבר אחר על ידי הפעלת שירות השיתוף ברמת המערכת באמצעות Web Share API, או היכולת לקבל תוכן כשמשתפים אותו מאפליקציה מותקנת אחרת. אתם יכולים לעדכן את המשתמשים או להודיע להם בעדינות על פעילות חדשה באמצעות תגי אפליקציות. בנוסף, עכשיו קל יותר למשתמשים להתחיל פעולה במהירות באמצעות קיצורי דרך לאפליקציות, שיופיעו ב-Chrome 84 (באמצע יולי 2020).
ולבסוף, אנחנו עובדים על יכולות חדשות ב-Chrome שמאפשרות תרחישים חדשים שלא היו אפשריים בעבר, כמו עורכים שקוראים וכותבים קבצים במערכת הקבצים המקומית של המשתמש, או מקבלים את רשימת הגופנים שמותקנים באופן מקומי כדי שהמשתמשים יוכלו להשתמש בהם בעיצובים שלהם.
במהלך web.dev LIVE, דיברנו על הרבה יכולות ותכונות אחרות שיכולות לאפשר לכם לספק את אותה חוויה, עם אותן יכולות, כמו אפליקציות ספציפיות לפלטפורמה. אפשר לראות את כל הסשנים בכתובת web.dev/live בלוח הזמנים של היום השני.
מה חדש בכלי הפיתוח ל-Chrome וב-Lighthouse 6.0
כלי הפיתוח ל-Chrome: כרטיסיית בעיות חדשה, אמולטור לליקויי ראיית צבעים ותמיכה ב-Web Vitals
אחת התכונות הכי יעילות של כלי הפיתוח ל-Chrome היא היכולת לזהות בעיות בדף אינטרנט ולהביא אותן לתשומת ליבו של המפתח. זה חשוב במיוחד כשאנחנו עוברים לשלב הבא של אינטרנט מוכוון פרטיות. כדי לצמצם את העומס והעייפות מהתראות במסוף, כלי הפיתוח ל-Chrome השיקו את כרטיסיית הבעיות שמתמקדת בשלושה סוגים של בעיות קריטיות: בעיות בקובצי Cookie, תוכן מעורב ובעיות ב-COEP. כדי להתחיל, כדאי לצפות בסשן של web.dev LIVE בנושא איתור ותיקון בעיות באמצעות הכרטיסייה "בעיות".
בנוסף, מכיוון שCore Web Vitals הפכו לאחת מקבוצות המדדים החשובות ביותר למעקב ולמדידה עבור מפתחי אתרים, כלי הפיתוח רוצים לוודא שמפתחים יכולים לעקוב בקלות אחרי הביצועים שלהם ביחס לספים האלה. לכן שלושת המדדים האלה נמצאים עכשיו בחלונית הביצועים של כלי הפיתוח ל-Chrome.
ולבסוף, ככל שיותר ויותר מפתחים מתמקדים בנגישות, הוספנו לכלי הפיתוח גם אמולטור לליקויי ראיית צבעים שמאפשר למפתחים לדמות ראייה מטושטשת וסוגים אחרים של ליקויי ראייה. מידע נוסף על התכונה הזו ועל תכונות רבות אחרות זמין בסשן מה חדש בכלי הפיתוח.
Lighthouse 6.0: מדדים חדשים, מדידות מעבדה של Core Web Vitals, ציון ביצועים מעודכן ובדיקות חדשות
Lighthouse הוא כלי אוטומטי בקוד פתוח שעוזר למפתחים לשפר את ביצועי האתר שלהם. בגרסה העדכנית, צוות Lighthouse התמקד במתן תובנות על סמך מדדים שנותנים תמונה מאוזנת של איכות חוויית המשתמש בהשוואה למאפיינים קריטיים.
כדי להבטיח עקביות, הוספנו ל-Lighthouse תמיכה ב-Core Web Vitals: LCP, TBT (פרוקסי ל-FID, כי Lighthouse הוא כלי מעבדה ואפשר למדוד את FID רק בשטח) ו-CLS. בנוסף, ב-Lighthouse הוסרו שלושה מדדים ישנים: הצגת התוכן העיקרי (FMP), זמן ראשון ללא פעילות של המעבד (CPU) והשהיה אפשרית מקסימלית לאחר קלט ראשוני (FID). ההסרות האלה נובעות משיקולים כמו השתנות המדדים ומדדים חדשים יותר שמשקפים טוב יותר את החלק בחוויית המשתמש ש-Lighthouse מנסה למדוד. בנוסף, בעקבות משוב ממשתמשים, ביצענו ב-Lighthouse כמה שינויים במידת ההשפעה של כל מדד על ציון הביצועים הכולל.
בנוסף, ב-Lighthouse נוסף מחשבון ניקוד שעוזר לבדוק את ניקוד הביצועים, על ידי השוואה בין הניקוד בגרסה 5 לניקוד בגרסה 6. כשמריצים ביקורת באמצעות Lighthouse 6.0, הדוח כולל קישור למחשבון עם התוצאות שלכם.
ולסיום, הוספנו ל-Lighthouse הרבה בדיקות חדשות, עם דגש על ניתוח JavaScript ונגישות.
מידע נוסף זמין בסרטון What's new in speed tooling.
מידע נוסף
תודה לכל מי שהצטרף אלינו מהקהילה כדי לדון בהזדמנויות ובאתגרים של פלטפורמת האינטרנט.
הפוסט הזה סיכם כמה מהדגשים של האירוע, אבל היה עוד הרבה יותר. כדאי לצפות בכל הסשנים ולהירשם לניוזלטר של web.dev כדי לקבל עוד תוכן ישירות לתיבת הדואר הנכנס. בקטע Regional Events באתר web.dev/live תוכלו למצוא אירוע קהילתי שיתקיים בקרוב באזור הזמן שלכם.