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