השלב הטבעי אחרי שמקבלים PushSubscription ושומרים אותו בשרת הוא להפעיל הודעת דחיפה, אבל יש דבר אחד שפספסתי. חוויית המשתמש כשמבקשים מהמשתמש הרשאה לשלוח לו התראות. לצערנו, מעט מאוד אתרים מקדישים תשומת לב רבה לאופן שבו הם מבקשים מהמשתמשים שלהם הרשאה, לכן

בפוסט הזה מוצג המדד Largest Contentful Paint (LCP) ומסביר איך למדוד אותו

לפעמים קשה לדעת מתי להשתמש ב-polyfill, אבל התכונות של Baseline יכולות לעזור לכם לענות על השאלה הזו. מידע נוסף זמין במדריך הזה.

מידע על לוח הבקרה של פלטפורמת האינטרנט ואיך אפשר להריץ שאילתות על ממשק ה-API ל-HTTP כדי לקבל נתונים על תכונות שהגיעו ל-Baseline, וכך ליצור כלים לתהליך הפיתוח.

לאור החשיבות הגוברת של מדדי הליבה לבדיקת חוויית המשתמש באתר, בעלי אתרים ומפתחים מתמקדים יותר ויותר בביצועים ובחוויות משתמש חשובות. Google מספקת כלים רבים שעוזרים להעריך דפים, לבצע אופטימיזציה שלהם ולעקוב אחריהם. עם זאת, מקורות הנתונים השונים לפעמים מתבלבלים בין המשתמשים לבין האופן שבו הם יכולים להשתמש בהם בצורה יעילה. מדריך זה מציע תהליך עבודה המשלב מספר כלים ומבהיר כיצד ואיך הם הגיוניים לאורך תהליך הפיתוח.

ruby-align הוא עכשיו חלק מ-Baseline

תאריך פרסום: 20 בפברואר 2025 הורדה מהימנה של מודלים גדולים של AI היא משימה מאתגרת. אם החיבור של המשתמשים לאינטרנט יתנתק או שהם ייסגרו את האתר או את אפליקציית האינטרנט, הם יאבדו את קובצי המודלים שהורדתם חלקית, ויאלצו להתחיל מחדש כשהם יחזרו לדף. שימוש

מידע נוסף על רמז למשאב rel=prefetch ואיך להשתמש בו.

כך מזהים ומתקנים שינויים בפריסה.

המדד Cumulative Layout Shift (CLS) מאפשר לכמת את התדירות שבה המשתמשים חווים שינויים פתאומיים בתוכן הדף. במדריך הזה, נעסוק באופטימיזציה של סיבות נפוצות ל-CLS, כמו תמונות ומסגרות iframe ללא מאפיינים או תוכן דינמי.

התכונות scrollbar-color ו-scrollbar-gutter ב-CSS זמינות עכשיו בכל מנועי הדפדפנים העיקריים, כך שהן נכללות ב-Baseline Newly available.

WasmFS ותכונת mimalloc ב-Emscripten יכולות לעזור מאוד עם הקצאה וביצועי קלט/פלט. במדריך הזה נסביר איך התכונות האלה יכולות להוביל לשיפורים במהירות של פי 10 או יותר במקרים מסוימים.

אופטימיזציות של WebAssembly Garbage Collection ו-Wasm tail call זמינות עכשיו בכל מנועי הדפדפנים העיקריים, כך שהן נכללות ב-Baseline Newly available.

Promise.try זמין עכשיו בכל מנועי הדפדפנים העיקריים, כך שהוא נכלל ב-Baseline Newly available.

תיאור קצר

תאריך פרסום: 13 בינואר 2024 זהו החלק הראשון בסדרה בת שלושה חלקים בנושא מודלים שפועלים ברמת הטקסט (LLM) ו-chatbots. חלק 2 בנושא יצירת צ'אטבוט באמצעות WebLLM וחלק 3 בנושא שימוש ב-Prompt API כבר זמינים. מודלים גדולים של שפה (LLM) הופכים לרכיב חשוב

תאריך פרסום: 13 בינואר 2024 יש כל כך הרבה פרויקטים מדהימים שאפשר ליצור באמצעות AI, עם מודלים קלאסיים של למידת מכונה ומודלים חדשים יותר של שפה גדולה (LLM). בעזרת מודלים LLM, מחשבים יכולים ליצור תוכן חדש, לכתוב סיכומים, לנתח טקסט כדי לזהות את מצב הרוח

אמרו לך "לא לחסום את השרשור הראשי" וגם "לקטע את המשימות הארוכות". אבל מה המשמעות של כל הפעולות האלה?

עסקת תשלום באמצעות Web Payments מתחילה בגילוי של אפליקציית התשלום שלך. כדאי לקרוא איך להגדיר אמצעי תשלום ולהכין את אפליקציית התשלום לסוחרים וללקוחות לצורך ביצוע תשלומים.

ביצוע אנונימיזציה של CSS מאפשרת להשתמש בתמונה כשכבת מסכה. המשמעות היא שניתן להשתמש בתמונה, בפורמט SVG או בהדרגתיות כמסכה, כדי ליצור אפקטים מעניינים ללא עורך תמונות.

מערך נתונים של תכונות אינטרנט, לוח הבקרה של סטטוס פלטפורמת האינטרנט, ווידג'ט של סטטוס בסיס ועוד. נתונים היסטוריים של Baseline ב-2024.

בפוסט הזה נסביר על טעינת פריטים בזמן אמת (lazy loading) ועל האפשרויות הזמינות לטעינת פריטים בזמן אמת של סרטונים.

טעינה מראש של מודול מאפשרת לטעון מודולים של JavaScript מראש באופן מוצהר.

כדי לבצע אופטימיזציה של חוויית המשתמש, חשוב להבין איך המשתמשים מקיימים אינטראקציה עם הטפסים שלכם. לאימות אוטומטי בדפדפן יש תפקיד משמעותי בתהליך הזה. איך אוספים ומנתחים נתונים על האופן שבו משתמשים משתמשים במילוי אוטומטי בטפסים שלכם

זיהוי תוכן רעיל מגן על המשתמשים ויוצר סביבה בטוחה יותר באינטרנט. בחלק השני תלמדו איך ליצור כלי AI בצד הלקוח כדי לזהות רעילות ולצמצם אותה כבר במקור.

בפוסט הזה מתוארים המדד 'זמן חסימה כולל' (TBT) והסבר על אופן המדידה שלו.

אוסף של שיטות מומלצות שזיהינו ב-Chrome כגדולות ביותר לביצוע אופטימיזציה של ביצועי האתר ולשיפור מדדי הליבה לבדיקת חוויית המשתמש באתר

איך מודדים את מדדי Web Vitals של האתר בסביבה אמיתית ובסביבה מעבדתית

ערכים חיוניים לאתר תקין

מדריך מפורט המפרט איך לפצל את נתוני ה-LCP ולזהות תחומים עיקריים שצריך לשפר.

מאפיין ה-CSS content-visibility זמין עכשיו בגרסת Baseline.

המחקר והמתודולוגיה שעומדים בערכי הסף של דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals)

בדקת את נתוני השדות שלך ומסתבר שיש לך אינטראקציות איטיות. בשלב הבא תלמדו איך לבדוק את האינטראקציות האלה באופן ידני ולזהות את הסיבות לכך.

במאמר הזה נסביר את סיפור המקור של Baseline, את המעורבות של Google ואת הבעלות על קבוצת הקהילה WebDX.

למד כיצד לבצע אופטימיזציה של הדפים שלך לטעינה מיידית בעת שימוש בלחצני הדפדפן 'הקודם' ו'הבא'.

שיפרנו את ההטמעה של CSS בתוך CSS.

בפוסט הזה מוצג המדד 'השהיה לאחר קלט ראשוני' (FID) ומסביר איך למדוד אותו

איך לשייך את נתוני הביצועים בעזרת מידע על תוצאות ניפוי הבאגים, שיעזור לכם לזהות ולפתור בעיות של משתמשים אמיתיים בניתוח נתונים

איך משתמשים בכלים של Google כדי לבדוק את הקשר בין מדדי הליבה לבדיקת חוויית המשתמש באתר לבין ההכנסות מפרסום

איזו השפעה יש ל-@property על ביצועי ה-CSS?

פוסט זה דן במאפיין הטעינה ובאופן השימוש בו כדי לשלוט בטעינה של iframes.

יש אפשרויות רבות ושונות לאחסון נתונים בדפדפן. איזה מהם הכי מתאים לצרכים שלך?

מדריך אינטראקטיבי עם הוראות ליצירת שרת שמנהל מינויים להתראות ושולח בקשות לפרוטוקול דחיפה באינטרנט לשירות Push.

במאמר הזה מפורטות דרכים מומלצות ולא מומלצות ליצירת כמה אפליקציות PWA שעושות שימוש חוזר באותו דומיין, עם יתרונות וחסרונות.

מה הופך Progressive Web App לטובה או לטובה?

קריטריונים להתאמה של Progressive Web App.

מה צריך לעשות כדי לשנות סמלים, קיצורי דרך, צבעים ומטא-נתונים אחרים בקובץ המניפסט של אפליקציית האינטרנט עבור ה-PWA.

המניפסט של אפליקציית אינטרנט הוא קובץ JSON פשוט שמגדיר לדפדפן איך אפליקציית האינטרנט צריכה להתנהג.

במאמר הזה מוסבר איך לפרוס CSP על סמך גיבובים או חד-פעמיים חד-פעמיים (hash) בסקריפט כהגנה לעומק מפני סקריפטים חוצי-אתרים.

המאמר הזה עוזר למפתחי אתרים לבחור את ממשק ה-API המתאים לחומרה בהתאם למכשיר נתון.

כך משתמשים בבקשות מקור קשורות כדי לאפשר שימוש חוזר במפתחות גישה באתרים שלכם.

בפוסט הזה מוסבר על מאפיין הטעינה ואיך אפשר להשתמש בו כדי לשלוט בטעינת תמונות.

בחירת פורמט התמונה הנכון היא השלב הראשון בהצגת תמונות שעברו אופטימיזציה באתר. הפוסט הזה עוזר לכם לקבל את ההחלטה הנכונה.

מדדים מותאמים אישית מאפשרים לך למדוד ולבצע אופטימיזציה של היבטים ייחודיים לאתר שלך, ולבצע אופטימיזציה שלהם.

איך שולחים נתוני Web Vitals לנכסי Google Analytics 4 וייצאים את הנתונים לצורך ניתוח ב-BigQuery וב-Looker Studio

במדריך הזה מפורטות שיטות מומלצות לאתרים שצריך לפעול לפיהם כשמבקשים מהמשתמשים הרשאת גישה ליכולות רגישות (כמו מצלמה, מיקרופון ומיקום) כדי לצמצם בקשות לא נחוצות ולחסום את הגישה.

איך התראות לגבי קובצי cookie משפיעות על הביצועים, על מדידת הביצועים ועל חוויית המשתמש.

מפתחי אתרים יכולים להתאים אישית התראות בנושא מדיה ולהגיב לאירועים הקשורים למדיה, כמו חיפוש או מעקב אחר שינויים, באמצעות ה-Media Session API.

לפני שתוכלו לשחזר אינטראקציות איטיות בשיעור ה-Lab כדי לבצע אופטימיזציה של האינטראקציה עם האתר שלכם עד הצגת התגובה, תצטרכו להסתמך על נתוני השטח כדי למצוא אותן. במדריך הזה תוכלו ללמוד איך לעשות את זה.

אפשר להשתמש במאפיין tabindex כדי להגדיר במפורש את מיקום הכרטיסייה של הרכיב.

בפוסט הזה מוצג המדד Time to First Byte (TTFB) שמסביר איך למדוד אותו.

בהדרכה הזו תלמדו איך להתאים את ההנחיות כדי להשיג את התוצאות המועדפות עליכם במודלים גדולים של שפה (LLM), במודלים שונים ובגדלים שונים של מודלים.

בפוסט הזה מוצג המדד 'מאינטראקציה ועד הצגת התגובה' (INP) ומוסבר איך הוא עובד, איך למדוד אותו והצעות לשיפור.

description: הגדרת צבעים שמגיבים לערכת הצבעים שבה נעשה שימוש באמצעות הפונקציה light-dark() .

במדריך הזה, שמיועד למפתחי אתרים שרוצים ליהנות מהיתרונות של WebAssembly, נלמד איך להשתמש ב-Wasm כדי לבצע מיקור חוץ למשימות שדורשות מעבד (CPU) בעזרת דוגמה פועלת.

