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