דף זה תורגם על ידי Cloud Translation API.

שיטות מומלצות לשימוש בהטמעות של צד שלישי

סקירה כללית של שיטות לטעינה יעילה של הטמעות פופולריות של צדדים שלישיים.

אדי אוסמאני

קייטי המפניוס

לינה סוהוני

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

תוכן של צד שלישי יכול להשפיע על הביצועים של דף בדרכים רבות. היא יכולה לחסום את העיבוד, להתמודד עם משאבים קריטיים אחרים שקשורים לרשת ולרוחב הפס או להשפיע על המדדים של מדדי הליבה לבדיקת חוויית המשתמש באתר. הטמעות של צדדים שלישיים עשויות גם לגרום לשינויי פריסה בזמן שהן נטענות. המאמר הזה עוסק בשיטות מומלצות לשיפור הביצועים, שאפשר להשתמש בהן כשטוענים הטמעות של צד שלישי, שיטות טעינה יעילות ואת הכלי Layout Shift Terminator שעוזר לצמצם את התנודות בפריסה של הטמעות פופולריות.

מהי הטמעה

הטמעה של צד שלישי היא כל תוכן שמוצג באתר שלך: * לא נוצר על ידך * מוצג משרתים של צד שלישי

מוצגים מספר הטמעות מחוץ למסך, שניתן לבצע טעינה מדורגת שלהן

לרוב, השימוש בהטמעות נעשה במקומות הבאים: * אתרים שקשורים לספורט, לחדשות, לבידור ולאופנה משתמשים בסרטונים כדי להרחיב תוכן טקסטואלי. * ארגונים שיש להם חשבונות פעילים ב-Twitter או במדיה חברתית מטמיעים עדכונים מחשבונות אלה בדפי האינטרנט שלהם, כדי ליצור עניין בקרב אנשים רבים יותר וליצור איתם קשר. * דפים של מסעדות, פארקים ואולמות אירועים מטמיעים לעתים קרובות מפות.

הטמעות של צדדים שלישיים נטענות בדרך כלל ברכיבי <iframe> בדף. ספקי צד שלישי מציעים קטעי קוד HTML שבדרך כלל מורכבים מ-<iframe> שמושך דף שמורכב מתגי עיצוב, מסקריפטים ומגיליונות סגנונות. ספקים מסוימים משתמשים גם בקטע קוד של סקריפט שמחדיר באופן דינמי <iframe> כדי למשוך תוכן אחר. מצב כזה עלול להכביד על ההטמעות של צד שלישי ולהשפיע על הביצועים של הדף, כי הוא עלול לעכב את התוכן של הצד הראשון.

ההשפעה של הטמעות צד שלישי על הביצועים

הרבה הטמעות פופולריות כוללות יותר מ-100KB של JavaScript, לפעמים אפילו עד 2MB. לוקח להם יותר זמן לטעון את ה-thread הראשי ולשמור על העומס בזמן הביצוע. כלים למעקב אחר ביצועים, כמו Lighthouse ו-Chrome DevTools עוזרים למדוד את ההשפעה של הטמעות של צד שלישי על הביצועים.

צמצום ההשפעה של קוד של צד שלישי הביקורת של Lighthouse מציגה רשימה של ספקי צד שלישי שמשמשים את הדף, עם גודל וזמן החסימה של ה-thread הראשי. הביקורת זמינה דרך כלי הפיתוח ל-Chrome בכרטיסייה Lighthouse.

מומלץ לבדוק מדי פעם את ההשפעה של ההטמעה וקוד צד שלישי על הביצועים, מפני שהטמעת קוד המקור עשויה להשתנות. אפשר לנצל את ההזדמנות הזו כדי להסיר כל קוד מיותר.

הפחתת ההשפעה של קוד של צד שלישי

השיטות המומלצות בטעינה

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

סדר הסקריפטים

בדף שמעוצב היטב, התוכן העיקרי של צד ראשון יהיה המוקד של הדף, ואילו הטמעות צד שלישי יוצבו בעמודות צדדיות או יופיעו אחרי התוכן של הצד הראשון.

כדי להעניק את חוויית המשתמש הטובה ביותר, התוכן הראשי צריך להיטען במהירות ולפני כל תוכן תומך אחר. לדוגמה, הטקסט של חדשות בדף חדשות צריך להיטען לפני הטמעות של עדכון Twitter או מודעות.

בקשות להטמעות של צד שלישי עלולות להפריע לטעינה של תוכן מאינטראקציה ישירה, לכן יש חשיבות למיקום של תג הסקריפט של צד שלישי. סקריפטים יכולים להשפיע על רצף הטעינה כי בניית ה-DOM מושהית בזמן הפעלת הסקריפטים. מציבים תגי סקריפטים של צד שלישי אחרי התגים מאינטראקציה ישירה (First-Party) ומשתמשים ב-async או ב-defer כדי לטעון אותם באופן אסינכרוני.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

