כולנו יודעים שסרטונים מוכרים. אבל סרטונים גם מפילים את מהירות הטעינה של האתר. עכשיו, אנחנו לא רוצים להגיד "אל תשימו סרטונים באתר", אנחנו רוצים אתר מהיר, יציב, וריספונסיבי עם סרטון. לכן הכנתי לכם טיפים מקצועיים לשמירת מהירות האתר ומדדי Core Web Vitals והטמעה נכונה של סרטונים באתר שלכם.
למה סרטונים מאטים עמודים (ואיזה מדדים נפגעים)
LCP גבוה בהירו סקשיין
עם החלטם לשים בסקשיין הירו שלכם סרטון או תמונת כיסוי גדולה, רוב הזמן זה יהפוך לאלמנט ה-Largest Contentful Paint. תמונת כיסוי ללא אופטימיזציה (או פריים סרטון) ינפחו את מדד LCP, במיוחד בפלאפונים.
טעויות נפוצות שגורמות לכך זה תמונות כיסוי ששוקלות מעל 200KB, preloading של הקובץ סרטון, או הטמעה צד שלישית שחוסמת את הטעינה לפני שההירו סקשיין עולה.
CLS גבוה מסרטון/כיסוי ללא הגדרה
מדד Cumulative Layout Shift תמיד יזנק עם תטמיעו בעמוד סרטון או תמונת כיסוי ללא טווח מוגדר. אם טווח הגובה/רוחב של הקובץ מדיה לא מוגדר מראש, ברגע שהוא יטען כל מבנה העמוד יקפוץ, מה שפוגע מאוד ב-UX ובטווח הרחוק גם במיקומים של העמוד בגוגל.
INP מנגינה אוטומטית/נגני JS כבדים
נגינה אוטומטית לא נחוצה, נגני מדיה שמשתמשים בהרבה קוד JavaScript, אנליטיקה, והטמעות צד שלישי יכולים לדרדר את ה- Interaction to Next Paint. כשהגולש לוחץ על העמוד תהליך הטעינה עדיין עובד ברקע על ה-JS של הנגן מדיה, ומעכב את הריספונסיביות של העמוד.
טיפים להטמעה נכונה של סרטונים
שיטות הטמעה נכונות
לא כל סרטון צריך להטמיע בצורה אחת:
- העלאה מקומית של MP4/WebM (סרטונים קצרים): אידיאלי לסרטונים קצרים של 5-20 שניות או לופים שרצים בלי סאונד. כדאי לשמור על משקל קובץ נמוך, בטווח של 200-800KB.
- הטמעה צד שלישי (YouTube/Vimeo): הטמעה "לייט" שמתאימה לאנליטיקס ושיפור נראות העמוד בתוצאות בגוגל (סרטון יוטיוב שמוטמע נכון יכול להופיע בתוצאות של גוגל ולקשר מיד לאתר שלכם), אבל לא מביאה עימה את כל עומס ה-JS שלה. השתמשו בתמונת כיסוי שמציינת מקום הפעלה שתפעיל את טעינת הסרטון רק אחרי שיקליקו עליו גולשים.
כלל מנחה: אם הסרטון קצר, מושתק, ומוטמע – הטמעה מקומית. אם הוא בעיקר לצורך תצוגה וגילוי – צד שלישי, אבל לייט.
שימוש נכון בטעינה עצלה (Lazyload)
הסרטון הכי טוב זה סרטון שלא נטען עד שמפעילים אותו.
- כיסוי "לחץ להפעלה" – שימו מעל הסרטון תמונת כיסוי עם כפתור "פליי". רק אחרי שלחצו על הכפתור יכנס לפעולה הסרטון/הצד שלישי.
- IntersectionObserver – לסרטונים שנמצאים Below the fold הגדירו שהסרטון יטען רק לאחר שהגולש גולל לסרטון.
- טעינה דחויה/אסינכרונית של JS – אל תחסמו את טעינת ה-JavaScript, תגדירו שהם יטענו אחרי הטעינה הראשונית או אחרי אינטרקצית גולש.
- טיפ לאתרי וורדפרס – השתמשו בתוספי אופטימיזציה (כמו Perfmatters או WPRocket) שמחליפים iframes לתמונות כיסוי כברירת מחדל.
Preload ונגינה אוטומטית
- Preload – אין צורך לטעון מראש סרטונים, עדיף שיטענו רק כשצריך אותם.
- נגינה אוטומטית – מומלץ להשתמש בנגינה אוטומטית רק כשזה סרטון קצר, בלי סאונד, ונחוץ. אחרת, עדיף שיהיה click-to-play.
- סרטונים במובייל – עדיף להוסיף את הפקודה playsinline כדי להמנע מהחלפה לסרטון במסך מלא, מה שפוגע במדד INP ו-UX.
- טעינת תמונת כיסוי – תעשו preload לתמונת הכיסוי (ולא לסרטון) אם זה הולך ליהיות אלמנט ה-LCP שלכם. השתמשו בקוד <link rel="preload" as="image"> לתמונה בסקשיין הירו אם זה Above the fold.
תמונות כיסוי שלא פוגעות ב-LCP
- תמונות כיסוי בסקשיין הירו צריכות ליהיות לא יותר מ-100KB בפורמט WebP/AVIF עם הגדרות מימדים נכונות.
- לא להשתמש בתמונות GIF! רוב הזמן תמונות GIF דורשות יותר משאבים מסרטון.
- דאגו להוסיף Alt Text לתמונות כיסוי. התמונות האלה הן תמונות מתאנדקסות, ואלט טקסט מפורט תומך בנגישות וSEO של תמונות.
סיכום
אתם לא חייבים לוותר על קבצי וידאו רק בשביל שיהיה לכם עמודים מהירים וידידותיים לקידום אתרים. דחו כל מה שאתם יכולים (לחץ להפעלה, Lazy load), שמרו ממדים כדי להפחית CLS, וטענו מראש רק את מה שעוזר לטעון קודם (כיסוי, לא הסרטון). עקבו אחר תוצאות עם משתמשים אמיתיים ובצעו שינויים רלוונטים. אם תעבדו נכון, האתר שלכם יראה נהדר, ירגישו מהיר וחלק וישמר על Core Web Vitals בנוחות ירוקה – בדיוק מה שמנועי חיפוש וגולשים רוצים לראות. מקווה שעזרתי לכם 😊
