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