ב-CSS Grid, המאפיינים 'grid-template-columns' ו-'grid-template-rows' מאפשרים להגדיר שמות של שורות ולעקוב אחר מידות של עמודות ושורות ברשת, בהתאמה. תמיכה באינטרפולציה עבור המאפיינים האלה מאפשרת לפריסות רשת לעבור בצורה חלקה בין מצבים, במקום להצמיד באמצע האנימציה או המעבר.

איך שולטים במשחקי אינטרנט באמצעות Gamepad API.

המאפיין inert הוא מאפיין HTML גלובלי שמפשט את ההסרה והשחזור של אירועי קלט של משתמשים ברכיב מסוים, כולל אירועי מיקוד ואירועים מטכנולוגיות מסייעות.

גורמים מהימנים יכולים לקבוע מה מקור מפתח הגישה על ידי בדיקת AAGUID. אתם יכולים לקרוא איך פועל המנגנון הזה.

בעזרת הדוגמה של שפת צעצועים סינתטית שנקראת ExampleScript, תוכל ללמוד כיצד לכתוב ולבצע אופטימיזציה של מודולים של WebAssembly ב-JavaScript באמצעות ה-API של Binaryen.js.

צילום אודיו/וידאו הוא ה "גביע הקדוש" של פיתוח האינטרנט כבר זמן רב. במשך שנים רבות נאלצנו להסתמך על יישומי פלאגין לדפדפן ( Flash או Silverlight ) כדי לבצע את המשימה. בוא! HTML5 מציל את המצב. יכול להיות שזה לא ברור, אבל העלייה בשימוש ב-HTML5 הביאה

רכיב האינטרנט <model-viewer> מאפשר לך להשתמש במודלים תלת-ממדיים בדף אינטרנט באופן הצהרתי.

איך משתמשים ב-'userAuthentication' ב-WebAuthn

סיבות אפשריות לכך שבנתוני RUM מוצגים מספרים שונים של דוח המדדים הבסיסיים של חוויית המשתמש מ-CrUX.

חשוב לבנות אתרים שמתאימים לכולם ונגישים לכולם. יש לפחות שישה תחומים עיקריים של מוגבלות שאנחנו יכולים לבצע אופטימיזציה עבורם: ראייה, שמיעה, ניידות, זיהוי, דיבור ונוירונים

סקריפטים של צד שלישי מספקים מגוון רחב של תכונות שימושיות, שהופכים את האינטרנט לדינמי יותר. למדו איך לבצע אופטימיזציה של הטעינה של סקריפטים של צד שלישי כדי לצמצם את השפעתם על הביצועים.

כך מונעים יצירה של מפתח גישה חדש, אם יש לו מפתח גישה כזה במנהל הסיסמאות של המשתמש.

מדריך ליסודות של IndexedDB.

שירות CSS מהימן, חזק ויציב עבור רצועת כלים שאפשר להשתמש בו היום.

במאמר הזה אנחנו מסבירים איך לבצע אופטימיזציה למדד Time to First Byte.

מה ההבדל בין מארח, אתר ומקור? מה זה eTLD+1? במאמר הזה נסביר על הנושא.

נסביר מהם פרטי כניסה שגלויים לכולם ואיך ליצור חוויות משתמש שמתאימות לתרחיש לדוגמה שלכם.

המשתמשים בודקים אם אתרים ואפליקציות לא פועלים כמו שצריך, לכן חשוב מאוד לבצע אופטימיזציה של ביצועי העיבוד!

כשגודל מלבן התוכן של רכיב מסוים משתנה, כך שתוכלו להגיב בהתאם, באמצעות 'sizeObserver'.

לצד ביטול הורדות משאבים מיותרות, הדבר הטוב ביותר שאפשר לעשות כדי לשפר את מהירות הטעינה של דף הוא להקטין את גודל ההורדה הכולל. לשם כך, יש לבצע אופטימיזציה של המשאבים הנותרים ולדחוס אותם.

במסמך הזה מוסבר איך להשתמש ב-OffscreenCanvas API כדי לשפר את הביצועים במהלך רינדור גרפיקה באפליקציית האינטרנט.

בפוסט הזה מוצג המדד 'הצגת תוכן ראשוני (FCP)' ומוסבר איך למדוד אותו

המאמר הזה כולל סקירה כללית מקיפה על רשתות להעברת תוכן (CDN). בנוסף, המאמר מסביר כיצד לבחור הגדרת CDN, להגדיר אותה ולבצע אופטימיזציה שלה.

הדרכה מעשית למפתחים בנוגע למה שצריך לעשות כשמשתמש מתנתק מהאתר.

בפוסט הזה מוצג המדד Time to Interactive (TTI) ומסביר איך למדוד אותו

ממשק ה-API של העדיפות לשליפה מציין את העדיפות היחסית של המשאבים לדפדפן. היא יכולה לאפשר טעינה אופטימלית ולשפר את דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals).

מידע על קבוצות פסאודו מחלקה מסוג :user-תקין ו-:user-לא חוקי, ואיך להשתמש בהן כדי לשפר את חוויית המשתמש בתהליך אימות הקלט.

איך מקבלי החלטות עסקיות ומשתמשים שאינם מפתחים יכולים לשפר את דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals).

חשוב להבין את הבעיות הנפוצות כשמחילים קידוד ופענוח של base64 במחרוזות, ונמנעים מהן.

תת-רשת מאפשרת שיתוף ברשת, ומאפשרת לרשתות מקננות להתאים לאבות ולאחיות.

בעולם הדיגיטלי של היום, פרסום אונליין הוא חלק חיוני מהאינטרנט החינמי שכולנו נהנים ממנו. עם זאת, מודעות שמופעלות בצורה לא נכונה עלולות להוביל לחוויית גלישה איטית יותר, לגרום למשתמשים תסכול ולפגוע ברמת ההתעניינות שלהם. איך אפשר לטעון מודעות בצורה יעילה בלי להשפיע על מהירות הדף, להבטיח חוויית משתמש חלקה ולהגדיל את ההזדמנויות להגדלת ההכנסות של בעלי האתרים?

לומדים מהו כיסוי קוד ומגלים ארבע דרכים נפוצות למדוד אותו.

מחליטים מה צריך לבדוק ומה אפשר לשלול.

מחליטים מה לבדוק, מגדירים את מקרי הבדיקה וקובעים סדר עדיפויות.

מדדי ביצועים שמתמקדים במשתמשים הם כלי קריטי להבנה ולשיפור של חוויית השימוש באתר באופן שמועיל למשתמשים אמיתיים.

תלמדו על אפשרויות חדשות ומעניינות לטעינה מראש של תמונות רספונסיביות כדי להבטיח חוויית משתמש מעולה.

שיטה להתאמת גופן להעדפות המשתמשים כדי שהם ירגישו בנוח לקרוא את התוכן.

מגלים איך לשלב סוגי בדיקות שונים כדי לפתח אסטרטגיה הגיונית שתואמת לפרויקט שלכם.

נתחיל מהיסודות! סקירת שני מצבי הבדיקה הכלליים ושלושה סוגים נפוצים של אוטומציה של בדיקות.

כדאי לבדוק את המשאבים מדי פעם כדי לוודא שכל משאב עוזר לספק חוויית משתמש טובה יותר.

התוכנית mkbitmap C קוראת תמונה ומחילה עליה אחת או יותר מהפעולות הבאות, בסדר הבא: היפוך, סינון גבוה, התאמת קנה מידה וערכי סף. אפשר לשלוט בכל פעולה ולהפעיל או להשבית כל פעולה בנפרד. במאמר הזה נסביר איך ליצור mkbitmap ל-WebAssembly.

מבוא ל-WebAssembly (שנקרא לפעמים Wasm), פורמט הקוד הבינארי הנייד ופורמט הטקסט המתאים לתוכנות הפעלה, וממשקי תוכנה המאפשרים אינטראקציות בין תוכנות כאלה וסביבת המארח שלהן.

תקן מערכת הקבצים מציג מערכת קבצים פרטית של מקור (OPFS) בתור נקודת קצה לאחסון ששייכת באופן פרטי למקור הדף ולא גלויה למשתמש, ומספקת גישה אופציונלית לקובץ מסוג מיוחד שעבר אופטימיזציה רבה לביצועים. דפדפנים מודרניים תומכים במערכת הקבצים הפרטית של המקור,

כיצד להציג באופן מאובטח תוכן בשליטת המשתמש באפליקציות אינטרנט

סקירה כללית על האופן שבו משתמשים ב-AVIF בסביבה העסקית, והסבר על יתרונות הביצועים והאיכות שמפתחים יכולים לקבל מ-AVIF עבור תמונות סטילס ואנימציות.

כדאי ללמוד איך לבצע אופטימיזציה של האינטראקציה באתר עם הצגת התגובה הבאה.

הסבר על חלק מהתכונות שכלולות ב-Baseline.

כשטוענים סקריפטים, לוקח לדפדפן זמן לבדוק אותם לפני הביצוע, וזה עלול לגרום למשימות ארוכות. לומדים איך עובדת הערכת הסקריפטים ומה אפשר לעשות כדי למנוע ממנה לגרום למשימות ארוכות במהלך טעינת הדף.

העיכוב לאחר קלט יכול להשפיע משמעותית על זמן האחזור הכולל של האינטראקציות ולהשפיע לרעה על ה-INP של הדף שלך. במדריך הזה נסביר מהו השהיה לאחר קלט, ואיך אפשר לצמצם אותה כדי לאפשר אינטראקטיביות מהירה יותר.

עיבוד HTML באמצעות JavaScript שונה מעיבוד HTML שנשלח על ידי השרת — והוא עשוי להשפיע על הביצועים. כדאי ללמוד על ההבדלים במדריך הזה ומה אפשר לעשות כדי לשמר את ביצועי הרינדור של האתר – במיוחד במקרים שבהם יש חששות לאינטראקציות.

גודלי DOM גדולים יכולים להשפיע על מהירות האינטראקציה או לא. כדאי לעיין במידע נוסף על הקשר בין גודל DOM לבין INP, ומה אפשר לעשות כדי לצמצם את גודל ה-DOM ודרכים אחרות להגביל את עבודת הרינדור כשיש בדף הרבה רכיבי DOM.

גרסת WordPress המלאה שמופעלת על ידי PHP ופועלת אך ורק בדפדפן עם WebAssembly

בפוסט הזה מוצג המדד Cumulative Layout Shift (CLS) ומוסבר איך למדוד אותו.

תצוגה של כלים שזמינים עכשיו באינטרנט הודות ל-WebAssembly.

אפשר לשלוח אפליקציות מסוג Progressive Web App בחנויות אפליקציות כמו Android Play Store, Microsoft Store ועוד.

שיפור חוויית ניפוי הבאגים באינטרנט עם מפות מקור.

שירות CSS מהימן, חזק ויציב עבור רצועת כלים שאפשר להשתמש בו היום.

חישוב הסינוס, הקוסינוס, הטנגנס ועוד ב-CSS.

השיטה requestVideoFrameCallback() מאפשרת למחברי אינטרנט לרשום קריאה חוזרת (callback) שפועלת בשלבי העיבוד כאשר פריים חדש של וידאו נשלח אל המחבר.

אחד מתוך סדרת ראיונות עם חברים בתוכנית המומחים של Google Developers (GDE).

נלמד איך ליצור את אפקט הטקסט המנופח עם שינוי הדרגתי באמצעות מאפיינים מותאמים אישית ברמת ההיקף ו-background-clip. עוברים אל CodePen ויוצרים עט חדש. יוצרים את הרכיבים של ה-Markup לטקסט. נשתמש בכותרת עם המילה 'מהיר': לאחר מכן, נוסיף ל- body

פוסט בבלוג הזה מכריז על אוסף חדש של תבניות לאפליקציות מדיה.

איך הספר הנגלל קיבל חיים כדי לשתף טיפים וטריקים מהנים ומפחידים עם ה-Chrometober הזה.

סקירה בסיסית של בניית רכיב עם הסבר קצר ונגיש, שמותאם לצבעים.

מפתחות גישה מאפשרים להשתמש בחשבונות המשתמשים באתר בצורה בטוחה, פשוטה וקלה יותר, בלי סיסמה. במסמך הזה נסביר איך לאפשר למשתמשים ליצור מפתחות גישה לאתר שלכם.

