דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

הנחיות

זמינות, אמינות, עמידות ויציבות

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

במאמר תיקון שרת בעומס יתר מוסבר איך לזהות, לצמצם ולמנוע בעיות של עלייה חדה בתעבורת נתונים.
יש להסיר תמונות, סרטונים, סקריפטים וגופנים מיותרים. ודאו שכל דף מתמקד רק בפונקציונליות שהאנשים שמשתמשים באתר שלכם באמת צריכים.
אופטימיזציה של התמונות עלולה לצמצם משמעותית את השימוש ברוחב הפס של השרת, כי תמונות הן המקור המוביל לריבוי נתונים באינטרנט.
להפחית ככל האפשר את התוכן הסטטי שלכם ל-CDN. פרטים נוספים מספקים נפוצים: AWS, Azure, Cloudflare, Google Cloud ו-Firebase.
בדקו אם ב-CDN יש אופטימיזציות שקל להפעיל, כמו דחיסת תמונות דינמיות, דחיסת טקסט או הקטנה אוטומטית של משאבי JS ו-CSS.
אופטימיזציה של שמירת HTTP במטמון יכולה להפחית באופן משמעותי את הדרישות לשרתים שלכם על ידי שינוי מינימלי של הקוד. קראו את המאמר מטמון HTTP: שורת ההגנה הראשונה כדי לקבל סקירה כללית, ואת השיטות המומלצות לשמירה במטמון HTTP ושיטות מומלצות לשמירה במטמון. הבדיקה של הצגת נכסים סטטיים באמצעות מדיניות מטמון יעילה ב-Lighthouse יכולה לעזור לכם לזהות במהירות משאבים שלא נשמרים במטמון. זכרו שלסוגים שונים של משאבים יהיו דרישות עדכניות שונות, ולכן תצטרכו אסטרטגיות שונות לשמירה במטמון.
שימוש ב-Service Workers הוא דרך נוספת לצמצם משמעותית את הדרישות בשרתים, אבל יכול להיות שתצטרכו להשקיע השקעה טכנית משמעותית. הם גם מאפשרים לאתר שלך לעבוד ללא חיבור לאינטרנט, ומאפשרים לך להציג שעות פתיחה, מספרי טלפון ומידע נוסף למשתמשים חוזרים ללא חיבור לאינטרנט. Workbox היא הגישה המומלצת להוספת קובצי שירות (service worker) לאתרים, כי היא יוצרת הרבה תבניות סטנדרטיות, מאפשרת ליישם בקלות שיטות מומלצות ומונעת באגים קלים שנפוצים כשמשתמשים ישירות ב-API ברמה נמוכה של ServiceWorker.
אם יש עלייה משמעותית בשימוש באתר, כדאי לבדוק אם יש לכם הגנה הולמת מפני התקפות DDoS, כי עכשיו האתר שלכם עשוי להיות אטרקטיבי יותר. פרטים נוספים מספקים נפוצים: AWS, Azure, Cloudflare ו-Google Cloud.

הנחיות נוספות זמינות במאמר אמינות הרשת.

נגישות

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