טעינה מדורגת

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

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

טעינה מדורגת מובנית של `<iframe>`

בהטמעות של צדדים שלישיים שנטענות דרך רכיבי <iframe>, אפשר להשתמש בטעינה מדורגת ברמת הדפדפן כדי לדחות את הטעינה של iframes מחוץ למסך עד שהמשתמשים גוללים לידם. מאפיין הטעינה של <iframe> זמין ב-Chrome מגרסה 77 ואילך, והושק גם בדפדפנים אחרים מבוססי Chromium.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

מאפיין הטעינה תומך בערכים הבאים:

lazy: מציין שהדפדפן צריך לדחות את טעינת ה-iframe. הדפדפן יטען את ה-iframe כשהוא יתקרב לאזור התצוגה. יש להשתמש באפשרות הזו אם ה-iframe מתאים לטעינה מדורגת.
eager: טוען את ה-iframe באופן מיידי. יש להשתמש באפשרות הזו אם ה-iframe לא מועמד טוב לטעינה מדורגת. אם המאפיין loading לא צוין, זוהי התנהגות ברירת המחדל — מלבד מצב Lite.
auto: הדפדפן יקבע אם לטעון את המסגרת הזו בהדרגה.

דפדפנים שלא תומכים במאפיין loading מתעלמים ממנו, אז אפשר להחיל טעינה עצלה מקורית כשיפור הדרגתי. בדפדפנים שתומכים במאפיין הזה עשויים להיות הטמעות שונות של הסף מרחק מתצוגה באזור התצוגה (המרחק שבו ה-iframe מתחיל להיטען).

בהמשך מפורטות כמה דרכים שבהן אפשר לטעון iframes בצורה מדורגת בשביל סוגים שונים של הטמעות.

סרטוני YouTube: כדי לטעון באופן הדרגתי iframe של נגן וידאו של YouTube, יש לכלול את המאפיין loading בקוד ההטמעה שסופק על ידי YouTube. טעינה מדורגת של התוכן המוטמע של YouTube יכולה לחסוך כ-500KB בטעינת הדף הראשונית.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

מפות Google: כדי לטעון באופן הדרגתי iframe של מפות Google, יש לכלול את המאפיין loading בקוד של הטמעת ה-iframe שנוצר על ידי Google Maps הטמעה API. בהמשך מוצגת דוגמה לקוד עם placeholder עבור מפתח Google Cloud API.

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

ספריית עצלנים

מכיוון שדפדפנים משתמשים בגבולות התצוגה ממרחק התצוגה של ההטמעה, בנוסף לאותות כמו סוג החיבור האפקטיבי ומצב Lite, כדי לקבוע מתי יש לטעון את ה-iframe, הטעינה המדורגת המקורית עשויה להיות לא עקבית. אם אתם צריכים שליטה טובה יותר בערכי הסף של המרחק או שאתם רוצים לספק חוויית טעינה מדורגת בדפדפנים שונים, אתם יכולים להשתמש בספרייה התאמה אישית של גדלים.

lazysizes הוא כלי טעינה עצל מהיר וידידותי ל-SEO, שמיועד גם לתמונות וגם למסגרות iframe. לאחר הורדת הרכיב, ניתן להשתמש בו עם iframe כדי להטמיע את YouTube באופן הבא.

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

באופן דומה, ניתן להשתמש באובייקטים עצלנים עם iframes עבור הטמעות של צד שלישי אחר.

הערה: כשמשתמשים בהגדרות עצלנות נעשה שימוש ב-Intersection Overer API כדי לזהות מתי רכיב הופך לגלוי.

שימוש בחבילת הגלישה ב-Facebook

Facebook מספק סוגים שונים של יישומי פלאגין חברתיים שניתן להטמיע. התוכן הזה כולל פוסטים, תגובות, סרטונים ואת לחצן הלייק הפופולרי ביותר. כל יישומי הפלאגין כוללים הגדרה עבור data-lazy. הגדרת הערך true מבטיחה שהפלאגין ישתמש במנגנון הטעינה המושהית של הדפדפן על ידי הגדרת מאפיין ה-iframe loading="lazy".

טעינה מדורגת של פידים של Instagram

Instagram מספק חסימה של תגי עיצוב וסקריפט כחלק מההטמעה. הסקריפט מחדיר <iframe> לדף. טעינה מדורגת של <iframe> זה יכולה לשפר את הביצועים, כי גודל ההטמעה יכול להיות גדול מ-100KB. יישומי פלאגין רבים של Instagram לאתרי WordPress כמו WPZoom ו-Elfsight מאפשרים טעינה מדורגת.

