איך התאמנו מודל AI בדפדפן למכשיר המשתמש והצלנו את המכירות

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

על האייפון 17 פרו של המעצב במשרד? זה עבד מדהים. הדמו רץ חלק ב-60 פריימים בשנייה.

אבל בשטח, התרחשה קטסטרופה.

הבעיה: 40% מהגולשים חוו תקיעות, קריסות ונטישה

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

הסיבה פשוטה. הדפדפן ניסה להוריד ולהריץ מודל AI במשקל 1.2GB ישירות לזיכרון ה-RAM של המכשיר. בסמארטפונים עם 3GB או 4GB של זיכרון עבודה, הדפדפן פשוט קרס או קפא לחלוטין.

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

הניסיון הראשון שנכשל: זיהוי User-Agent ישן

בשלב הראשון ניסינו לפתור את זה כמו בשנה שעברה: קריאת מחרוזת ה-User-Agent של הדפדפן.

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

התוצאה הייתה כישלון מוחלט.

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

הפתרון: טעינה אדפטיבית עם Client Hints ו-Device-Memory API

הפתרון האמיתי הגיע כששילבנו שני תקני דפדפן מתקדמים: Client Hints ברמת כותרות ה-HTTP, ו-Device-Memory API ברמת ה-JavaScript.

הגדרה · Device-Memory API

תכונת דפדפן המאפשרת לקוד JS לקבל הערכה של כמות זיכרון ה-RAM במכשיר המשתמש (למשל: 0.5, 1, 2, 4, 8GB).

במקום להנחית מודל ענק אחד על כולם, חילקנו את מנוע ה-AI ל-3 גרסאות שונות:

1. גרסת Lite (0.5GB–2GB RAM): מודל מוקטן מאוד (Quantized 4-bit) שמבצע עיבוד בסיסי ומהיר.
2. גרסת Standard (4GB–6GB RAM): מודל מאוזן באיכות גבוהה.
3. גרסת Pro (8GB+ RAM): מודל מלא עם תוצאות פוטו-ראליסטיות וזמן תגובה מיידי.

הנה איך שזה נראה בקוד הבדיקה הפשוט שהטמענו:

// בדיקת זיכרון המכשיר וליבות המעבד
const ram = navigator.deviceMemory || 4; // ברירת מחדל 4GB
const cores = navigator.hardwareConcurrency || 4;

function getAiModelConfig(ram, cores) {
  if (ram <= 2 || cores <= 4) {
    return { model: 'model-lite-4bit.onnx', renderQuality: 'low' };
  }
  if (ram <= 6) {
    return { model: 'model-standard-8bit.onnx', renderQuality: 'medium' };
  }
  return { model: 'model-pro-full.onnx', renderQuality: 'high' };
}

כששרת האתר מקבל את ה-Client Hints כבר בבקשת ה-HTTP הראשונה (Sec-CH-UA-Full-Version-List, Sec-CH-Device-Memory), הוא אפילו לא שולח את קובצי ה-JS הכבדים למכשיר החלש.

התוצאות: קריסות אפסיות וזינוק בהמרות

השינוי היה מיידי.

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

💡

חוויית משתמש חכמה ב-2026 היא לא לתת לכולם את האפקט הכי כבד — אלא להתאים את מורכבות ה-AI לכל מכשיר בדיוק לפי מה שהחומרה שלו מסוגלת לעבד.

שיעור ההמרה הכללי באתר עלה ב-28%. הנטישה במכשירים חלשים צנחה מ-52% ל-8% בלבד.

סיכום ולקח

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

אל תתפתו להטמיע מודלי ענק מבלי לבדוק מראש למי אתם מגישים אותם. שימוש נכון ב-Client Hints וב-Device-Memory API שומר על אתר מהיר, יציב וממיר לכל גולש.