מהירות טעינת אתר

[ש.סגל]

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

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

מבדיקת האתר ב- webpagetest מתברר שאכן רוב זמן הטעינה של האתר נובע מטעינת התמונות.

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

השאלה היא האם יש פתרון כלשהו.

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

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

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

אשמח לקבל מידע בעניין הזה.

 

[s976]

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

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

 

[wmw]

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

 

[ש.סגל]

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

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

תודה על התשובה.
כן, הקטנתי את התמונות על ידי save for web.
תוכל לתת לי דוגמה לשימוש ב AJAX שיכול להטעין את התמונות בשלב מאוחר יותר?
ולגבי שינוי ה SRC של התמונות- מה הכוונה? ואיך זה יכול להועיל?

 

[ש.סגל]

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

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

 

[Nahum]

אם הבנתי את wmw נכון, הוא התכוון לפונקציית ()load. של jquery.

מה שאתה צריך לעשות, זה ליצור שני קבצי html - אחד כולל את העמוד הראשון בלבד והשני את כל השאר.
לאחר שטענת את העמוד הראשון במלואו, תוכל באמצעות הפונקציה הנ"ל לטעון את הקובץ השני.

(כמובן שאת הפונקציה אתה צריך להפעיל בתגית-body עם האיוונט onload.)

 

[s976]

תודה על התשובה.
כן, הקטנתי את התמונות על ידי save for web.
תוכל לתת לי דוגמה לשימוש ב AJAX שיכול להטעין את התמונות בשלב מאוחר יותר?
ולגבי שינוי ה SRC של התמונות- מה הכוונה? ואיך זה יכול להועיל?

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

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

 

[mat]

תשים את הurl של התמונה במאפיין כזה data-src ואז תכתוב את הסקריפט הזה בjquery.

$(function(){
    $("[data-src]").each(function(i,e){
       $(e).attr("src",$(e).attr("data-src"));
    });
});

דוגמא שהכנתי
http://jsfiddle.net/F7x5H/1/

 

[s976]

תשים את הurl של התמונה במאפיין כזה data-src ואז תכתוב את הסקריפט הזה בjquery.

$(function(){
    $("[data-src]").each(function(i,e){
       $(e).attr("src",$(e).attr("data-src"));
    });
});

דוגמא שהכנתי
http://jsfiddle.net/F7x5H/1/

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

 

[Shia]

יש לוורדפרס תוסף לעיכוב טעינה של תמונות עד לשעת הגלילה לאותו מיקום בדף.
נראה לי שקוראים לו Lazy Load

 

[ש.סגל]

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

נכון, התמונות נטענות על ידי תוסף מיוחד של גלריה.
אז איך אפשר להגיע ל SRC של התמונות?

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

ועוד משהו- מישהו הציע לי להשתמש ב Cloudflare כדי לשפר את מהירות טעינה.
האם לדעתכם זה יכול להועיל? (הבנתי שאין להם שרתים בארץ)

תודה לכולם.