החלפת הטמעות בחזיתות

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

facade הוא אלמנט סטטי שנראה דומה לצד השלישי המוטמע בפועל, אך אינו פונקציונלי, ולכן, מיסוי נמוך יותר על טעינת הדף. בהמשך מפורטות מספר אסטרטגיות לטעינה אופטימלית של הטמעות כאלה, תוך שמירה על ערך מסוים למשתמש.

שימוש בתמונות סטטיות כחזיתות

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

יצירת צילום מסך של הצומת

כלי הפיתוח מצלמים את התמונה כ-png, אבל אפשר גם להמיר אותו ל-WebP format for better performance.

שימוש בתמונות דינמיות כחזיתות

השיטה הזו מאפשרת ליצור תמונות שתואמות להטמעה אינטראקטיבית בזמן הריצה. ריכזנו כאן כמה מהכלים שמאפשרים ליצור גרסאות סטטיות של הטמעות בדפים.

API סטטי של מפות Google: שירות ה-API הסטטי של מפות Google יוצר מפה המבוססת על הפרמטרים של כתובת האתר הכלולים בבקשת HTTP רגילה ומחזיר את המפה כתמונה שניתן להציג בדף האינטרנט שלכם. כתובת ה-URL צריכה לכלול את מפתח ה-API של מפות Google, וחייבת להיות ממוקמת בתג <img> שבדף בתור המאפיין src.

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

קטע הקוד הבא מציג קוד לתמונה שבה המקור מוגדר לכתובת URL של API סטטי של מפות Google. המידע הזה נכלל בתג קישור שמבטיח שאפשר לגשת למפה עצמה על ידי לחיצה על התמונה. (הערה: מאפיין מפתח ה-API לא נכלל בכתובת ה-URL)
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
צילומי מסך ב-Twitter: בדומה לצילומי מסך של מפות, הקונספט הזה מאפשר להטמיע באופן דינמי צילום מסך של Twitter במקום הפיד הפעיל. Tweetpik הוא אחד מהכלים שיכולים לשמש לצילום צילומי מסך של ציוצים. ממשק ה-API של Tweetpik מקבל את כתובת האתר של הציוץ ומחזיר תמונה עם התוכן שלה. ממשק ה-API מקבל גם פרמטרים להתאמה אישית של הרקע, הצבעים, הגבולות והמידות של התמונה.

ניתן להשתמש באפשרות 'לחיצה לטעינה' כדי לשפר חזיתות

קונספט של 'לחיצה לטעינה' משלב טעינה עצלה עם חזיתות. הדף נטען בהתחלה עם החזית. כשהמשתמש יוצר אינטראקציה עם ה-placeholder הסטטי בלחיצה עליו, ההטמעה של הצד השלישי נטענת. הוא נקרא גם הדפוס ייבוא באינטראקציה וניתן להטמיע אותו באמצעות השלבים הבאים.

בטעינת הדף: הדף כולל רכיב חזית או רכיב סטטי.
בהעברת עכבר: מתבצע חיבור מראש אל ספק ההטמעה של הצד השלישי.
בלחיצה: החזית תוחלף במוצר של הצד השלישי.

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

אפשר לבנות חזית בהתאמה אישית מסוג 'קליק לטעינה' באמצעות התבנית ייבוא באינטראקציה או להשתמש באחת מהחזיתות הבאות של קוד פתוח שזמינות לסוגים שונים של הטמעות.

חזית של YouTube

Lite-youtube-embed היא חזית מומלצת לנגן YouTube, שנראית כמו הנגן האמיתי אבל מהירה יותר פי 224. כדי להשתמש בו, אפשר להוריד את הסקריפט ואת גיליון הסגנונות ולאחר מכן להשתמש בתג <lite-youtube> ב-HTML או ב-JavaScript. אפשר לכלול פרמטרים מותאמים אישית של הנגן שנתמכים ב-YouTube באמצעות המאפיין params.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
בהמשך מוצגת השוואה בין הגרסה lite-youtube-embed לבין ההטמעה עצמה.

הטמעה בגרסת lite של YouTube

הטמעה של YouTube

חזיתות דומות אחרות שזמינות לנגני YouTube ו-Vimeo הן lite-youtube, lite-vimeo-embed ו-lite-vimeo.
חזית של ווידג'ט של Chat

