דלג לתוכן הראשי

​
בדיקת ביצועי האפליקציה שלך

ביצועי האפליקציה שלך משפיעים על מהירות הטעינה והתגובה למשתמשים. ניתן למדוד זאת באמצעות Developer Tools של הדפדפן שלך. מדדי הביצועים העיקריים כוללים: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ו-Interaction to Next Paint (INP).
בדוק תמיד את האפליקציה המפורסמת שלך, ולא את התצוגה המקדימה של הבונה. ציוני הביצועים מדויקים ביותר כאשר בודקים את הגרסה החיה גם במחשב וגם בנייד.
דוגמה ל-Chrome DevTools המציג מדדי ביצועים עבור LCP, CLS ו-INP. דוגמה ל-Chrome DevTools המציג מדדי ביצועים מקומיים עבור LCP, CLS ו-INP.

​
אופטימיזציה של ביצועי האפליקציה שלך

בצע אופטימיזציה של ביצועי האפליקציה שלך על ידי התמקדות במדדי המפתח שמשפיעים על מהירות הטעינה, ההפעלה והתגובה. כל אחד מהם מדגיש היבט שונה של חוויית המשתמש, וניתן להנחות את צ’אט הבינה המלאכותית של Base44 לבצע אופטימיזציה שלהם ישירות.

​
Largest Contentful Paint (LCP)

LCP מודד את הזמן שלוקח לאלמנט הגדול ביותר הנראה (תמונה, טקסט או סרטון) מעל הקו לצוץ. כדי לבצע אופטימיזציה של LCP:
  • שמור על תוכן נראה מעל הקו קל ומהיר.
  • העבר אלמנטים כבדים (סרטונים, iFrames, גריד, רשימות) מתחת לקו.
  • בצע אופטימיזציה ודחיסה של תמונות לפני ההעלאה.
  • השתמש ב-lazy loading עבור תמונות מחוץ למסך.
הנחה את הבינה המלאכותית: “Apply lazy loading to images and videos below the fold.”
הבינה המלאכותית תוסיף אוטומטית את התכונות הנכונות או ייבואים דינמיים.

​
Cumulative Layout Shift (CLS)

CLS מודד תנועה לא צפויה בפריסת האפליקציה שלך בזמן הטעינה. כדי לבצע אופטימיזציה של CLS:
  • הוסף הגדרות גודל: תן לכל תמונה וסרטון גובה ורוחב קבועים כדי למנוע הסטה בעת הטעינה.
  • בצע אופטימיזציה של גופנים מותאמים אישית: השתמש במאפיין font-display: swap; ב-CSS שלך כדי למנוע טקסט בלתי נראה בזמן טעינת הגופן.
  • שמור מקום לתוכן דינמי: הגדר רווחים קבועים לפרסומות, חלונות קופצים, או כל דבר שנטען לאחר הרינדור הראשוני.
  • מזער עדכוני DOM: הגבל שינויי פריסה שנגרמים על ידי סקריפטים אוטומטיים.
הנחה את הבינה המלאכותית:
  • “Set fixed height and width for all media elements.”
  • “Prevent layout shifts while fonts load.”
הבינה המלאכותית תעדכן אוטומטית את סגנונות הרכיב או ה-CSS.

​
Interaction to Next Paint (INP)

INP מודד את מהירות התגובה של האפליקציה שלך ללחיצות, הקשות או קלט מקלדת. כדי לבצע אופטימיזציה של INP:
  • הימנע מסקריפטים ארוכים שמופעלים על ידי פעולות משתמש.
  • דחה או הסר סקריפטים לא חיוניים מהטעינה הראשונית.
  • שמור על פריסות פשוטות ואנימציות מינימליות.
  • עקוב אחר היענות בכרטיסייה Performance.
הנחה את הבינה המלאכותית: “Defer non-critical scripts until after interaction” או “Simplify animations for better responsiveness.” הבינה המלאכותית תבצע אופטימיזציה של סדר ביצוע הקוד והאנימציות במהלך היצירה.

​
Content Delivery Network (CDN) ו-caching

Content Delivery Network (CDN) מספק עותקים של האפליקציה שלך משרתים הקרובים ביותר למיקום המשתמש, ומשפר את זמני הטעינה. Base44 משתמשת אוטומטית ב-Cloudflare CDN ל-caching ולמסירה.
הנחה את הבינה המלאכותית: “Republish my app to refresh cached files.”
פרסום מחדש מפעיל את עדכון מטמון Cloudflare האוטומטי של Base44.
כרגע, לא ניתן לנקות את מטמון ה-CDN ידנית.

