לפני שאוספים מדדי ביצועים לצורך בדיקה של האתר, יש כמה בדיקות שאפשר לבצע כדי לזהות תיקונים קלים ותחומים שצריך להתמקד בהם.
בדיקת תוקף: ארכיטקטורה וקוד
כדאי לתקן באגים פשוטים ככל האפשר ולהסיר נכסים וקוד לא נחוצים לפני מדידת הביצועים, אבל חשוב לשמור תיעוד מראש של הבעיות והתיקונים. השיפורים האלה עדיין יכולים להיות חלק מעבודת הביקורת.
הארכיטקטורה והנכסים של האתר
האם אפשר להסיר בקלות ממאגר הקוד ומהאתר, כמו דפים, תוכן או נכסים אחרים מדור קודם שלא נמצאים בשימוש? מחפשים דפים שאינם בשימוש, תבניות מיותרות, תמונות שלא בשימוש וקוד וספריות שלא בשימוש.
שגיאות זמן ריצה
בודקים אם יש שגיאות שדווחו במסוף הדפדפן. לא אמורים להיות :).
Linting
האם יש שגיאות בקוד ה-HTML, ה-CSS או ה-JavaScript? איתור שגיאות בקוד (linting) של תהליך העבודה יכול לעזור בשמירה על איכות הקוד ומניעת רגרסיות. מומלץ להשתמש ב-HTMLHint, ב-StyleLint וב-ESLint, שניתן להשתמש בהם כיישומי פלאגין לעריכת קוד, או להריץ אותם משורת הפקודה בתהליכי עבודה ובכלי אינטגרציה רציפים כמו Travis.
תמונות וקישורים מנותקים
יש הרבה כלים לבדיקת קישורים מנותקים בזמן ה-build ובזמן הריצה, כולל תוספים ל-Chrome (התוסף הזה טוב) וכלי צמתים כמו Broken Link Checker.
יישומי פלאגין
יישומי פלאגין כמו Flash ו-Silverlight עלולים להוות סיכון אבטחה, התמיכה בהם
הוצאה משימוש,
והם לא פועלים בנייד. השתמשו ב-Lighthouse כדי לחפש יישומי פלאגין.
בדיקה באמצעות מגוון מכשירים והקשרים
אין כמו לעודד אנשים אמיתיים לבדוק את האתר שלך באמצעות מכשירים אמיתיים, מספר דפדפנים והקשרי קישוריות שונים.
חלק מהבדיקות האלה הן סובייקטיביות יחסית, אבל הן יכולות לזהות בעיות שמשפיעות על הביצועים. לדוגמה, קישורים מנותקים, שהם מבזבזים זמן ומרגישים לא מגיבים. טקסט לא קריא קשה לקריאה.
בדיקה במכשירים שונים
כדאי לנסות אזור תצוגה וגדלים שונים של חלונות. השתמשו לפחות בנייד אחד ובמחשב אחד. אם אפשר, כדאי לנסות את האתר במכשיר נייד בעל מפרט נמוך עם מסך קטן. האם הטקסט קריא? האם יש תמונות מנותקות? אפשר לשנות את מרחק התצוגה? האם משטחי המגע גדולים מספיק? האם הוא איטי?
האם תכונות כלשהן לא מגיבות? ליצור צילום מסך או סרטון של התוצאות.
בדיקות בפלטפורמות שונות
לאילו פלטפורמות אתם מטרגטים? צריך לבדוק את הדפדפנים ומערכות ההפעלה שהמשתמשים שלכם משתמשים בהם, עכשיו ובעתיד.
קישוריות
בדיקה בכמה סוגים של רשתות יעד: מחוברת, Wi-Fi וסלולרית. אפשר להשתמש בכלי הדפדפן כדי לדמות מגוון תנאי רשת.
מכשירים
יש להקפיד לנסות את האתר באותם מכשירים שבהם משתמשים המשתמשים. בתמונה הבאה מוצג אותו הדף בשני טלפונים שונים.
במסך הגדול, הטקסט קטן אבל קריא. במסך הקטן יותר, הדפדפן מעבד את הפריסה בצורה נכונה, אבל הטקסט לא קריא, גם כשהתצוגה מוגדלת. המסך מטושטש ויש בו 'גווני צבעים' (לבן לא נראה לבן) כך שהתוכן פחות קריא.
ממצאים פשוטים כאלה יכולים להיות חשובים הרבה יותר מאשר נתוני ביצועים מטושטשים!
רוצה לנסות את ממשק המשתמש וחוויית המשתמש?
נגישות, נוחות השימוש וקריאות
על מנת להבטיח שהתוכן והפונקציונליות של האתר יהיו נגישים לכולם, צריך להבין את מגוון המשתמשים.
בעזרת Lighthouse וכלים אחרים אפשר לבדוק בעיות נגישות ספציפיות, אבל אין כמו בדיקות בעולם האמיתי. נסו לקרוא, לנווט ולהזין נתונים במגוון תרחישים: לדוגמה, בחוץ באור שמש או ברכבת. בקשו ממגוון חברים, בני משפחה וקולגות לנסות את האתר שלכם. נסו לצרוך תוכן באמצעות קורא מסך, כמו VoiceOver ב-Mac או NVDA ב-Windows.
מידע נוסף על הטמעה ובדיקה של נגישות זמין בקורס Udacity בנושא נגישות ובמאמר בנושא Web Fundamentals איך לבצע בדיקת נגישות.
שומרים תיעוד של בדיקת הנגישות. רוב הסיכויים שתוכלו לבצע שיפורים פשוטים שמועילים לכל המשתמשים.
בעיות בסיסיות בחוויית המשתמש ובממשק המשתמש
אינטראקציות לא עובדות כמו שצריך, עומס על אלמנטים בחלונות ובאזורי תצוגה קטנים יותר, יעדי הקשה קטנים מדי, תוכן לא קריא, גלילה קודרת... פתחו מספר דפים באתר, נסו את הניווט ואת כל הפונקציונליות העיקרית. מתעדים.
תמונות, אודיו ווידאו
כדאי לבדוק אם יש יותר תוכן, יחס גובה-רוחב שגוי, חיתוך באיכות נמוכה ובעיות איכות.
בדיקות סובייקטיביות של ממשק המשתמש
יכול להיות שלא כל התוצאות האלה רלוונטיות, אבל שינויים פשוטים יכולים להקל על ארגון הקוד מחדש:
- האם "מה אפשר לעשות כאן?" ברור מיד עם פתיחת האתר?
- האם אתם מעדיפים לצרוך תוכן ולעקוב אחר קישורים?
- האם יש היררכיות או נתיבים חזותיים – או שלכולם יש אותו משקל חזותי?
- האם הפריסה עמוסה?
- האם יש יותר מדי גופנים?
- האם יש תמונות או תוכן אחר שניתן להסיר?
- עיצוב התוכן חשוב לא פחות מעיצוב הממשק. האם תוכן הטקסט והתמונות באתר שלך מתאים להקשר של נייד ומחשב? האם אפשר למחוק משהו? כתיבה לנייד.