שיפור מהירות אתר, גישה נכונה לכל הפריטים/מוצרים.

[אבי 203]

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

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

2. במקום לבקש בכל עמוד קטגוריה, את כל הפריטים עם סינון, אני שומר אותם בדפדפן (session או memory), ואז משבץ אותם. (עשיתי בדיקה, לקבל את memory השמור כבר, ולפרק אותו עם Json ולשבץ, לא ראיתי שזה ממהר את הטעינה. אולי אפילו להיפך.) (יש לזה גם מינוס שמוגבלת כמות הזיכרון, לבנתיים מספיק למה שיש)

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

תודה

[יוסף בן שמעון]

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

במקום לבקש בכל עמוד קטגוריה, את כל הפריטים עם סינון, אני שומר אותם בדפדפן (session או memory), ואז משבץ אותם. (עשיתי בדיקה, לקבל את memory השמור כבר, ולפרק אותו עם Json ולשבץ, לא ראיתי שזה ממהר את הטעינה. אולי אפילו להיפך.) (יש לזה גם מינוס שמוגבלת כמות הזיכרון, לבנתיים מספיק למה שיש)

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

[dovid]

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

אם אתה חושב ש"קל לדבר" ושאין לך כלים לזה, נסה אותנו פה בפורום כפי שעשית עד היום ביחס לwix..

[אבי 203]

@dovid תודה. הספרייה של corvid מוגבלת כך שתמיד אני נעזר בספרייה הכללית, אלא שלא לפי הסדר, רק למה שאני נזקק, לא תמיד יש את הזמן ללמידה לפי הסדר, אבל מקבל את המלצתך, וקורא יותר בר זיק למשל..

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

let queryResults;
let queryResults3;
let queryResults4;
$w.onReady(async function () {
	queryResults = await wixData.query("muzarim")
		.descending("seder")
		.limit(10)
		.find();
	$w('#repeater1').data = queryResults.items;
	// await repeater1_itemReady()
	console.log("1");
	loadRemaining();
});

// var dataa = [];
async function loadRemaining() {
	queryResults3 = await wixData.query("muzarim")
		.descending("seder")
		.skip(10)
		.find();
	let data = $w('#repeater1').data;
	let data3 =  await data.concat(queryResults3.items);
console.log(data3);

	  return data3.items.map((item) => {
    return {
      "_id": item._id,
      "sem": item.sem,
      "mkt": item.mkt,
      "imeg": item.imeg,
	  "mehir": item.mehir,
      "link1": item["link-muzarim-sem"],
	  "link2":item["link-muzarim-editor-_id"]
    };
  } );
	  var myJSON = JSON.stringify(data3)
	memory.setItem("data3", myJSON)

}

export function repeater1_itemReady($item, itemData, index) {
	$item('#mehir').text = itemData.mehir;
	$item('#sem').text = itemData.sem;
	$item('#mkt').text = itemData.mkt;
	$item('#image9').src = itemData.imeg;
	$item('#button114').link = itemData["link-muzarim-sem"];
	$item('#button102').link = itemData["link-muzarim-editor-_id"];
	}

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

let key = event.key;
	if (key === "Enter") {
		let muzarim = memory.getItem("data3")
		var muzarim2 = JSON.parse(muzarim);
		const data = muzarim2.filter(d => d.mkt.includes($w('#mktinput').value));
		$w('#repeater1').data = data;
{

תודה בכל אופן.