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