מפתחות גישה הופכים את חשבונות המשתמשים באתר לבטוחים, פשוטים יותר, לשימוש קל יותר וללא סיסמה. במאמר הזה מוסבר איך לעצב כניסה ללא סיסמה באמצעות מפתחות גישה, תוך התאמה למשתמשים קיימים עם סיסמאות.

סקירה בסיסית של בניית רכיבי FAB שמותאמים לצבעים, רספונסיביים ונגישים.

איך מבצעים אופטימיזציה של גופני אינטרנט לשימוש בדוח ה-Web Vitals הבסיסיים.

אחד מתוך סדרת ראיונות עם חברים בתוכנית המומחים של Google Developers (GDE).

סקירה כללית של שלושה כלים ושיטות לבדיקה ולאימות של ניגודיות צבעים נגישה בעיצוב.

נלמד איך ליצור מעמיס CSS מונפש עם מאפיינים מותאמים אישית ברמת ההיקף ועם animation-timing-function. עוברים אל CodePen ויוצרים עט חדש. יוצרים את ה-Markup של ה-Loader שלנו. שימו לב לשימוש במאפיינים מותאמים אישית בתוך שורה: אפשר גם להשתמש במחולל ( Pug )

במדריך הזה נסביר איך ליצור ניווט ראשי נגיש לאתר. אתם לומדים על HTML סמנטי, נגישות, ואיך השימוש במאפייני ARIA יכול לפעמים לגרום יותר נזק מתועלת.

פסאודו-בורר השימושי הזה של ה-CSS מאפשר לכם לבחור רכיבים מותאמים.

לבצע אופטימיזציה של תגים ומנהלי תגים לבדיקת Core Web Vitals.

חקר מהנה של דרכים ליצירת אשליה אופטית באמצעות CSS.

סקירה של כמה דרכים שימושיות ויצירתיות לסגנן רשימה.

יתרונות השימוש בנכסים מותאמים אישית במערכות עיצוב ובספריות רכיבים.

תלמדו איך להשתמש במאפיינים נפרדים של תרגום, סיבוב וקנה מידה של CSS כדי לגשת להמרות באופן אינטואיטיבי.

בדיקה של מספר דרכים ליצירת אנימציה של גבול ב-CSS

ה-BBC משיק את HSTS עבור האתר שלו כדי לשפר את האבטחה והביצועים. אפשר לגלות מה זה אומר ואיך אפשר להיעזר ב-HSTS.

במאמר הזה מוסבר למה כלים למעקב אחרי מדדים של דוח המדדים הבסיסיים של חוויית המשתמש עשויים לדווח על מספרים שונים, ואיך לפרש את ההבדלים האלה.

GDE אנריקה פרננדז גרה בנושא מיקור פתוח כ-NGO HelpDev.

מהי המשמעות של סיום התמיכה ב-Internet Explorer עבור הלקוחות והמפתחים ב-Maersk.com.

במשך זמן רב, נהניתי להכיר אותך.

במאמר הזה אנחנו מסבירים איך להגדיר קובצי cookie מהדומיין הנוכחי כדי להבטיח אבטחה ותאימות לדפדפנים שונים, ולהקטין את הסיכויים לשיבושים לאחר ההשבתה של קובצי cookie של צד שלישי.

ממשק ה-API של Web Audio מאפשר להשיג סנכרון AV באופן תקין.

אפשר להשתמש בצבעים מדורגים בעלי צורה חרוטית כדי ליצור אפקטים מעניינים, כמו הדוגמה הזו של גבול יפה. CodePen הזה, שנוצר על ידי Adam Argyle, ששותף במקור דרך הציוץ הזה ב-Twitter, מראה איך להשתמש ב שיפוע conic כדי ליצור גבול. Terry Mun השתמש ביצירתיות כדי

הסבר על ההחלטות שקשורות לשימוש בספרייה או ב-framework של JavaScript.

להבין את ההבדלים בין frameworks לבין ספריות בהקשר של סביבת JavaScript בצד הלקוח.

זיהוי שגיאות במהלך עבודה עם Fetch API.

עדכון לגבי Google Fonts CSS API – איך הוא עובד, איך להשתמש בו ואיך הוא יכול לספק ביעילות את גופני האינטרנט.

המשאב הזה יכול לעזור לך להתמצא במהירות במסוף.

ה-GOV.UK השמט את התלות ב-jQuery בממשק הקצה. לעולם לא תנחש מה קרה. (כן).

סקירה בסיסית של בניית רכיבים רספונסיביים, נגישים ומתאימים לצבע.

גלו מהו סורק הטעינה מראש של הדפדפן, איך הוא עוזר לביצועים ואיך לא לחרוג ממנו.

מעכשיו קל יותר לבנות אתרים באינטרנט.

איך למדוד את דוח ה-Web Vitals באמצעות הכלי הנוכחי לניתוח נתונים

מומחים של Google Developers באינטרנט שמפרטים איך תוכניות חונכות אפשרו להם להפוך למנהיגים.

שיתוף מדריך שימושי לגופנים משתנים, עם המון דוגמאות.

הכלי הזה מאת ג'וש וו קומאו, שמקל מאוד על יצירת הדרגות נחמדות שנראות טוב.

אוסף תובנות לגבי הבעיות העיקריות, שנאספו ממספר שיחות עם מפתחי אתרים.

כאן אפשר לראות את המצב של כלי התמונות.

מידע על היקף ועל אופן הפעולה שלו ב-JavaScript.

סקירה כללית בסיסית על יצירת חלונות מודולריים (modal) בגודל מיני ומגה עם התאמה לצבע, תגובה דינמית ונגישות באמצעות הרכיב ‎.

איך מנפים באגים בשגיאות בהפעלת מדיה באינטרנט

אחד מתוך סדרת ראיונות עם חברים בתוכנית המומחים של Google Developers (GDE).

טעינה מיידית של תמונות בתוך אזור התצוגה הראשוני, תוך טעינה מדורגת של שאר התמונות, יכולה לשפר את מדדי Web Vitals תוך טעינה של פחות בייטים.

סקירה בסיסית של בניית סרגל טעינה נגיש ומותאם לצבע באמצעות הרכיב ''.

כדאי שהטפסים של ההרשמה והכניסה יהיו פשוטים ככל האפשר. שומרים את פרטי הכניסה מהטפסים של הכניסה, כדי שהמשתמשים לא יצטרכו להיכנס שוב כשהם יחזרו. כדי לשמור את פרטי הכניסה של המשתמשים מהטפסים: לפני שממשיכים, צריך לבדוק אם הטופס כולל מאפייני

שינויים במחרוזת של סוכן משתמש, האסטרטגיות ש-Chrome ו-Firefox נוקטים כדי למזער את ההשפעה, ואיך אתם יכולים לעזור.

סקירה בסיסית שמסבירה איך לבנות סמל אתר מותאם.

כאן אפשר ללמוד איך לעבד גרפיקה דו-ממדית בלוח הציור באינטרנט מ-WebAssembly עם Emscripten.

אם תשכחו את הכותרת 'cache-Control' או שימוש לרעה בה, אתם עלולים לפגוע באבטחת האתר ובפרטיות המשתמשים. קבלת המלצות לאתרים שמניבים ערך גבוה.

ערכים חיוניים לאתר תקין

כאן מוסבר איך בוצעה העברה של gPhoto2 אל WebAssembly כדי לשלוט במצלמות חיצוניות ב-USB מאפליקציית אינטרנט.

שימוש ב-Network Error Logging (NEL) כדי לאסוף שגיאות רשת בצד הלקוח.

איך משתמשים בתכונות החדשות ביותר של WebAssembly תוך תמיכה במשתמשים בכל הדפדפנים.

איך משתמשים בממשקי WebAssembly וב-Fugu API כדי להעביר לאינטרנט קוד שמקיים אינטראקציה עם מכשירים חיצוניים.

סקירה בסיסית של בניית רכיב החלפת עיצוב גמיש ונגיש.

איך מטמיעים קוד JavaScript בספריית WebAssembly כדי לתקשר עם אנשים מבחוץ.

Oculus Quest 2 היא משקפי מציאות מדומה (VR) שנוצרו על ידי Oculus, מחלקה של Meta. המפתחים יכולים עכשיו ליצור ולהפיץ אפליקציות מסוג Progressive Web App (PWA) בדו-ממד ובתלת-ממד ומנצלים את היתרונות של תכונת ריבוי המשימות של Oculus Quest 2&#39. במאמר הזה נסביר את החוויה ואיך ליצור, להתקין ממקור לא ידוע את ה-PWA ולבדוק אותו ב-Oculus Quest 2.

הצצה לתהליך ולכלים ששימשו ליצירת החוויה בסגנון לוח השנה של Designcember.

ניסיון סקאומורפי ליצור מחדש מחשבון סולארי באינטרנט שמשתמש בחיישן תאורת הסביבה ובתכונת שכבת-העל לשליטה בחלון.

במשך תקופה ארוכה יותר, היה צורך להיעזר בפתרונות ובספריות כדי ליצור עותק עמוק של ערך JavaScript. הפלטפורמה כוללת עכשיו את 'structuredClone()', פונקציה מובנית להעתקה עמוקה.

סקירה בסיסית של בניית רכיב מודעה גמיש ונגיש.

אנו מכריזים על המימון של ממשק המשתמש של Chrome, שנועד לספק מענקים לאנשים שעובדים על כלי עיצוב, CSS ו-HTML.

סקירה בסיסית על בניית תפריט משחק תלת-ממדי רספונסיבי ונגיש.

סיכום של כל ההודעות העיקריות מכנס המפתחים של Chrome לשנת 2021, עם קישורים למידע נוסף.

כדאי לעיין במידע העדכני ביותר ב-PageSpeed Insights כדי לבצע אופטימיזציה ולשפר את האיכות של הדף והאתר.

במדריך זה תלמדו איך למדוד אנימציות, איך לחשוב על פריימים של אנימציה ואיך לחלק את הדפים באופן כללי.

כדאי לנסות את Lighthouse API חדש כדי למדוד ביצועים ושיטות מומלצות לכל אורך התהליך של המשתמש.

בשלוש השנים האחרונות, Chrome פעל להעצמה של אפליקציות אינטרנט שרוצות לפרוץ את הגבולות של מה שאפשר לעשות בדפדפן. אפליקציית אינטרנט כזו היא Photoshop. רק לפני כמה שנים היה קשה לדמיין את הרעיון של הפעלת תוכנה מורכבת כמו תוכנת Photoshop ישירות בדפדפן. עם זאת, באמצעות מגוון טכנולוגיות אינטרנט חדשות, Adobe התחילה עכשיו להביא לאינטרנט גרסת בטא ציבורית של Photoshop.

סקירה בסיסית של בניית רכיב רספונסיבי, נגיש ונגיש, עם בחירה מרובה למיון ולסינון של חוויות משתמשים.

במדריך זה תלמדו את היסודות של השימוש בממשקי ה-API של הניווט ותזמון המשאבים כדי להעריך את ביצועי הטעינה בשדה.

המטרה של Sanitizer API החדש היא ליצור מעבד חזק למחרוזות שרירותיות להוספה בטוחה של מחרוזות בדף. מאמר זה מציג את ה-API ומסביר את השימוש בו.

במסמך הזה מפורטות שיטות מומלצות לביצועים שאפשר להשתמש בהן לטעינת הטמעות של צד שלישי, טכניקות טעינה יעילות והכלי Layout Shift Terminator שעוזר לצמצם את השינויים בפריסה של הטמעות פופולריות.

תשובות לשאלות נפוצות בנושא שירותי SPA, דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) ועל התוכנית של Google לטפל במגבלות הנוכחיות של המדידה.

preventDefault ו- stopPropagation: מתי משתמשים בכל אחת מהן ומה בדיוק כל אחת מהן עושה. לרוב, טיפול באירועים ב-JavaScript הוא פשוט. זה נכון במיוחד כשמדובר במבנה HTML פשוט (יחסית שטוח). עם זאת, כשאירועים עוברים (או מתפשטים) דרך היררכיה של רכיבים, הדברים

במאמר הזה אנחנו מסבירים איך לייבא ולקבץ סוגים שונים של נכסים מ-JavaScript באופן שיתאים גם לדפדפנים וגם לרכיבי Bundle.

סקירה בסיסית של בניית רכיב נגיש של לחצן מפוצל.

ללמוד איך להשתמש בסקריפטים של מודולים של CSS כדי לייבא גיליונות סגנונות של CSS באמצעות אותו תחביר של המודולים של JavaScript.