נגישות היא עבודת צוות, ולכל אחד יש תפקיד למלא. בתור התחלה, כדאי לקרוא את המדריך של Google Accessibility for Teams ואת המדריך לצוות של U.S. Digital Service. במדריכים האלה מוסבר מה כל חבר צוות (מנהלי מוצרים, מהנדסים, מעצבים, בקרת איכות וכו') יכול לתרום.
לבצע בדיקת נגישות כדי לקבוע מה עובד היטב ומה טעון שיפור. תוכלו להיעזר בתוספי הדפדפן WAVE כדי לבצע בדיקת נגישות ידנית של האתר.
כדאי לקרוא את מדריכי הנגישות כדי להבין טוב יותר נושאים ספציפיים, כמו ניווט באמצעות מקלדת ותמיכה בקורא מסך.
אתם יכולים להריץ ביקורת של Lighthouse כדי לאתר בעיות נגישות נפוצות. הדוח כולל גם רשימה של בדיקות ידניות שאפשר לבצע כדי לשפר את תפעול האתר. שימו לב שציון נגישות של 100 לא מבטיח שהאתר יהיה נגיש. יש הרבה בעיות חשובות ש-Lighthouse לא יכול לבדוק בסגנון אוטומטי, ולכן עדיין חשוב לבצע בדיקות ידניות. כלי ביקורת אוטומטיים אחרים כוללים את WAVE API ואת תוסף AXE.
משלימים את הקורס Start Build Accessible Web Applications Today (הקורס הנוכחי בנושא אפליקציות אינטרנט נגישות ב-egghead.io) או קראו את קורס נגישות האינטרנט ב-Udacity.
צפו בפלייליסט A11ycast כדי לקבל טיפים מהירים נוספים על נושאי נגישות ספציפיים.

זהות, אבטחה ופרטיות

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

להבין למה כל האתרים צריכים להיות מוגנים באמצעות HTTPS, ולא רק אלה שמטפלים בנתונים רגישים של פרטים אישיים מזהים.
כדאי לעבור לספק אירוח שמשתמש ב-HTTPS כברירת מחדל, או להשתמש ב-Let's Encrypt או שירותים דומים כדי להפעיל HTTPS בשרתים.
הסבר על קובצי cookie מסוג SameSite יעזור לכם להגביר את אבטחת השימוש בקובצי cookie. שימו לב שאכיפה של סימון קובצי cookie מסוג SameSite הוחזרה באופן זמני.

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

נוחות השימוש, ממשק המשתמש וחוויית המשתמש

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

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

אופטימיזציה עבור מנועי חיפוש

אנשים מחפשים מידע קריטי שקשור לבריאות ולעבודה. חשוב לוודא שכל מנועי החיפוש יכולים למצוא את האתרים שלכם. בדיקות ה-SEO של Lighthouse יכולות לעזור לכם לזהות בעיות בסיסיות. ניתן לעקוב אחר הבלוגים הרשמיים של מנועי החיפוש כדי לקבל את ההנחיות והעדכונים האחרונים: Google, Bing, Baidu, DuckDuckGo, Yandex. פוסטים אחרונים הקשורים לנגיף הקורונה:

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

ביצועים

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

תמונות הן הסיבה המובילה לריבוי נתונים באינטרנט. יכול להיות שתוכלו לצמצם משמעותית את השימוש ברוחב הפס של האתר על ידי אופטימיזציה של התמונות. Squoosh הוא כלי פשוט לדחיסת תמונות בקוד פתוח, שיכול לעזור לדחוס תמונות במהירות.
הפעילו את WebPageTest או את Lighthouse כדי לגלות את ההזדמנויות המובילות לשיפור הביצועים.
מפעילים דחיסת טקסט כדי לצמצם את גודל הרשת של משאבי הטקסט. בדרך כלל מדובר בזכייה קלה בביצועים שדורשת השקעה טכנית מינימלית.
קראו את המאמר תיקון מהירות האתר בכל הפונקציות כדי ללמוד איך לשתף פעולה עם מחלקות אחרות ולרכוש אותן.
השתמשו בטעינה מדורגת רגילה לתמונות כדי לצמצם למינימום את הבקשות לתמונות שאנשים לעולם לא יראו. תאימות הדפדפן אינה 100%, אבל אפשר להתייחס לתכונה כשיפור הדרגתי. במילים אחרות, אם דפדפן מסוים לא תומך בטעינה מדורגת רגילה, התמונה אמורה להיטען כרגיל.
בדקו אם יש באתר סקריפטים של בדיקות A/B או של התאמה אישית שאפשר לטעון באופן יותר אסינכרוני, או אם יש בסקריפטים פונקציונליות לא קריטית שאפשר להשבית. בדרך כלל אי אפשר לטעון סקריפטים של בדיקות A/B והתאמה אישית באופן אסינכרוני באופן מלא, כי צריך להריץ אותם לפני שתוכן הדף נטען, אבל יכול להיות שתהיה הזדמנות לטעון חלקים מהסקריפטים בצורה אסינכרונית יותר. במאמר נתיב עיבוד קריטי ניתן להבין את ההבדל הבסיסי בין סקריפטים סינכרוניים (שנקראים גם סקריפטים חוסמי עיבוד) באופן כללי לבין זמן הטעינה של הדף, ולהחליט אם לתת עדיפות לסקריפטים שחוסמים את העיבוד על פני זמן הטעינה של הדף, או להיפך.
קוד של צד שלישי מהווה כמחצית מכל הבקשות לרוב האתרים. כדאי לבצע optimizing, להסיר או להשבית באופן זמני קוד של צד שלישי שלא חיוני להפעלת האתר.
אם לגרסאות התכונה יש עדיפות נמוכה, זה יכול להיות הזמן המושלם לנקות את הנתונים. מסירים תגים ממנהלי התגים, מנקים קובצי CSS ו-JS נפוצים ומסירים תכונות או קוד שהוצאו משימוש. תוכלו להיעזר בכרטיסייה 'כיסוי' בכלי הפיתוח ל-Chrome ובכיתה Coverage ב-Puppeteer כדי לזהות קוד שלא נמצא בשימוש.

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

Hero image מאת NASA ב-UnFlood