איך לשמור על אתר עתיר וידאו מהיר במיוחד

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

צפו בקייס סטאדי של Logline AI

למה סרטונים מאיטים את האתר שלכם?

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

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

1. דחסו כל קליפ עבור הרשת

• ייצאו את הקובץ בגודל שבו הוא מוצג בפועל. קליפ רקע שמוצג ברוחב של 1920 פיקסלים ממש לא צריך קובץ באיכות 4K. התאימו את קובץ הייצוא לגודל המקסימלי שבו הוא יופיע על המסך.

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

• קצרו את אורך הסרטון. לופ רקע ראשי רק לעיתים נדירות צריך להימשך מעבר ל-10 עד 15 שניות. קליפים קצרים יותר הם קלים יותר ורצים בלופ בצורה חלקה ונקייה יותר.

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

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

2. הגישו קבצי WebM והשאירו את ה-MP4 כגיבוי

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

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

3. טענו את הווידאו רק כשהוא באמת נחוץ (Lazy Load)

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

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

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

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

4. תנו למערכת ניהול התוכן (CMS) לעשות את העבודה הקשה

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

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

רשימת בדיקה חובה לפני ההשקה (Launch)

• בדקו את האתר במכשיר נייד אמיתי על גבי רשת סלולרית. חיבור ה-Wifi של המשרד נוטה להסתיר את רוב בעיות הטעינה של סרטוני הווידאו.

• הריצו בדיקת PageSpeed Insights על דף הבית ועל עמוד פרויקט אחד, ועקבו מקרוב אחר מדד ה-Largest Contentful Paint (LCP).

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

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

שאלות נפוצות

האם סרטוני רקע יפגעו בקידום האורגני (SEO) שלנו?

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

האם כדאי לנו לאחסן את הסרטונים ב-YouTube או ב-Vimeo במקום?

עבור סרטון שהגולש אמור לצפות בו במלואו, עם סאונד וכפתורי שליטה, נגן מוטמע (Embed) הוא פתרון מצוין. אך עבור לופים של רקע ותצוגות מקדימות קצרות, קבצי WebM ו-MP4 באחסון עצמי (Self-hosted) נטענים מהר יותר, נראים נקיים ומקצועיים יותר, וללא ממשק נגן חיצוני או סקריפטים של צד שלישי המאיטים את האתר.

כמה סרטונים יכול עמוד אחד להכיל?

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

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

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

צפו בקייס סטאדי של Logline AI

תיאום שיחת היכרות