מוסיפים את צבע המותג לערכי קלט מובנים של HTML באמצעות שורה אחת של קוד.

סקירה בסיסית של בניית רכיב מתג רספונסיבי ונגיש.

קבוצה של כותרות של רמזים ללקוח מאפשרת לאתרים לקבל את העדפות המדיה של המשתמש, אם רוצים, בזמן הבקשה, וכך מאפשרת לשרתים להטמיע את ה-CSS הנכון בקוד, מטעמי ביצועים. לשאילתות מדיה של CSS, ובמיוחד ל תכונות מדיה לפי העדפות המשתמש כמו prefers-color-scheme או

סקירה בסיסית של בניית רכיב רספונסיבי ונגיש של מיקומים באתר, שיאפשר למשתמשים לנווט באתר.

איך מעבירים ל-WebAssembly אפליקציות עם מספר שרשורים שנכתבו בשפות אחרות.

סטרימינג של מדיה הוא שיטה להעברה רציפה של תוכן מולטימדיה משרת שבו התוכן חולק למקטעי נתונים נפרדים שניתן לחבר ביניהם במהלך ההפעלה בסדר מסוים באמצעות בקשת טווח באמצעות פרוטוקולים כמו DASH ו-HLS.

במדריך זה תלמדו על מושגים בנושא ניהול זכויות דיגיטלי ועל הפקודות הנדרשות כדי לעבור מקובץ העברת נתונים גולמי אל מדיה מוצפנת שארוזה בחבילה עבור MPEG-DASH או HLS באמצעות הצפנת Clear Key או Widevine.

מסגרות מדיה זמינות גם במגוון קנייני וגם בקוד פתוח, ובבסיסן קבוצה של ממשקי API שתומכים בהפעלת אודיו ו/או וידאו עבור פורמטים שונים של קונטיינרים ופרוטוקולי שידור.

לא פשוט לבנות PWA בסטרימינג אופליין. במאמר הזה נפרט על ממשקי ה-API והטכניקות שמאפשרים למשתמשים ליהנות מחוויה איכותית של מדיה אופליין.

סקירה בסיסית של קביעת ערכת צבעים דינמית שניתנת להגדרה

עכשיו אפשר לשנות את קנה המידה של גופן האינטרנט כדי לנרמל את הגדלים של הגופנים במסמך ולמנוע שינוי בפריסה כשעוברים בין גופנים.

הצגת תמונות בגודל של מחשב במכשירים ניידים יכולה לצרוך פי 2 עד פי 4 יותר נתונים מהנדרש. במקום להשתמש בתמונה בגודל אחד שמתאים לכולם", מומלץ להציג תמונות בגדלים שונים במכשירים שונים.

במאמר הזה מפורטות שיטות שקשורות ל-CSS כדי לבצע אופטימיזציה של דוח ה-Web Vitals.

החל מהיום, שינוי ל-CLS הושק בכמה פלטפורמות של Chrome&#39 באינטרנט, כולל Lighthouse, PageSpeed Insights ודוח חוויית המשתמש של Chrome.

לתוספות הקטנות האלה לכאורה לתחביר של סלקטור ה-CSS תהיה השפעה גדולה.

עכשיו יש הכשרה חדשה של Progressive Web App בת שישה חלקים, שכוללת סדרה חדשה של מעבדות Codelab שילמדו אותך איך ליצור אפליקציות PWA אמינות, ניתנות להתקנה ויכולות.

אסטרטגיות להעברת האתר כך שלא יסתמך על מחרוזת הסוכן-משתמש לרמזים החדשים לגבי הלקוח של סוכן המשתמש.

תכונות מדיה שמבוססות על העדפות משתמשים, שאילתות לגבי קונטיינרים ושאילתות מדיה לסוגי מסך חדשים, כמו מסכים מתקפלים, יאפשרו לנו להשתמש ב-API בעידן חדש של עיצוב אתרים רספונסיבי.

במאמר הזה מפורטות כותרות האבטחה החשובות ביותר שבהן אפשר להשתמש כדי להגן על האתר. תוכלו להיעזר במידע הזה כדי להבין תכונות אבטחה מבוססות-אינטרנט, ללמוד איך להטמיע אותן באתר ולהשתמש בו כדוגמה, למקרה שתזדקקו לתזכורת.

סיכום של ההרצאה בנושא Google I/O 2021 של תומאס סטיינר, עם הכותרת Excalidraw ו-Fugu: שיפור התהליכים הבסיסיים של המשתמשים

קובצי שירות (service worker) יכולים להשתמש בייבוא סטטי של מודולים של ES כדי להוסיף קוד, כחלופה ל-ImportScripts().

סקירה כללית בסיסית על יצירת תצוגת גלילה אופקית רספונסיבית לטלוויזיות, לטלפונים, למחשבים וכו'.

היום נעסוק בתכונות כלים חדשות ב-Lighthouse, ב-PageSpeed וב-DevTools, שיעזרו לזהות איך האתר שלכם יכול להשתפר ב-Web Vitals.

איך מפעילים ממשקי API לאינטרנט אסינכרוני כשמפעילים קומפילציה של שפות סינכרוניות מסורתיות ל-WebAssembly

בעזרת התכונה 'שכבת-על של פקדי חלון', מפתחים יכולים להתאים אישית את סרגל הכותרת של אפליקציות ה-PWA המותקנות כדי שאפליקציות ה-PWA שלהם יהיו דומות יותר לאפליקציות.

סקריפטים של צד שלישי, או "תגים" יכולים להיות מקור לבעיות בביצועים של האתר שלך, ולכן מהווים יעד לאופטימיזציה. עם זאת, לפני שמתחילים לבצע אופטימיזציה לתגים שהוספתם, כדאי לוודא שאתם לא מבצעים אופטימיזציה לתגים שאתם לא צריכים. במאמר הזה נסביר איך להעריך את הבקשות לתגים חדשים, ואיך לנהל ולבדוק תגים קיימים.

האובייקט DataTransfer מכיל נתונים שנגררים במהלך פעולת גרירה ושחרור. הוא עשוי להכיל פריט נתונים אחד או יותר, כל אחד מסוג אחד או יותר. במאמר זה נסביר מה אפשר לעשות עם DataTransfer API.

WebOTP API יכול עכשיו לקבל OTP מתוך iframe.

סקירה בסיסית על בניית אנימציות של מילים מפוצלות ואותיות מפוצלות.

תוכניות לשיפור מדד CLS כך שיהיה הוגנים יותר לגבי דפים עם משך חיים ארוך.

Web Developer Satisfaction הוא פרויקט של Google שמטרתו לאסוף מידע על הצרכים של מפתחי אתרים. המטרה היא פלטפורמת אינטרנט אמינה, צפויה וניתנת להפעלה הדדית יותר, שמאפשרת למפתחים להשקיע בה ולסמוך עליה, לאמץ תכונות חדשות ולהשתמש בהן כדי לפתח את הפלטפורמה ואת העסק שלהם.

סקירה כללית בסיסית על יצירת רכיב הגדרות של פסולים וקופסאות סימון.

הבנת הערך של 'זה' יכול להיות מסובך ב-JavaScript, כך עושים את זה...

הפרק הזה מספק רקע על אפליקציות H5 ו-QuickApp, ששתיהן שונות מאפליקציות קטנות.

בפרק הזה מוצג פרויקט לדוגמה שפועל לפי הגישה "לתכנות את גרסת המיני של האפליקציה".

בפרק הזה אנחנו מפרטים את מבנה הפרויקט, מחזור החיים והאוסף של מיני אפליקציות.

בפרק הזה מוצג מבחר פרויקטים מעניינים של קוד פתוח למיני אפליקציות.

בפרק הזה מסתיימת האוסף של מיני אפליקציות בטענה שחשיבה מחוץ לקופסה וקבלת משוב והשראה מחוץ לבועה שלהם יכולה לעזור מאוד בבניית עתיד טוב יותר באינטרנט.

בפרק הזה נפרט את האפשרויות של תגי העיצוב, הסגנון, הסקריפטים והעדכון בפלטפורמות שונות של מיני אפליקציות.

בפרק הזה מופיעים פרטים על הרכיבים שזמינים בכל הפלטפורמות של המיני אפליקציות.

בפרק הזה מוסבר על אופן התכנות של המיני אפליקציות.

ה-streams API מאפשר ל-JavaScript לגשת באופן פרוגרמטי למקורות נתונים שהתקבלו ברשת ולעבד אותם לפי הצורך.

סקירה בסיסית של תהליך היצירה של רכיב כרטיסיות שדומה לזה שבאפליקציות ל-iOS ול-Android.

בידוד בין מקורות מאפשר לדף אינטרנט להשתמש בתכונות מתקדמות, כמו SharedArrayBuffer. במאמר הזה נסביר איך מפעילים באתר בידוד ממקורות שונים.

הכותרת של אשכול הסוכנים לפי מקור מנתקת את הגישה הסינכרונית למקורות אחרים באותו דומיין, ויוצרת רמזים לדפדפן כדי לספק משאבים ייעודיים למקור.

עכשיו קל יותר לשמור על יחס גובה-רוחב בתוך התמונות והרכיבים בעזרת מאפיין ה-CSS החדש עם יחס גובה-רוחב.

סקירה קצרה על ההיסטוריה, הארכיטקטורה, תרחישי השימוש והעתיד של WebRTC.

איך לבצע אופטימיזציה של קרוסלות כדי לשפר את הביצועים ואת נוחות השימוש.

ברוב המקרים אפשר להשתמש בכתובת http://localhost בפיתוח מקומי, מלבד במקרים מיוחדים מסוימים. במאמר הזה נסביר מתי צריך להפעיל את אתר הפיתוח המקומי באמצעות HTTPS. אפשר גם לעיין במאמר איך משתמשים ב-HTTPS לפיתוח מקומי. בפוסט הזה, ההצהרות לגבי localhost

כאן אפשר לקרוא על התוכניות שלנו לשיפור המדד Cumulative Layout Shift (CLS) ולתת לנו משוב.

ברוב המקרים, http://localhost מתנהג כמו HTTPS למטרות פיתוח. עם זאת, יש כמה מקרים מיוחדים, כמו שמות מארחים מותאמים אישית או שימוש בקובצי cookie מאובטחים בדפדפנים שונים, שבהם צריך להגדיר באופן מפורש את אתר הפיתוח כך שיפעל כמו HTTPS כדי לייצג במדויק את

איך בונים רכיב רספונסיבי לפריסת ניווט צדדית כלפי חוץ.

סקירה בסיסית של בניית סרגל הזזה צדדי החוצה

תלמדו 5 טכניקות שונות של מרכוז באמצעות CSS.

בצעו 5 טכניקות מרכוז במהלך סדרה של בדיקות, כדי לראות איזו מהן הכי עמידה בפני שינויים.

הביצועים של הטעינה הראשונה הם חשובים, אבל הם לא הכול. משתמשים שטוענים את האתר פעם נוספת ישתמשו במטמון שלהם כדי לקבל גישה לתוכן. כך, חשוב לוודא שהאתר פועל גם כראוי, גם לצורך מהירות ונכונות.

תלמדו איך להטמיע את ממשק Houdini Paint API לדפדפנים שונים ולחקור עולם של worklet של Houdini עם Houdini.how.

כדי להגדיל את מספר ההמרות, כדאי לעזור למשתמשים למלא טפסים של כתובת ותשלום מהר ובקלות ככל האפשר.

אחת הדרכים הנפוצות לאשר את מספר הטלפון של המשתמש היא לבקש מהמשתמש לספק OTP (סיסמה חד-פעמית) ב-SMS. הפוסט הזה כולל את השיטות המומלצות ליצירת טופס SMS OTP עם חוויית משתמש מעולה.

עזרו למשתמשים להירשם, להתחבר ולנהל את פרטי החשבון שלהם בקלות.

אפשר להשתמש בתכונות דפדפן שפועלות בפלטפורמות שונות כדי ליצור טופס הרשמה פשוט ומאובטח, נגיש וקל לשימוש.

שיטות מומלצות לטופסי כתובת.

שיטות מומלצות לשימוש בטופסי תשלום.

כלי מודולרי חדש שמאפשר איסוף אוטומטי של נתוני ביצועים ממקורות מרובים.

איך עובדי אינטרנט ו-Service Workers יכולים לשפר את ביצועי האתר, ומתי כדאי להשתמש ב-Web Worker בהשוואה ל-Service Worker.

