סרטון באתר יכול להכביד על העמוד יותר מכל תמונה, גם אם אף גולש לא לוחץ עליו. מדדתי כמה בדיוק: הטמעה רגילה של סרטון YouTube מורידה כ-1.1 מגה ו-17 קבצים, עוד לפני שמישהו לחץ על פליי. כאן אני מסביר איך משאירים את הסרטון בעמוד בלי לשלם את המחיר הזה.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
כמה שוקלת הטמעה של YouTube
בניתי עמוד בדיקה עם סרטון YouTube אחד בהטמעה הרגילה, ומדדתי אותו בטלפון מדומה. העמוד הוריד 17 קבצים מ-9 שרתים שונים, בסך הכל כ-1,158 קילובייט. מתוכם כ-867 קילובייט הם סקריפטים של הנגן, שהדפדפן צריך גם להוריד וגם להריץ.
אותו עמוד, עם תמונת הכיסוי של הסרטון במקום הנגן, הוריד קובץ אחד של 33 קילובייט. בדקתי גם את הגרסה של YouTube שלא שומרת עוגיות, וההבדל במשקל היה אפסי. היא משנה את הפרטיות, לא את המהירות.
הפתרון: תמונה שהופכת לסרטון
במקום הנגן, העמוד מציג את תמונת הכיסוי עם כפתור פליי, והנגן האמיתי נטען רק כשהגולש לוחץ. גוגל ממליצה על השיטה הזו לכל הטמעה כבדה של צד שלישי, וגם PageSpeed Insights מסמן הטמעות שאפשר להחליף כך.
בוורדפרס לא צריך לכתוב קוד כדי להחליף כל סרטון באתר בתמונה כזו. WP Rocket ו Perfmatters עושים את זה בלחיצה אחת. אחרי ההפעלה כדאי לבדוק בלשונית הרשת שהסקריפטים של הנגן לא נטענים עד הלחיצה, ושתמונת הכיסוי עצמה במשקל סביר.
סרטון שמתנגן לבד בראש העמוד
סרטון רקע קצר בראש העמוד הוא מקרה אחר, כי הוא צריך להתנגן מיד. כאן עדיף קובץ וידאו שמאוחסן באתר עצמו, קצר ובלי סאונד, בפורמט MP4 או WebM. קובץ של כמה שניות בלופ יכול לשקול כמה מאות קילובייט בלבד, אם דוחסים אותו נכון.
כשיש סרטון באתר בראש העמוד, הדבר החשוב ביותר הוא תמונת הפוסטר, שמוצגת עד שהווידאו מתחיל. היא בדרך כלל האלמנט הגדול ביותר במסך הראשון, ולכן היא שקובעת את זמן הופעת התוכן הראשי. אותה טוענים מוקדם, בפורמט מודרני ובמשקל נמוך, ולא את קובץ הווידאו.
שלוש הגדרות שמונעות בעיות
גובה ורוחב קבועים
לכל נגן ולכל תמונת כיסוי מגדירים יחס גובה ורוחב מראש. בלי זה, הדפדפן לא יודע כמה מקום לשמור, וכשהנגן נטען הטקסט שמתחתיו קופץ למטה. זו אחת הסיבות הנפוצות לקפיצות בעמוד, וקל מאוד למנוע אותה.
טעינה עצלה למה שמתחת לקו הגלילה
סרטון באמצע העמוד או בסופו לא צריך להיטען בכניסה. לפי ההנחיות של web.dev, סרטון שמתנגן לבד אפשר לטעון רק כשהגולש מתקרב אליו, וסרטון עם כפתור פליי אפשר להגדיר כך שהדפדפן לא יוריד ממנו כלום מראש.
playsinline בטלפון
סרטון רקע בטלפון צריך את ההגדרה playsinline, אחרת חלק מהדפדפנים פותחים אותו במסך מלא או לא מתחילים לנגן אותו בכלל. יחד איתה מגדירים muted ו loop, כי דפדפנים מאפשרים ניגון אוטומטי רק לסרטון מושתק.
שאלות ותשובות על וידאו ומהירות
האם להעלות סרטונים לאתר או ל YouTube?
סרטון ארוך עם סאונד עדיף ב YouTube או Vimeo, עם תמונת כיסוי במקום הנגן. הם מתאימים את האיכות לחיבור של כל גולש, וזה כמעט בלתי אפשרי לעשות לבד. סרטון רקע קצר ומושתק עדיף לאחסן באתר עצמו, כדי שיתנגן מיד.
למה GIF מונפש לא עדיף על וידאו?
כי GIF שוקל הרבה יותר מקובץ וידאו באותו אורך ובאותה איכות, לפעמים פי כמה. לאנימציה קצרה עדיף קובץ MP4 או WebM מושתק עם ניגון אוטומטי ולופ. לגולש זה נראה אותו דבר, והעמוד יורד מהר יותר.
האם נגן וידאו משפיע על זמן התגובה ללחיצות?
כן, אם הוא נטען בכניסה. הסקריפטים שלו רצים בזמן שהגולש כבר מנסה ללחוץ ולגלול, ומעכבים את התגובה. תמונת כיסוי במקום הנגן פותרת גם את זה, כי אין קוד של נגן שרץ עד שהגולש בוחר לצפות.
איך יודעים אם הסרטונים מאטים את העמוד?
פותחים את העמוד ב Chrome, לוחצים F12, עוברים ללשונית הרשת ומרעננים. אם מופיעות בקשות ל youtube.com לפני שלחצתם על משהו, הנגן נטען מראש. גם PageSpeed Insights מציג הטמעות של צד שלישי שאפשר להחליף בתמונה.
הצעד הבא
יש לכם סרטונים באתר ואתם לא בטוחים כמה הם עולים לכם? שלחו לי את הכתובת. אבדוק מה כל סרטון מוריד בכניסה, אם תמונת הכיסוי מעכבת את ראש העמוד, ומה ההגדרה הנכונה לכל אחד.
