למה ולמה?
בטח שמעת על כל הדברים הטובים שטכניקות Progressive Web App יכולות לעשות לאתר שלך. ייתכן שתתפתו להתחיל מיד ולהוסיף תכונות של PWA. זה אפשרי, אבל יהיה לכם הרבה יותר טוב אם תקבלו קודם 'מוכן ל-PWA'.
אף הפעלת קסם של PWA לא תפתור בעיות כמו חסימת JavaScript או תמונות נפוחות. לאפליקציות ה-PWA נדרש בסיס יציב.
אז איך אתם בודקים את תקינות האתר? השלב הראשון הוא בדיקה של האתר: בדיקה אובייקטיבית של מה שעובד היטב והיכן (ואיך) אפשר לשפר.
ביצוע ביקורת לאתר או לאפליקציה יעזור לכם ליצור חוויה עמידה וביצועים טובים, ולהדגיש יתרונות מהירים שאפשר ליישם עם חתימה מינימלית. הביקורת גם מספקת בסיס לפיתוח מבוסס-נתונים. האם שינוי שיפר את המצב? מה ההבדל בין האתר שלכם למתחרים? תקבלו מדדים כדי לתעדף את המאמצים, וראיות מוחשיות שתוכלו להשוויץ בהן אחרי שיפור הביצועים.
אם יש לך רק 5 דקות...
מפעילים את Lighthouse בדף הבית ושומרים את נתוני הדוח. אתם מקבלים שורת בסיס כמותית ורשימת משימות לשיפור הביצועים, הנגישות, האבטחה וה-SEO.
אם יש לך רק 30 דקות...
סביר להניח ש-Lighthouse הוא עדיין המקום הטוב ביותר להתחיל בו, אבל אם תקדישו קצת יותר זמן תוכלו לתעד גם תוצאות מכלים אחרים:
- חלונית האבטחה של כלי הפיתוח ל-Chrome: שימוש ב-HTTPS.
- חלונית הרשת של כלי הפיתוח ל-Chrome: זמני טעינה, גדלים של משאבים ומספר הבקשות ל-HTML, ל-CSS, ל-JavaScript, לתמונות, לגופנים ולקבצים אחרים.
- מנהל המשימות של Chrome: אם האתר שלך משתמש באופן רציף במעבד (CPU) או יותר זיכרון מאשר אפליקציות אחרות, ייתכן שיהיה עליך לתקן דליפות זיכרון, הרצת משימות או בעיות בטעינת משאבים. חשוב לבדוק את האתר במכשירים שמייצגים את המשתמשים.
- WebPagetest: ביצועים לפי מיקומים וסוגי חיבור שונים, שמירה במטמון, זמן עד לבייט ראשון ושימוש ב-CDN.
- Pagespeed Insights: ביצועי הטעינה, עלות הנתונים ושימוש במשאבים, כולל נתוני דוח חוויית המשתמש ב-Chrome, שמדגישים נתונים סטטיסטיים של ביצועים מהעולם האמיתי.
- כרטיס מידע על מהירות ומחשבון ההשפעה על הכנסות: השוואה בין מהירות האתר לעומת אפליקציות אחרות והערכת ההזדמנות הפוטנציאלית להכנסה לשיפור מהירות האתר.
חשוב לבדוק את האתר כמו שמשתמש רואה אותו בפעם הראשונה. פתחו את האתר בחלון פרטי, או השתמשו בכלי הדפדפן כדי להשבית את השמירה במטמון ולנקות את האחסון. כך ניתן להבטיח שכל נכס מאוחזר מהרשת ולא מהמטמון המקומי, כך שתקבלו תמונה מדויקת של הביצועים בטעינה הראשונה.
אין כמו בדיקות בעולם האמיתי – נסו את האתר שלכם עם אותם מכשירים וקישוריות כמו המשתמשים שלכם ותעדו את החוויה הסובייקטיבית שלכם.
אם מגוון הכלים מבלבל...
כדאי לעיין במדריך שלנו: How To Think about Speed Tools.
אם אין עוד משהו, אפשר פשוט להשתמש ב-Lighthouse כדי לבדוק:
- HTTPS: כל אתר צריך לספק את כל הנכסים ב-HTTPS.
- הגדרות השרת: כדי לאפשר לדפדפן לשמור משאבים במטמון, שרת האינטרנט או ה-CDN שלכם צריכים להשתמש בדחיסה בצורה נכונה, להשתמש ב-HTTP/2 ולכלול כותרות מתאימות.
- רכיבי סקריפט שאפשר להעביר לחלק התחתון של הדף או לתת להם מאפיין אסינכרוני או דחייה.
- JavaScript וספריות שאפשר להסיר.
- CSS לא בשימוש ו-JavaScript שאינם בשימוש.
- תמונות שניתן לשמור עם דחיסה גבוהה יותר או עם פיקסלים קטנים יותר.
- קובצי תמונה קטנים יותר, למשל תמונות שנשמרו בפורמט PNG.
קהל, בעלי עניין, הקשר
העדיפויות לארגון מחדש תלויות בקהל, בתוכן ובפונקציונליות שלכם. מי מבקר באתר שלך? למה הם משתמשים בו ואיך הם משתמשים בו? מהו תקציב הביצועים? אם אתם לא בטוחים בתשובה לשאלות האלה, נסו את הדרישות לאיסוף תרגילים ממשאבי ההדרכה של PWA: הקהל שלך, התוכן שלך ועיצוב לכל המשתמשים.
מיהם בעלי העניין שלך ומה סדר העדיפויות שלהם? זה ישפיע על המבנה של נתוני הביקורת, ההצגה שלהם והשיתוף שלהם.
אם אין לכם אפשרות לבדוק את כל האתר, תוכלו לבדוק את ניתוח הנתונים של הדפים כדי להבין במה כדאי להתמקד. שיעורי עזיבה גבוהים, זמן ביקור נמוך ודפי יציאה בלתי צפויים יכולים להיות סימן טוב להתחלה. באופן דומה, מדדים עסקיים כמו עלויות אירוח, קליקים על מודעות והמרות. לקבל סקירה כללית מבעלי עניין על הנתונים שחשובים להם.
בדיקה, הקלטה, תיקון, חזרה
מתעדים את מצב האתר לפני שמבצעים שינויים, כדי לאתר בעיות ולהגדיר נקודת התחלה לשיפורים או לרגרסיות. כך יש נתונים שיכולים להצדיק את מאמצי הפיתוח ולתגמל אותם.
חשוב לבדוק כמה סוגי דפים באתר ולא רק בדף הבית. באפליקציות בדף יחיד, כדאי לבדוק רכיבים שונים, מסלולים ותהליכי UX, ולא רק את חוויית הטעינה הראשונה.