איך קובצי שירות (service worker) יכולים לתקשר עם הדף באופן יזום כדי להודיע על אירועים מסוימים.

איך ליצור ערוץ תקשורת דו-כיווני בין הדף לבין קובץ השירות (service worker).

איך לתקשר עם חלון השירות ועם קובץ השירות (service worker) כדי לבצע משימות שקשורות לביצועים, לשמירה במטמון ולאופליין.

אפליקציות אינטרנט יכולות עכשיו להשבית את האצת העכבר במהלך צילום אירועי מצביע.

סקירה בסיסית על בניית חוויה שדומה ל-Instagram סטוריז באינטרנט.

כאן תוכלו ללמוד איך בונים חוויה שדומה לסטוריז ב-Instagram באינטרנט.

בפוסט הזה נסביר איך להשתמש במאפיין הטעינה במערכות ניהול תוכן.

ההגדרה של "same-site" ממשיכה לכלול את סכימת כתובת ה-URL, כך שקישורים בין גרסאות HTTP ו-HTTPS של אתר נחשבים עכשיו כבקשות בין אתרים. מומלץ לשדרג ל-HTTPS כברירת מחדל כדי להימנע מבעיות במידת האפשר. אפשר גם להמשיך לקרוא כדי לקבל פרטים על ערכי המאפיינים הנדרשים של SameSite.

מדריך אינטראקטיבי עם הוראות מפורטות ליצירת לקוח שרושם את המשתמש לקבלת התראות, מציג הודעות דחיפה כהתראות ומבטל את ההרשמה של המשתמש להתראות.

מדריך אינטראקטיבי עם הוראות ליצירת שרת שמנהל מינויים להתראות ושולח בקשות לפרוטוקול דחיפה באינטרנט לשירות Push.

סקירה כללית שמסבירה מהן התראות, למה כדאי להשתמש בהן ואיך הן פועלות.

כיצד לעקוב אחר השימוש הלא מקוון באתר שלכם, כדי לבדוק למה האתר שלכם זקוק לחוויה טובה יותר במצב אופליין.

הדגמה הממחישה עד כמה טכניקות בעלות ביצועים גבוהים יכולות ליצור אנימציות מורכבות ויפות.

SXG הוא מנגנון העברה שמאפשר לאמת את המקור של משאב בנפרד מהאופן שבו הוא נשלח.

ערכי מינימום, מקסימום והצמדה מספקים יכולות CSS חזקות שמאפשרות עיצוב רספונסיבי יותר עם פחות חסימת קוד. בפוסט הזה נסביר איך לשלוט בגודל הרכיבים, לשמור על ריווח תקין וליישם טיפוגרפיה גמישה באמצעות פונקציות ה-CSS המתמטיות הבאות.

קיצורי דרך חדשים לנכסים לוגיים ונכסי inset חדשים ל-Chromium.

יצירת אנימציה טובה היא הבסיס לחוויית שימוש טובה באינטרנט. בפוסט הזה מוסבר למה אנימציות מסוגים מסוימים מניבות ביצועים טובים יותר מאחרים.

כדי לשפר את הביצועים של הנפשות ה-CSS, השתמשו במאפייני ה-CSS לטרנספורמציה ולשקיפות ככל האפשר, והימנעו מכל פעולה שמפעילה פריסה או ציור.

צריך לוודא שה-Service Worker יודע מה לעשות כשנשלחת בקשה לתשובה חלקית.

בנוסף, ניתן לשלוט בתכונות של הזזה, הטיה ושינוי מרחק התצוגה במצלמות באינטרנט.

גרסאות מקור לניסיון הן דרך לבדוק תכונה חדשה או ניסיונית של פלטפורמת אינטרנט. גרסת מקור לניסיון של צד שלישי מאפשרת לספקים של תוכן מוטמע לנסות תכונה חדשה במספר אתרים. גרסאות מקור לניסיון הן דרך לבדוק תכונה חדשה או ניסיונית של פלטפורמת אינטרנט. תקופות

חלונות נפרדים הם סוג נפוץ של דליפת זיכרון שקשה במיוחד לאתר ולתקן.

מאמר זה מסביר איך ליצור חוויית אופליין פשוטה לאפליקציה.

השימוש בחיתוך ב-CSS יכול לעזור לנו להתרחק מכל מה שמופיע בעיצובים שלנו שנראה כמו קופסה. אם משתמשים במגוון צורות בסיסיות, או בפורמט SVG, אפשר ליצור נתיב לקליפ. לאחר מכן הסירו את החלקים של האלמנט שאתם לא רוצים להציג.

אפשר להשתמש ב-CSS כדי להתאים אישית את הצבע, הגודל או הסוג של המספרים או התבליטים ברכיבי '` או ``.

הפניה אוטומטית של הבקשות לכתובת /.well-known/change-password לכתובת ה-URL לשינוי הסיסמה תאפשר למשתמשים לעדכן את הסיסמאות שלהם בקלות רבה יותר מבעבר.

לאחר רישום של אפליקציית תשלום מבוססת-אינטרנט, האפליקציה תהיה מוכנה לקבל בקשות תשלום ממוכרים. במאמר הזה נסביר איך לארגן עסקת תשלום מ-Service Worker בזמן ריצה.

לאחר רישום של אפליקציית תשלום מבוססת-אינטרנט, האפליקציה תהיה מוכנה לקבל בקשות תשלום ממוכרים. במאמר הזה נסביר איך לארגן עסקת תשלום מ-Service Worker בזמן ריצה.

איך לשקר לקוראי מסך מרפא את הנגישות, כשהיא לא שורפת מלח!

איך משתמשים ב-WebAssembly כדי להעביר ספריות שנכתבו בשפות אחרות לאינטרנט בצורה בטוחה ואינטואיטיבית?

בעזרת תכונת ה-CSS content-visibility אפשר לשפר את הביצועים של עיבוד תוכן באינטרנט על ידי דילוג על עיבוד של תוכן שלא מוצג במסך. במאמר הזה נסביר איך להשתמש במאפיין ה-CSS החדש הזה כדי לקצר את זמני הטעינה הראשוניים באמצעות מילת המפתח auto. בנוסף, תלמדו על מפרט CSS Containment ועל ערכים אחרים של חשיפה של תוכן, שמעניקים לכם שליטה רבה יותר על אופן הרינדור של התוכן בדפדפן.

Async Clipboard API מפשט העתקה והדבקה ידידותיים להרשאות.

איך רכיבים שונים יכולים לשמש לעיבוד תוכן מהאינטרנט באפליקציות ל-Android?

כדאי להגדיר את המדיניות לגורם מפנה מסוג 'strict-origin-when-cross-origin'. המדיניות הזו שומרת על יעילות ההמרה של הגורם המפנה, תוך צמצום הסיכון לדליפת נתונים בין מקורות.

מה צוות מבזקין למד על קובצי שירות (service worker) במהלך פיתוח PWA.

איך להגדיר את Lighthouse CI ולשלב אותו בתהליכי העבודה למפתחים.

אבטחה משופרת וחוויית משתמש טובה יותר בחשבונות Google.

תוכלו ללמוד איך להטמיע מאפייני CSS מותאמים אישית באמצעות הקלדה סמנטית, ערך חלופי ועוד, ישירות בקובץ ה-CSS.

איך לרשום אפליקציית תשלום מבוססת-אינטרנט בדפדפן של לקוח? נסביר גם איך לנפות באגים.

למדו כיצד להתאים את אפליקציית התשלום מבוססת-האינטרנט שלכם כך שתפעל עם 'תשלומים באינטרנט' ותספק חוויית משתמש טובה יותר ללקוחות.

אתם יכולים להשתמש בבדיקות A/B כדי להעריך את ההשפעה של מהירות האתר על המדדים העסקיים שלכם.

היתרונות והחסרונות של שימוש בלוגיקת תפוגה עקבית או שונה בכל המטמון של Service Worker ובשכבות מטמון ה-HTTP.

כאן מוסבר איך לשנות את אפליקציית התשלום ב-Android כדי לספק למשתמשים את הכתובת למשלוח שנבחרה וגם פרטים ליצירת קשר כשהמוכר מבקש אותם דרך Payment Request API.

בקשות ניווט הן בקשות ל-HTML שמתבצעות בכל פעם שמזינים כתובת URL חדשה בסרגל הניווט או לוחצים על קישור בדף. זה המקום שבו מומחי השירות (service worker) משפיעים הכי הרבה על הביצועים שלהם: אם תעזרו ל-Service Worker שיגיב בלי לחכות לרשת, תוכלו להבטיח שהניווטים יהיו מהירים ועמידים בצורה אמינה.

דוח חוויית המשתמש ב-Chrome (שנקרא גם CrUX) הוא מערך נתונים ציבורי של נתונים על חוויית משתמש אמיתית במיליוני אתרים. בניגוד לנתונים משיעור ה-Lab, נתוני CrUX מגיעים למעשה ממשתמשים בשטח שהביעו הסכמה לכך.

החל מגרסה 84 של Chrome, sizeObserver תומך במדידת תיבה חדשה שנקראת device-pixel-content-box, המודדת את המימד&#39 בפיקסלים פיזיים. הדבר חיוני לעיבוד גרפיקה מושלמת, במיוחד בהקשר של מסכים עם צפיפות פיקסלים.

בפוסט הזה מודגשות כמה שורות רבות עוצמה של CSS, שיכולות לסייע לכם ליצור פריסות מודרניות חזקות.

סיכום של החדשות והעדכונים העיקריים שפורסמו במהלך האירוע של הקהילה שלנו באינטרנט שנמשך 3 ימים, ותזכורת לגבי האירועים האזוריים הקרובים.

שימוש בתכונות הדפדפן בפלטפורמות שונות כדי ליצור טפסים מאובטחים, נגישים וקלים לשימוש לכניסה לחשבון.

כאן תלמדו איך לשפר בהדרגה את Progressive Web App כדי שהיא תמשיך להיות שימושית בכל הדפדפנים המודרניים, אבל תספק חוויה מתקדמת בדפדפנים שתומכים ביכולות אינטרנט חדשות, כמו גישה למערכת קבצים, גישה ללוח העריכה של המערכת, אחזור אנשי קשר, סנכרון ברקע תקופתי, נעילת מצב שינה במסך, תכונות שיתוף באינטרנט ועוד הרבה יותר.

שימוש בתכונות הדפדפן בפלטפורמות שונות כדי ליצור טופס כניסה פשוט, מאובטח, נגיש וקל לשימוש.

איך לנפות באגים בבעיות של אופטימיזציה למנועי חיפוש (SEO) בדפים ספציפיים או באתר כולו.

איך מטמיעים חוויית חיפוש גמישה עם תיבת עבודה, באמצעות 'סנכרון ברקע' ו-'Push API'.

להטמיע קובץ מדיה בדף אינטרנט באמצעות התגים והתגים.

מקטעי טקסט מאפשרים לציין קטע טקסט בקטע של כתובת ה-URL. בניווט אל כתובת URL שכוללת קטע טקסט כזה, הדפדפן עשוי להדגיש ו/או להביא אותה לתשומת ליבה של המשתמש.

כדי לגרום ל-Progressive Web App לגרום להיראות כמו אפליקציה "אמיתית" צריך להבין איך להטמיע תבניות אפליקציה ספציפיות לפלטפורמה באמצעות טכנולוגיות אינטרנט.

שיתוף המידע לספקי דפדפנים על בעיות שאתם מוצאים בדפדפן שלהם, במכשיר או בפלטפורמה מסוימים הוא חלק בלתי נפרד משיפור פלטפורמת האינטרנט!

מודל RAIL מאפשר למעצבים ולמפתחים לטרגט באופן מהימן את עבודת האופטימיזציה של הביצועים בעלת ההשפעה הרבה ביותר על חוויית המשתמש. צריך ללמוד אילו יעדים והנחיות מודל RAIL מגדיר, ובאילו כלים אפשר להשתמש כדי להשיג אותם.

התכונה 'קישור מהיר' היא ספרייה שמאפשרת שליפה מראש (prefetch) של קישורים באזור התצוגה במהלך זמן לא פעיל כדי להשיג טעינות דפים מהירות יותר.

'אחזור מטא-נתונים' היא תכונה חדשה בפלטפורמת אינטרנט שנועדה לאפשר לשרתים להגן על עצמם מפני התקפות ממקורות שונים.

כשיוצרים פריסה באמצעות CSS, חשוב לזכור שלא ליצור חוויה מנותקת למשתמשים שמנווטים באמצעות המקלדת.