​
שאלות נפוצות

לחץ על שאלה למטה כדי ללמוד עוד על אופטימיזציה של ביצועי האתר.
ניתן לבדוק את ביצועי האפליקציה שלך באמצעות Chrome DevTools או Google PageSpeed Insights.כדי לבדוק עם Chrome:
  • בדיקה מהירה:
    1. פתח את האפליקציה המפורסמת שלך.
    2. לחץ עם הלחצן הימני בכל מקום ובחר Inspect.
    3. בחלונית הימנית, Chrome מציג מדדים מקומיים עבור Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ו-Interaction to Next Paint (INP).
      זה נותן לך מבט מיידי על ביצועי העמוד החי שלך.
  • בדיקה מפורטת:
    1. פתח את Chrome DevTools.
    2. לחץ על הכרטיסייה Performance.
    3. לחץ על Record, טען מחדש את העמוד, ועצור את ההקלטה ברגע שהטעינה מסתיימת.
    4. סקור את ציר הזמן המלא של הביצועים, כולל First Contentful Paint (FCP), LCP, ופעילות בחוט הראשי.
כדי לבדוק עם PageSpeed:
  1. עבור אל PageSpeed Insights.
  2. הזן את ה-URL של האפליקציה שלך ולחץ על Analyze.
  3. סקור את הקטעים Insights ו-Diagnostics לדרכים לשפר את ביצועי האפליקציה שלך.
שאף לעמוד או לעבור את הציונים המומלצים האלה לחוויה הטובה ביותר:
  • Largest Contentful Paint (LCP): 2.5 שניות או פחות.
  • Cumulative Layout Shift (CLS): 0.1 או פחות.
  • Interaction to Next Paint (INP): 200 מילי-שניות או פחות.
אמות מידה אלו פועלות לפי הסטנדרטים של Google לביצועי אתר מצוינים ועוזרים להבטיח שהאפליקציה שלך פועלת במהירות, נשארת יציבה ומגיבה בצורה חלקה.
ציון ביצועים נמוך בדרך כלל אומר שאלמנטים מסוימים באתר שלך לוקחים זמן רב יותר לטעון מהצפוי. תוכן כבד מעל הקו, סקריפטים גדולים, או מדיה לא מותאמת הם הגורמים הנפוצים ביותר.כדי לפתור בעיות:
  1. הפעל את האפליקציה שלך דרך Google PageSpeed Insights ובדוק:
    • משאבי חסימת רינדור: העבר סקריפטים ל-async או defer.
    • חבילות JavaScript גדולות: פשט או פצל קוד ספק.
    • תמונות לא מותאמות: דחוס והעלה מחדש.
  2. ב-Chrome DevTools, פתח את הכרטיסייה Network ולחץ על Reload כדי לראות איך הקבצים שלך נטענים בזמן אמת.
    • שים לב לקבצים שלוקחים יותר מ-1–2 שניות לטעון — אלה כנראה מאיטים את האפליקציה שלך.
תיקונים מהירים:
  • העבר סרטונים, רשימות נתונים, או חלקים כבדים מתחת לקו.
  • דחוס ושנה גודל של תמונות לפני ההעלאה.
  • הסר סקריפטים או CSS לא בשימוש.
  • פרסם מחדש את האפליקציה שלך כדי לרענן את מטמון ה-CDN.
הנחה את הבינה המלאכותית: “Optimize my app for faster LCP and INP” או “Reduce above-the-fold load size.” הבינה המלאכותית תחיל אוטומטית lazy loading ודחיית סקריפטים במקומות הרלוונטיים.
  • אחסן סרטונים באופן חיצוני (לדוגמה ב-Vimeo או YouTube).
  • הוסף loading="lazy" לסרטונים מוטמעים או iframes.
  • הצב סרטונים מתחת לקו כדי לתת עדיפות לטקסט ולתמונות.
  • השבת autoplay או loop לסרטוני רקע גדולים.
בדיקות נייד פועלות ברשתות ובמכשירים איטיים יותר, ולכן הציונים בדרך כלל נמוכים יותר ממחשב. התמקד באופטימיזציה של LCP ו-INP עבור נייד תחילה על ידי הפחתת מדיה כבדה, דחיית סקריפטים לא קריטיים, ופישוט פריסות.
דף זה תורגם באמצעות בינה מלאכותית. למידע המדויק והעדכני ביותר, עיין בגרסה האנגלית.