למה ומה?
בטח שמעתם על כל הדברים הטובים שטכניקות של Progressive Web App יכולות לעשות באתר שלכם. יכול להיות שתיתקלו במפתיעות כדי לעבור ישר ולהוסיף תכונות של PWA. זה אפשרי, אבל תהיה לכם גישה טובה יותר אם תתחילו קודם להשתמש ב-PWA.
הקסם של PWA לא יפתור בעיות כמו חסימת JavaScript או תמונות מתנפחות. לאפליקציות PWA צריך להיות בסיס חזק.
איך בודקים את תקינות האתר? השלב הראשון הוא לבצע בדיקה אובייקטיבית, כדי לבדוק מה עובד טוב ואיפה (ואיך) אפשר לשפר.
בדיקה של האתר או האפליקציה תעזור לכם ליצור חוויה עמידה ואיכותית, ולהדגיש ניצחונות מהירים שאפשר לממש עם כניסות מינימליות. הבדיקה גם נותנת לכם בסיס לפיתוח מבוסס-נתונים. האם שינוי שיפר את המצב? מה ההבדל בין האתר שלך לבין המתחרים? אתם מקבלים מדדים שמאפשרים לתת עדיפות למאמץ, והוכחות מעשיות שאפשר להשוויץ בהן אחרי שביצעתם את השיפורים.
אם יש לכם רק 5 דקות...
מריצים את Lighthouse בדף הבית ושומרים את נתוני הדוח. אתם מקבלים ערך בסיס כמותי ורשימת משימות לביצוע שיפורים בביצועים, בנגישות, באבטחה וב-SEO.
אם יש לכם רק 30 דקות...
כנראה ש-Lighthouse הוא עדיין המקום הטוב ביותר להתחיל בו, אבל אחרי קצת יותר זמן אפשר גם לתעד תוצאות מכלים אחרים:
- חלונית האבטחה של כלי הפיתוח ל-Chrome: שימוש ב-HTTPS.
- חלונית הרשת של Chrome DevTools: תזמוני הטעינה, גודל המשאבים ומספר הבקשות ל-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: הקהל שלכם, התוכן שלכם ועיצוב לכל המשתמשים.
מיהם בעלי העניין שלכם ומה סדר העדיפויות שלהם? השינוי ישפיע על המבנה, ההצגה והשיתוף של נתוני הביקורת.
אם אין אפשרות לבדוק את כל האתר, כדאי לבדוק את ניתוח הנתונים של הדפים כדי להבין במה כדאי להתמקד. שיעורי עזיבה גבוהים, משך ביקור קצר בדף ודפי יציאה לא צפויים יכולים לעזור לכם להבין לאן להתחיל. בדומה לכך, מדדים עסקיים כמו עלויות אירוח, קליקים על מודעות והמרות. לקבל סקירה כללית של בעלי עניין לגבי הנתונים שחשובים להם.
בדיקה, הקלטה, תיקון, חזרה
כדאי לתעד את מצב האתר לפני שמבצעים שינויים, כדי לאתר בעיות ולהגדיר נקודת התחלה לשיפורים או רגרסיות. כך תקבלו נתונים להצדיק ולתגמל את מאמצי הפיתוח.
הקפידו לבדוק מספר סוגי דפים באתר, ולא רק את דף הבית. באפליקציות בדף יחיד, מומלץ לבדוק רכיבים, מסלולים ותהליכי חוויית משתמש שונים, ולא רק את חוויית הטעינה הראשונה.