בקרוב יהיה הרבה יותר קל להתמצא באנימציות האינטרנט שלך.

למדו כיצד להתאים את אפליקציית התשלומים ב-Android כך שתעבוד עם תשלומים באינטרנט ותספק חוויית משתמש טובה יותר ללקוחות.

כאן מוסבר איך מוכרים משלבים אפליקציות תשלום, איך עסקאות תשלום פועלות עם Payment Request API ומה אפשר לעשות בתשלומים באינטרנט.

המטרה של תשלומים באינטרנט היא לספק חוויית תשלום חלקה באינטרנט. למידע נוסף על האופן שבו היא עובדת ומהן היתרונות שלה, והתכוננו לשלב את אפליקציית התשלום שלכם עם Web Payments.

ל-Chromium 80 הייתה רגרסיה של משקל הגופן בממשק המשתמש ב-macOS. הסיבה לפריקה, והיכולות החדשות של הפיצ'ר לאחר פתרון הבעיה, שווים את ההמתנה ב-Chromium 83.

פיתוח תרחיש עסקי אפקטיבי ל-PWA. נסביר מתי כדאי להשקיע ואיך אפשר למדוד את ההצלחה שלה.

קיצורי דרך של אפליקציות מעניקים גישה מהירה לכמה פעולות נפוצות שמשתמשים צריכים לעיתים קרובות.

פרטים על Chrome's ודפדפנים אחרים' יש תוכניות להסיר את מטמון האפליקציה.

שיטות מומלצות לשילוב בין הצעות שונות של התקנות כדי להגדיל את שיעורי ההתקנה, ולהימנע מתחרות על פלטפורמות ומהפסקת השימוש.

אחסון קבוע יכול לעזור בהגנה על נתונים קריטיים מפני פינוי ולהפחית את הסיכוי לאובדן נתונים.

המודולים של CommonJS הם דינמיים מאוד, מה שמונע מכלי אופטימיזציה וחבילות של JavaScript לבצע אופטימיזציות מתקדמות באמצעותם.

ממשקי API מסוימים לאינטרנט מגבירים את הסיכון להתקפות ערוץ צדדי כמו Spectre. כדי לצמצם את הסיכון, הדפדפנים מציעים סביבה מבודדת מבוססת-הסכמה שנקראת 'מבודדת ממקורות שונים'. כאן אפשר ללמוד למה יש צורך בבידוד בין מקורות כדי להשתמש בתכונות מתקדמות, כמו SharedArrayBuffer , 'performance.measureUserAgent יוצגו} וטיימרים ברזולוציה גבוהה באופן מדויק יותר.

כאן אפשר ללמוד איך ליצור פרופיל ביצועים של אפליקציות Web Audio ב-Chrome באמצעות 'about://tracing' והתוסף **WebAudio** ב-Chrome DevTools.

כדאי ללמוד איך Next.js ו-Gatsby שיפרו את פלט ה-build שלהם כדי לצמצם כפילויות של קוד ולשפר את ביצועי טעינת הדפים

"אותו אתר" ו "אותו מקור" מצוטטים לעיתים קרובות אבל מונחים לא מובנים כראוי. בדף הזה מוסבר מהם בעצם ובמה הם שונים.

ממשקי API מסוימים לאינטרנט מגבירים את הסיכון להתקפות ערוץ צדדי כמו Spectre. כדי לצמצם את הסיכון, הדפדפנים מציעים סביבה מבודדת מבוססת-הסכמה שנקראת 'מבודדת ממקורות שונים'. משתמשים ב-COOP וב-COEP כדי להגדיר סביבה כזו ומפעילים תכונות מתקדמות כמו SharedArrayBuffer, 'performance.measureUserAgentspecificMemory()' או טיימר ברזולוציה גבוהה עם רמת דיוק גבוהה יותר.

במדריך זה תלמדו איך למדוד את השימוש בזיכרון בדף האינטרנט בסביבת ייצור כדי לזהות רגרסיות.

בפוסט הראשון הזה מצוות ההנדסה של web.dev, תלמדו איך אנחנו בונים את האתר — כולל השימוש שלנו ב-Eleventy וברכיבי אינטרנט.

מאפיין CSS של ערכת הצבעים והמטא תג התואם מאפשרים למפתחים להגדיר את הדפים שלהם לשימוש בברירות המחדל הספציפיות לעיצוב של גיליון הסגנונות של סוכן המשתמש, כמו למשל פקדי טפסים, סרגלי גלילה וצבעי מערכת CSS. עם זאת, התכונה הזו מונעת מדפדפנים להחיל טרנספורמציות באופן עצמאי.

איך מוודאים שהפונקציונליות העיקרית של האתר תהיה תמיד זמינה, נגישה, מאובטחת, ניתנת לשימוש, גלויה ומהירה.

אנחנו יודעים שכדאי לעצב את האתר עם יכולת תגובה כדי לספק את החוויה הטובה ביותר במכשירים שונים, אבל עיצוב רספונסיבי הוא תמיד פתרון מנצח בכל הנוגע לנגישות.

למדו להפוך את הדפים שלכם לנגישים יותר על ידי שיפור השימוש בצבע ובניגודיות.

איך לקבוע צוואר בקבוק בשרת, לתקן אותו במהירות, לשפר את ביצועי השרת ולמנוע רגרסיות.

חשוב שיהיה מספיק שטח סביבם של רכיבים אינטראקטיביים כדי שאפשר יהיה להשתמש בהם במכשיר נייד או עם מסך מגע. התכונה הזו תעזור לכולם, ובמיוחד למשתמשים עם לקויות מוטוריות.

הכירו את 'סוגים מהימנים': ממשק API לדפדפן למניעת סקריפטים מבוססי DOM באתרים שונים באפליקציות אינטרנט מודרניות.

איך פותחים Progressive Web App באפליקציה ל-Android

גרסה 83 של Chrome 83 מבצעת אופטימיזציה של מחזורי הרינדור, מונעת שינויי פריסה בזמן טעינה מראש של גופנים אופציונליים. שילוב עם תצוגת גופנים: אופציונלי הוא הדרך היעילה ביותר להבטיח רינדור ללא בעיות בקוד של גופנים מותאמים אישית.

איך לאחזר ולהציג קובצי SXG באמצעות nginx, ומה האתגרים בשליפה מראש של משאבי משנה.

כיצד ליצור אישור TLS עם תוספי SXG, להתקין כלים ליצירת קובצי SXG ולהגדיר nginx להצגת קובצי SXG.

אתם יכולים להשתמש בשאילתות מדיה כדי לשלוח תמונות בגודל מינימלי, שיטה שנקראת בדרך כלל 'תמונות רספונסיביות'.

איך מחלקות אחרות יכולות לעזור להפוך את פרויקט האופטימיזציה של מהירות האתר להצלחה גדולה יותר.

החל מגרסה 81 של Chrome, גוללים נשארים מוצמדים כשפריסת הדף משתנה. במילים אחרות, כבר אין צורך להוסיף event listener כדי לאלץ חיתוך מחדש.

בקישור הבא מוסבר איך להציג בורסות חתומות (SXG) באמצעות Web Packager.

כדאי להשתמש באירוע beforeinstallprompt כדי לספק למשתמשים חוויית התקנה חלקה ומותאמת אישית מתוך האפליקציה.

אם כבר השתמשת ב-WebXR Device API, תשמח לדעת שיש מעט מאוד מידע חדש ללמוד. הכניסה לסשן WebXR זהה במידה רבה. הפעלת לולאת מסגרת היא כמעט זהה. ההבדלים נובעים מהגדרות שמאפשרות להציג תוכן שמתאים למציאות רבודה.

WebXR Hit Test API הוא שיפור למציאות הרבודה באינטרנט שמאפשר לך להציב אובייקטים וירטואליים בתצוגה של העולם האמיתי.

המציאות הווירטואלית הגיעה לאינטרנט ב-Chrome 79. ההשקה הזו היא הבסיס למציאות רבודה ולמציאות מדומה, שמבוססת על WebXR Device API. המאמר הזה הוא החלק השני בסדרה, ומתמקד בלולאת המסגרת, החלק בסשן XR שבו התמונות מוצגות לצופה. בקרוב יתמכו ב-WebXR Device API גם בדפדפנים נוספים, ביניהם Firefox Reality , Oculus Browser, דפדפן Edge ו-Magic Leap&#39&s Helio.

איך Chrome משקיע מאמצים בכמה כלים של קוד פתוח כדי לקדם את הסביבה העסקית של JavaScript

מבוא לאפליקציות אינטרנט מתקדמות (PWA) ושלושת היסודות שמפרידים ביניהן לבין אפליקציות אינטרנט אחרות.

איך רושמים מסלולים ב-Workbox כך שאפליקציית Progressive Web App תופיע בממשקי המשתמש של שיתוף ברמת המערכת, לצד אפליקציות ספציפיות לפלטפורמה.

סמלים שניתנים להתאמה (maskable) הם פורמט שנותן לכם יותר שליטה, ומאפשר לכם להשתמש בסמלים מותאמים ב-Progressive Web App. סמל שניתן להתאמה (maskable) יכול להיראות נהדר בכל מכשירי Android.

לעיתים קרובות קורה שלדף או לאפליקציה יש ניתוח נתונים או נתונים אחרים שלא נשלחו בזמן שהמשתמש סוגר אותם. אתרים משתמשים בקריאה סינכרונית ל-XMLHttpRequest() כדי להשאיר את הדף או האפליקציה פתוחים עד שהנתונים שלהם מועברים לשרת. היא פוגעת בחוויית המשתמש ומתעלמת מדרכים טובות יותר לחיסכון בנתונים. מערכת Chrome 80 מבצעת לאחרונה שינוי במפרט כדי לטפל בבעיה.

עובדי מודולים מקלים על ביטול החסימה של ה-thread הראשי על ידי העברת קוד יקר לשרשור ברקע, תוך שמירה על היתרונות הארגונומיים והביצועים של מודולים רגילים של JavaScript.

כדאי לקרוא על הפיתוחים האחרונים בכלים למהירות, כולל מדדי ביצועים חדשים, עדכונים ל-PageSpeed Insights ודוח חוויית המשתמש ב-Chrome (CrUX) ותובנות מניתוח Web Almanac של הסביבה העסקית של האינטרנט.

בהדרכה הזו תלמדו על דפוס טעינה מותאם, איך להטמיע אותו ואיך חברות ב-Facebook, Tinder, eBay וחברות אחרות משתמשות בטעינה מותאמת בסביבת הייצור.

ה-thread הראשי של הדפדפן עמוס מאוד. ניתן להשתמש ב-Web Workers כדי להעביר את הקוד ל-thread הראשי, וכך לשפר משמעותית את האמינות של האפליקציה ואת חוויית המשתמש.

תגובות של משיבים לסקר על שיטות שונות לאופטימיזציה של תמונות.

בשיעור הזה תלמדו איך לבנות שרת התראות.

איך Next.js מזרז את הניווט באמצעות טעינת נתיב מראש, ואיך להתאים אישית את התכונה הזו. בפוסט הזה נסביר איך ניתוב פועל ב-Next.js, איך הוא מותאם למהירות ואיך להתאים אותו אישית בהתאם לצרכים שלכם. ב- Next.js, אין צורך להגדיר את הניתוב באופן ידני. ב-Next.js

מידע על היתרונות והחסרונות של תמיכה ב-AMP באפליקציית Next.js AMP היא מסגרת של רכיבי אינטרנט שמבטיחה טעינת דפים מהירה. ב- Next.js יש תמיכה מובנית ב-AMP. המדריך הזה מתאר בקצרה איך AMP מבטיח טעינת דפים מהירה, ואז מסביר את הדרכים השונות שבהן אפשר לתמוך

איך אפשר להאיץ את האפליקציה שלכם ב-Next.js באמצעות פיצול קוד ואסטרטגיות טעינה חכמות. במאמר הזה נסביר על סוגים שונים של חלוקת קוד ועל השימוש בייבוא דינמי כדי לזרז את האפליקציות שלכם ב-Next.js. כברירת מחדל, Next.js מפצל את ה-JavaScript למקטעים נפרדים

‏Next.js מטפל באופטימיזציות רבות באפליקציית React, כדי שלא תצטרכו לעשות זאת בעצמכם Next.js הוא מסגרת React עם מספר אופטימיזציות מובנות של ביצועים. הרעיון המרכזי שמאחורי המסגרת הוא להבטיח שהאפליקציות יתחילו לפעול וימשיכו לפעול בצורה יעילה ככל האפשר,