React-live-chat-loader טוען לחצן שנראה כמו הטמעת צ'אט, ולא כמו ההטמעה עצמה. ניתן להשתמש בו במגוון פלטפורמות של ספקי צ'אט, כמו Intercom, Help Scout, Messenger ועוד. הווידג'ט הדומה קל יותר מהווידג'ט של הצ'אט והוא נטען מהר יותר. ניתן להחליף אותו בווידג'ט הצ'אט עצמו כשהמשתמש מעביר את העכבר מעל הלחצן או לוחץ עליו, או אם הדף לא היה פעיל במשך זמן רב. במקרה לדוגמה של Postmark, מוסבר איך החברה הטמיעה כלי לטעינה בזמן אמת של הצ'אט ואיך לשפר את הביצועים שהם השיגו.

הסרה או החלפה של הטמעות בקישורים

אם תגלו שהטמעות מסוימות של צד שלישי מניבות ביצועי טעינה נמוכים, ואי אפשר להשתמש באחת מהשיטות שלמעלה, הדבר הפשוט ביותר הוא להסיר את ההטמעה לחלוטין. כדי שהמשתמשים עדיין יוכלו לגשת לתוכן המוטמע, אפשר לספק קישור לתוכן הזה באמצעות target="_blank" כדי שהמשתמש יוכל ללחוץ ולהציג אותו בכרטיסייה אחרת.

יציבות הפריסה

טעינה דינמית של תוכן מוטמע יכולה לשפר את ביצועי הטעינה של הדף, אבל לפעמים היא יכולה לגרום לתזוזה לא צפויה של תוכן הדף. מצב כזה נקרא 'שינוי פריסה'.

מכיוון שחשוב לשמור על יציבות חזותית כדי להבטיח חוויית משתמש חלקה, התכונה Cumulative Layout Shift (CLS) מודדת את התדירות שבה השינויים האלה מתרחשים ועד כמה הם מפריעים.

ניתן להימנע מתנודות בפריסה על ידי שמירת מקום במהלך טעינת הדף עבור רכיבים שאמורים להיטען באופן דינמי מאוחר יותר. הדפדפן יכול לקבוע את המקום שיש לשמור אם הוא יודע את הרוחב והגובה של האלמנטים. כדי לוודא זאת, אפשר לציין את המאפיינים width ו-height של iframes, או להגדיר גודל קבוע לרכיבים סטטיים שבהם תיטען ההטמעה של הצד השלישי. לדוגמה, במסגרת iframe עבור הטמעת YouTube יש לציין רוחב וגובה באופן הבא.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

הטמעות פופולריות כמו YouTube, מפות Google ו-Facebook מספקות את קוד ההטמעה עם מאפייני גודל. עם זאת, יכול להיות שיש ספקים שלא כוללים את האפשרות הזו. לדוגמה, קטע הקוד הזה אינו מציין את מידות ההטמעה שמתקבלת.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

אפשר להשתמש בכלי הפיתוח כדי לבדוק את המכשיר שהוחדר iframeאחרי עיבוד הדף. כפי שאפשר לראות בקטע הקוד הבא, גובה ה-iframe שהוזן קבוע והרוחב מצוין באחוזים.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

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

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

סיום פריסה של Shift

הטמעות של צד שלישי משמיטות לעיתים קרובות את המימדים (רוחב, גובה) של התוכן הסופי שהן מעבדות, ולכן הן עלולות לגרום לתנודות משמעותיות בפריסה של הדף. לפעמים קשה לטפל בבעיה הזו בלי לבדוק ידנית את הגדלים הסופיים באמצעות כלי פיתוח במגוון גדלים שונים של אזורי תצוגה.

עכשיו יש כלי אוטומטי, Layout Shift Terminator, שיכול לעזור לך להפחית שינויי פריסה מהטמעות פופולריות, כמו Twitter, Facebook וספקים אחרים.

סיום פריסה של Shift:

טוען את צד הלקוח המוטמע ב-iframe.
משנה את גודל ה-iframe לגדלים פופולריים שונים של אזורי תצוגה.
בכל אזור תצוגה פופולרי, המערכת מתעדת את מידות ההטמעה כדי ליצור מאוחר יותר שאילתות מדיה ושאילתות קונטיינרים.
יוצר wrapper של גובה מינימלי מסביב לתגי העיצוב של ההטמעה באמצעות שאילתות מדיה (ושאילתות קונטיינר) עד לתחילת ההטמעה (לאחר מכן מסירים את הסגנונות בגובה מינימלי).
יוצר קטע קוד מותאם להטמעה שניתן להעתיק/להדביק אותו במקום שבו כללתם את ההטמעה בדף במקרים אחרים.

אפשר לנסות את הכלי Layout Shift Terminator, ולשלוח משוב ב-GitHub. הכלי במצב בטא והוא צריך להשתפר עם הזמן.

סיכום

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