באמצעות Web Share API, אפליקציות אינטרנט יכולות להשתמש באותן יכולות שיתוף שמספקות המערכת, כמו אפליקציות ספציפיות לפלטפורמה. ממשק Web Share API מאפשר לאפליקציות אינטרנט לשתף קישורים, טקסט וקבצים עם אפליקציות אחרות שמותקנות במכשיר, באותו אופן כמו אפליקציות ספציפיות לפלטפורמה.

המציאות הווירטואלית הגיעה לאינטרנט ב-Chrome 79. ההשקה הזו היא הבסיס למציאות רבודה וגם למציאות מדומה, שמבוססת על WebXR Devicer API. המאמר הזה הוא הראשון בסדרה, שבו נדון במושגים בסיסיים ונתאר איך משתתפים בסשן XR. בקרוב יתמכו ב-WebXR Device API גם בדפדפנים נוספים, ביניהם Firefox Reality , Oculus Browser, דפדפן Edge ו-Magic Leap&#39&s Helio.

הסבר על איך קובצי cookie פועלים ומהם קובצי cookie מהדומיין הנוכחי או של צד שלישי.

אתרים יכולים עכשיו לסמן באופן מפורש את קובצי ה-cookie שלהם לשימוש בין אתרים. למדו כיצד לסמן קובצי cookie כדי להבטיח שקובצי cookie של צד ראשון וצד שלישי ימשיכו לפעול לאחר הטמעת השינוי.

להבין את הערך של מודעות מהירות ואיך להתייחס למהירות המודעה.

כדאי להשתמש בהתראות כדי לעורר עניין בקרב המשתמשים באמצעות עדכונים ממוקדים שנוצרים בזמן.

ב-Codelab הזה, תלמדו איך לבקש הרשאת משתמש ולשלוח התראות.

בשיעור הזה תלמדו איך לנהל התראות באמצעות Service Worker.

הדרכה מפורטת לשימוש ב-WebPagetest כדי לזהות ולתקן בעיות של אי יציבות בפריסה.

טלפונים עם תכונות פופולריים שוב, במיוחד בשווקים מתפתחים שבהם 2G הוא הסטנדרט. ריכזנו כאן את הלקחים שלנו מיצירת PROXX, קלון של משחק מוקשים לנייד, שפועל במהירות בטלפונים עם תכונות בסיסיות ברשת 2G.

אמנם משתני CSS שימושיים, אבל קשה לעבוד איתם כי הם יכולים לקבל כל ערך ולשנות אותם, ואי אפשר להשתמש במעברים איתם. נכסי CSS ו-Value API ברמה 1 עוזרים להתגבר על הבעיות האלה.

איך לזרז את הניווטים בעתיד באמצעות שליפה מראש (prefetch) של משאבים.

כדאי לקרוא איך לתקן שגיאות של תוכן מעורב באתר, כדי להגן על המשתמשים ולהבטיח שכל התוכן ייטען.

תוכן מעורב מתרחש כשה-HTML הראשוני נטען בחיבור HTTPS מאובטח, אבל משאבים אחרים נטענים בחיבור HTTP לא מאובטח.

מחקרים מראים שסרטונים באינטרנט מובילים ליותר מעורבות ומכירות. גם אם עדיין לא הוספתם סרטון לאתרים שלכם, זה רק עניין של זמן.

הדגמה אינטראקטיבית שמראה איך מציינים איזה סמל יופיע במסכי הבית של iOS.

פלטפורמת האינטרנט מתאימה מאוד לפיתוח משחקים בימינו. המפתח לפיתוח משחק אינטרנט מודרני הוא לאמץ את השיטות המומלצות של עיצוב משחק ומונטיזציה. הפוסט הזה נועד לעזור לכם להשיג את המטרה הזו.

כשיוצרים אפליקציות PWA, ארכיטקטורות עם מקורות מרובים מציבים אתגרים רבים. תוכלו לגלות מהם השימושים הטובים והגרועים במספר מקורות, ונציע כמה פתרונות עקיפים לבניית אפליקציות PWA באתרים עם מספר מקורות.

בפוסט הזה מוסבר איך לטעון WebFonts כדי למנוע שינויי פריסה ודפים ריקים כשה-WebFonts לא זמינים כשהדף נטען.

בפוסט הזה אנחנו מסבירים איך להקטין את גודל ה-WebFonts שבהם אתם משתמשים באתר, כך שטיפוגרפיה טובה לא פירושה אתר איטי.

איך יוצרים אפליקציות מסוג Progressive Angular שניתן להתקין אותן.

כדאי להשתמש ברשת CDN של תמונות כדי לבצע אופטימיזציה של התמונות באתר ולהפחית את עלות הנתונים עבור המשתמשים.

למד כיצד לשפר את זמני הטעינה ואת חוויית המשתמש על ידי הימנעות מהשגיאות הנפוצות בשימוש בסקריפטים של צד שלישי.

איך משתמשים ב-Lighthouse ובכלי הפיתוח ל-Chrome כדי לזהות משאבים איטיים מצד שלישי.

בפוסט הזה מתוארים הסוגים הנפוצים של רכיבי JavaScript של צד שלישי ובעיות הביצועים שגורמים כאלה יכולים לגרום. המדריך גם כולל הנחיות כלליות לביצוע אופטימיזציה בסקריפטים של צד שלישי.

עם תכונות חדשות של פלטפורמת האינטרנט, קל יותר לבנות רכיבים מותאמים אישית שפועלים כמו פקדי טפסים מובנים.

מידע על שיטות לאופטימיזציה של משאבים איטיים של צד שלישי בעזרת Lighthouse.

מידע נוסף על רמזים של המשאבים rel=preconnect ו-rel=dns-prefetch ועל השימוש בהם.

למד איך להוסיף אפקטים של רקע כגון טשטוש ושקיפות לרכיבי ממשק משתמש באינטרנט באמצעות מאפיין מסנן הרקע ב-CSS.

'לא פעיל בזמן האימות מחדש' עוזר למפתחים לאזן בין מיידית - טעינה מיידית של תוכן שנשמר במטמון - לבין הרענון - וכך להבטיח שבעתיד ייעשה שימוש בעדכונים של התוכן שנשמר במטמון.

כאן תלמדו איך לייעל את התגובה של רשימות גדולות על ידי הטמעת גלילה וירטואלית באמצעות Angular Component Dev Kit.

איך משתמשים באסטרטגיות הטעינה מראש של Angular&#39 כדי ליצור אפליקציות מהירות יותר.

רוצה לדעת איך לבצע אופטימיזציה של זיהוי השינויים באפליקציה ב-Angular כדי לשפר את הרספונסיביות שלה?

למד כיצד להשתמש ב-Network Information API כדי להתאים את התוכן שלך לאיכות הרשת.

פיצול הקוד מאפשר לזרז את האפליקציות, אבל הוא עלול להאט את הניווטים הבאים. שליפה מראש חזויה היא דרך יעילה להשתמש בניתוח נתונים כדי לבצע שליפה מראש חכמה של מה שהמשתמש צפוי להשתמש בו בשלב הבא, ולבצע אופטימיזציה של ניצול הרשת.

כאן מוסבר איך להפוך את אפליקציית Angular לנגישה באמצעות Codelyzer.

כך משתמשים בתקציבי ביצועים ישירות ב-Angular CLI!

כך משתמשים ב-Service Worker כדי לשמור מראש את הנכסים הסטטיים באפליקציה.

מכשירים רבים תומכים עכשיו במצב כהה רחב של מערכת ההפעלה או בחוויה של עיצוב כהה. בפוסט הזה מוסבר איך אפשר לתמוך במצב כהה בדפי אינטרנט, מציג רשימה של שיטות מומלצות ומכיל גם רכיב בהתאמה אישית שנקרא 'מצב כהה', שמאפשר למפתחי אתרים להציע למשתמשים דרך לשנות את ההעדפה ברמת מערכת ההפעלה בדפי אינטרנט ספציפיים.

במאמר הזה מוסבר איך להקטין את קובץ ה-App Bundle הראשוני באמצעות פיצול קוד ברמת המסלול.

משתמשים ב-srcset כדי לבחור באופן אוטומטי את גודל התמונה המתאים.

איך הופכים את אפליקציית Angular למהיר, אמינה יותר, גלויה, להתקנה ונגישה?

פוסט זה מסכם הרצאה על מצב רכיבי האינטרנט בשנת 2019, מאת קווין שאף מפרויקט הפולימר וקארידי פטיניו מ-Salesforce.

ב-Lighthouse יש עכשיו תמיכה בתקציבי ביצועים. את התכונה הזו, LightWallet, אפשר להגדיר בפחות מ-5 דקות, ומספקת Feedvack לגודל ולכמות של משאבי הדף.

הוכחת ההכנסות שנוצרות משיפורים באתר, תוך החרגה של גורמים חיצוניים כגון קמפיינים שיווקיים.

מאז ההשקה של Payment Request API ב-Chrome 53 ושל Payment Handler API ב-Chrome 68, בוצעו לא מעט שינויים במפרטים שלהן. הפוסט הזה מסכם את העדכונים האלה וימשיך לצבור את השינויים ב-API.

אפשר להתקין בקלות אפליקציות מסוג Progressive Web Apps באמצעות לחצן התקנה חדש שמופיע בסרגל הכתובות של Chrome.

מהי ההשפעה של ביצועי האתר על החלקים השונים במשפך המסחר האלקטרוני

איך לקדם התקנה של אפליקציות מסוג Progressive Web App ושיטות מומלצות

עבודה עם פונקציות שירות (service worker) היא עניין חדש וחדש אצל מפתחי אינטרנט רבים. הפוסט הזה מספק כמה טיפים שיעזרו לך להכיר אותם טוב יותר.

איך לקדם התקנה של אפליקציות מסוג Progressive Web App ושיטות מומלצות

התמונות תופסות כמות משמעותית של שטח חזותי ומהוות את רוב הבייטים שיש להוריד באתר. מדיניות התכונות החדשה מאפשרת לזהות תמונות גדולות מדי.

במדריך תלמדו איך לשפר את זמני העיבוד באמצעות טכניקת CSS קריטית ואיך לבחור את הכלי המתאים ביותר לפרויקט שלכם.

תלמדו איך להשתמש בתכונה 'קריטית' כדי לחלץ ולהטמיע CSS קריטי ולשפר את זמני העיבוד.

ללמוד איך לאבחן אינטראקציות יקרות של משתמשים שמונעות את העבודה.

לקראת Google I/O 2019, השקנו שלוש יוזמות חדשות לשיפור הביצועים באינטרנט, שאנחנו מקווים שיאפשרו חוויית משתמש טובה יותר לכולם.

PROXX כמשחק שדומה לשולה המוקשים, שנוצר כ-PWA. הוא פועל במגוון רחב של מכשירים, והמראה החזותי שלו משתפר ככל שהמכשיר מתקדם יותר.

נכון שזה יהיה נהדר אם משתמשים יוכלו לחפש באתר שלך באמצעות המצלמה שלהם?

ללמוד איך לסמן קובצי cookie לשימוש של צד ראשון וצד שלישי באמצעות המאפיין SameSite. ניתן לשפר את אבטחת האתר על ידי שימוש בערכים Lax ו-Strict של SameSite&#39 כדי לשפר את ההגנה מפני התקפות CSRF. ציון המאפיין החדש 'ללא' מאפשר לסמן באופן מפורש את קובצי ה-cookie לשימוש באתרים שונים.

ה-API של הפורטלים המוצע החדש עוזר לשמור על פשטות בממשק הקצה, ועדיין מאפשר ניווט חלק עם מעברים מותאמים אישית. במאמר הזה, תוכלו להתנסות בשימוש בפורטלים כדי לשפר את חוויית המשתמש באתר שלכם.

שימוש ב-Network Information API כדי להתאים את הנכסים שמוצגים למשתמשים על סמך איכות החיבור שלהם.

בשיעור הזה תלמדו איך דחיסת Brotli יכולה לצמצם עוד יותר את יחסי הדחיסה ואת הגודל הכולל של האפליקציה.

לכבוד Google I/O 2019, החברים מצוות web.dev שלחו מספר עדכונים, כולל עיצוב מחודש, מסמכים נוספים ב-Lighthouse ובלוג חדש לגמרי.

מותגים שמבצעים אופטימיזציה למהירות בדרך כלל יגלו שהטעינה שלהם חוזרת במהירות. בפוסט הזה נסביר איך להבטיח שהחוויה המהירה תישאר מהירה.

המהירות חשובה, אבל מה בדיוק זה אומר? מה המשמעות של אתר מהיר?

הביצועים בעולם האמיתי משתנים מאוד בשל הבדלים במכשירים של המשתמשים, בחיבורים לרשת וגורמים אחרים. בפוסט הזה נדון בכלים שיכולים לעזור לכם לאסוף נתונים משיעור ה-Lab או מהשטח כדי להעריך את הביצועים של הדף.

תיבת העבודה היא חלק מובנה באפליקציית Create React עם הגדרת ברירת מחדל, שמאפשרת לשמור מראש את כל הנכסים הסטטיים באפליקציה בכל build.

כברירת מחדל, אפליקציית Create React כוללת מניפסט של אפליקציית אינטרנט. שינוי הקובץ הזה יאפשר לך לשנות את האופן שבו האפליקציה מוצגת כשהיא מותקנת במכשיר של המשתמש.

responsive-snap היא ספרייה של צד שלישי שמעבדת מראש דפים באתר שלכם לקובצי HTML סטטיים. הפעולה הזו יכולה לשפר את זמני הצגת התמונה הראשונית באפליקציה.

בעזרת השיטה React.lazy אפשר לפצל בקלות קוד של אפליקציית React ברמת הרכיב באמצעות ייבוא דינמי. כדאי להשתמש בתכונה הזו יחד עם 'מתח' כדי להציג למשתמשים מצבי טעינה מתאימים.

React היא ספריית קוד פתוח שמאפשרת ליצור ממשקי משתמש בקלות רבה יותר. מסלול הלימוד הזה עוסק בממשקי API ובכלים שונים בסביבה העסקית, וכדאי להשתמש בהם כדי לשפר את הביצועים ואת נוחות השימוש של האפליקציה.

result-axe היא ספרייה שבודקת אפליקציית React ומתעדת בעיות נגישות במסוף DevTools של Chrome. eslint-Plugin-jsx-a11y הוא פלאגין של ESLint שמזהה ואוכף מספר כללי נגישות ישירות ב-JSX. השימוש המשולב בהם יכול לספק גישת ביקורת מקיפה לאיתור ולתיקון בעיות נגישות באפליקציה שלכם.

חלון תגובה הוא ספרייה שמאפשרת עיבוד יעיל של רשימות גדולות.

בשיעור הזה ב-Codelab הזה תלמדו איך לשפר את הביצועים של דף על ידי טעינה מראש ושליפה מראש של משאבים.

שאילתת המדיה עם תנועה בצמצום העדפה מזהה אם המשתמש ביקש שהמערכת תצמצם את כמות האנימציה או התנועה שהיא משתמשת בה. הודעה זו מיועדת למשתמשים שצריכים או מעדיפים להשתמש באנימציות מינימליות. לדוגמה, אנשים שסובלים מהפרעות וסטיבולריות מעדיפים בדרך כלל להשתמש באנימציות מינימליות.

כאן תלמדו איך לעכב CSS שאינו קריטי במטרה לבצע אופטימיזציה של נתיב העיבוד הקריטי ולשפר את הצגת התוכן הראשוני (FCP).

סורק הצמתים v2 מוסיף את היכולת לא רק לצפות בצמתים נפרדים, אלא גם לזהות אם הרכיב המצטלב נחשף בזמן הצומת.

ליצור אתרים שמגיבים לצרכים וליכולות של המכשיר שבו הם צופים.

גיליונות סגנונות ניתנים ליצירה מספקים דרך חלקה ליצור סגנונות ולהפיץ אותם במסמכים או בשורשי צל, בלי לדאוג לגבי FOUC.

המלצות להטמעת לוגיקה ורינדור באפליקציות.

עם Travis CI אפשר להגדיר תקציבי ביצועים עם השקעה מינימלית, ולאכוף אותם כחלק מתהליך הפיתוח.

הדרך הטובה ביותר לפקח על תקציב הביצועים היא להפוך אותו לאוטומטי. במאמר הזה אנחנו מסבירים איך לבחור את הכלי המתאים ביותר לצרכים ולהגדרות הנוכחיות שלכם.

במאמר הזה מוסבר איך להגדיר תקציבי ביצועים ולבדוק את גודל החבילה בעזרת Webpack.

השקעת הרבה מאמצים כדי להגיע מהר יותר, ועכשיו אפשר לבצע אוטומציה של בדיקת הביצועים ב-Travis CI באמצעות Lighthouse בוט, כדי שתמיד תהיה לך אפשרות להמשיך במהירות.

איך משלבים את WebAssembly בהגדרה הזו? במאמר הזה נסביר זאת בעזרת C/C++ ו-Emscripten.

ה-API של getInstalledRelatedApps() הוא ממשק API של פלטפורמת אינטרנט שמאפשר לבדוק אם האפליקציה ל-iOS/ל-Android/למחשב או ל-PWA מותקנים במכשיר של המשתמש.

ב-Codelab הזה, תלמדו איך לשפר את הביצועים של אפליקציה על ידי מזעור כמות הקוד שיתורגם.

הינטים של לקוחות הם קבוצה של כותרות של בקשות HTTP שבהן אנחנו יכולים להשתמש כדי לשנות את האופן שבו אנחנו מעבירים משאבי דפים על סמך מאפייני המכשיר והחיבור לרשת של המשתמש. במאמר הזה נסביר הכול על רמזים ללקוחות, איך הם פועלים וכמה רעיונות לאופן שבו ניתן להשתמש בהם כדי לשפר את מהירות האתר עבור המשתמשים.

שימוש ברכיבי ה-HTML הסמנטיים הנכונים עשוי לעזור לכם לענות על רוב הצרכים שלכם לגישה למקלדת, או על כולם. המשמעות היא שתוכלו להשקיע פחות זמן בטיפול ב-tabindex, ויותר משתמשים יהיו מרוצים!

אתר נגיש הוא אתר שניתן לגשת לתוכן שלו בלי קשר למוגבלויות של משתמשים, והמגוון הרחב ביותר של המשתמשים יכול להפעיל את הפונקציונליות שלו.

קרה לכם שתהיתם אי פעם איך טכנולוגיה מסייעת, כמו קורא מסך, יודעת מה להודיע למשתמשים? התשובה היא שהטכנולוגיות האלה מסתמכות על מפתחים שמסמנים את הדפים שלהם ב-HTML סמנטי. אבל מה זה סמנטיקה, ואיך קוראי מסך משתמשים בהם?

אם תשתמשו ברכיבים הנכונים לכותרות ולציוני דרך, תוכלו לשפר באופן ניכר את חוויית הניווט של המשתמשים בטכנולוגיה מסייעת.

כדי שקורא המסך יציג למשתמש ממשק משתמש מוקרא בקול, לרכיבים משמעותיים צריכות להיות תוויות או חלופות מתאימות. תווית או חלופה לטקסט נותנת לרכיב את השם הנגיש שלו, אחד ממאפייני המפתח לביטוי הסמנטיקה של רכיבים בעץ הנגישות.

הרבה משתמשים שונים מסתמכים על המקלדת כדי לנווט באפליקציות - החל ממשתמשים עם לקויות מוטוריות זמניות וקבועות ועד למשתמשים שמשתמשים במקשי קיצור כדי להיות יעילים ופרודוקטיביים יותר. אסטרטגיה טובה לניווט באמצעות המקלדת לאפליקציה יוצרת חוויה טובה יותר לכולם.

רכיבי HTML רגילים כוללים נגישות מובנית במקלדת. כשיוצרים רכיבים אינטראקטיביים מותאמים אישית, כדאי להשתמש באינדקס Tab כדי לוודא שיש גישה למקלדת.

מחוון המיקוד (שבדרך כלל מסומן באמצעות "טבעת התמקדות") מזהה את הרכיב שנמצא כעת במוקד. חשוב מאוד לסמן את המחוון למשתמשים שאינם יכולים להשתמש בעכבר, מכיוון שהוא משמש כייצוג של מצביע העכבר.

בשיעור הזה ב-Codelab הזה תלמדו איך להציג תמונות במידות הנכונות כדי לשפר את ביצועי הרשת.

מטמון ה-HTTP של הדפדפן הוא קו ההגנה הראשון שלך. זו לא בהכרח הגישה החזקה או הגמישה ביותר, ויש לך שליטה מוגבלת על משך החיים של תגובות שנשמרו במטמון. עם זאת, יש כמה כללי יסוד שמעניקים לכם הטמעה הגיונית של שמירה במטמון, בלי להתאמץ, ולכן כדאי לפעול לפי ההנחיות האלה.

בשיעור הזה תלמדו איך להחליף קובץ GIF מונפש בסרטון כדי לשפר את הביצועים.

מטמון ה-HTTP של הדפדפן הוא קו ההגנה הראשון מפני בקשות רשת מיותרות.

כשחושבים על המילה "אבטחה", זה בדרך כלל בהקשר של חדשות רעות. אבל אבטחה היא מרכיב חיובי והכרחי בפיתוח אתרים, בדיוק כמו "חוויית משתמש" או "נגישות".

בשיעור הזה ב-Codelab הזה תלמדו איך להשתמש במאפיין המידה כדי להתאים את הגודל של התמונות בצורה נכונה, בהתאם לאזור התצוגה של המשתמש.

בשיעור הזה תלמדו איך להשתמש ב-imagemin עם חבילת Webpack כדי לבצע אופטימיזציה של תמונות JPEG ו-PNG להורדה מהירה יותר.

בשיעור הזה ב-Codelab, נסביר איך להגדיר אתר שאפשר להתקין באמצעות האירוע beforeinstallprompt.

ב-Codelab הזה תלמדו איך לטעון תמונות שונות לחלוטין בהתאם לגודל התצוגה של המכשיר.

הצגת תמונות בגודל של מחשב במכשירים ניידים יכולה לצרוך פי 2 עד פי 4 יותר נתונים מהנדרש. במקום להשתמש בתמונה בגודל אחד שמתאים לכולם", מומלץ להציג תמונות בגדלים שונים במכשירים שונים.

ברגע שפותחים דף אינטרנט כלשהו, הדפדפן מבקש מסמך HTML משרת, מנתח את התוכן של קובץ ה-HTML ושולח בקשות נפרדות לכל הפניה חיצונית אחרת. שרשרת הבקשות הקריטית מייצגת את סדר המשאבים בעדיפות ובאחזור של המשאבים על ידי הדפדפן.

ב-Codelab הזה תלמדו איך לשפר את הביצועים של אפליקציה על ידי הסרת יחסי תלות שאינם בשימוש או לא נחוצים.

ראיתם פעם קובץ GIF מונפש בשירות כמו Imgur או Gfycat, ובדקתם אותו בכלים למפתחים, ורק כדי לגלות ש-GIF הוא באמת סרטון? ויש סיבה טובה לכך. קובצי GIF מונפשים יכולים להיות ענקיים! המרת קובצי GIF גדולים לסרטונים יכולה לחסוך בגדול ברוחב הפס של המשתמשים.

תמונות לא דחוסות ממלאות את הדפים שלכם בבייטים מיותרים. אפשר להפעיל את Lighthouse כדי לבדוק אם יש הזדמנויות לשיפור טעינת הדף על ידי דחיסת התמונות.

מנועי חיפוש הם הגרסה הדיגיטלית של ספרן. הם משתמשים באינדקס מקיף כדי לעזור במציאת המידע המתאים לשאילתה. אחרי שתבינו את עקרונות הבסיס של החיפוש, תוכלו להגדיר את התוכן שלכם כך שיהיה גלוי למשתמשים.

תמונות WebP קטנות יותר מקבצים דומים בפורמט JPEG ו-PNG – בדרך כלל מדובר בהפחתה של 25% עד 35% בגודל הקובץ. פעולה זו מקטינה את גודל הדפים ומשפרת את הביצועים.

כבר עברנו לשם – שכחתם להקטין תמונה לפני שהוספתם אותה לדף. התמונה נראית טוב, אבל היא מבזבזת נתונים של המשתמשים ופוגעת בביצועי הדף.

ב-Codelab הזה, תלמדו איך פועלת מדיניות same-origin בעת גישה לנתונים בתוך iframe.

רק לעיתים רחוקות ביצועים טובים הם תופעת לוואי. כאן תוכלו לקרוא על תקציבי ביצועים ולהבין איך הם יכולים לעזור לכם להשיג את התוצאות הטובות ביותר.