مشکل اینجا برای سرعت سایت زمانی است که می خواهید یک فایل ویدیویی بزرگ یا با وضوح بالا بارگذاری کنید. با یک اتصال کمتر از ستاره ای، تنها چیزی که اتفاق می افتد مقدار زیادی بافر است، در حالی که مرورگر سعی می کند به اندازه کافی فایل را برای شروع پخش بارگذاری کند. برای FID خیلی بد است.
گاهی اوقات اسکرول ها یا چرخ فلک ها حاوی فیلم هایی هستند، به عنوان جایگزینی برای تصاویر.
با سرعت ویدیو و سایت، اصول اصلی که باید به خاطر بسپارید عبارتند از:
- از راه اندازی سرور به طور خاص برای مقابله با فایل های رسانه ای بزرگ (CDN) استفاده کنید.
- اطمینان حاصل کنید که فایل ویدیویی در حال بارگیری با سرعت اتصال مشتری سازگار است (جریان‌سازی تطبیقی)
- فایل های ویدیویی خود را تا حد امکان کوچک نگه دارید بدون اینکه کیفیت را به خطر بیندازید (بیت متغیر)
- قبل از بارگیری فایل ویدئویی واقعی، عناصر بصری اصلی را بارگیری کنید (تحویل ناهمزمان)
- از بارگیری ویدیوها با سایر دارایی های صفحه جلوگیری نکنید (جاوا اسکریپت مسدود کننده رندر)
این دقیقاً همان کاری است که افزونه Yoast Video SEO برای وردپرس برای سرعت بخشیدن به تحویل ویدیو انجام می دهد و تضمین می کند که حتی بزرگترین فایل های ویدیویی تأثیر منفی بر تجربه کاربر یا عملکرد جستجو ندارند.
نکته 5: ویدیوها را پشت JS مسدودکننده رندر قرار ندهید
این امر سرعت سایت و تاخیر ورودی اول را مختل می کند، اما نه تنها این. همچنین می تواند به سئو آسیب برساند، زیرا Googlebot قادر به یافتن و فهرست بندی ویدیو نیست.
چطور می تونی این کار رو بکنی؟ خوب، می توانید خودتان آن را با استفاده از MPEG-DASH تنظیم کنید. یا به یک پلتفرم میزبانی ویدیوی شخص ثالث مانند YouTube یا Wistia بروید. اینها از جریان تطبیقی به عنوان بخشی از پشته فناوری تحویل ویدیو استفاده می کنند.
نکته 3: فایل های ویدیویی را با نرخ بیت متغیر صادر کنید
این نیز احتمالاً بدترین راه برای افزودن ویدیو است. این دستور العملی برای بافر تضمینی به محض زدن دکمه پخش توسط کاربر است. و این بر تاخیر ورودی اول (FID) تأثیر منفی می گذارد. چنین تنظیماتی به مرورگر نیاز دارد که یک فایل ویدیویی کامل (غیر بهینه) را مستقیماً از سرور شما با کلیک بارگیری کند، بدون اینکه برای مشکلات سرور، موقعیت مکانی کاربر یا سرعت اتصال ضعیف هیچ گونه بازگشتی نداشته باشد.
نکته دیگر برای بهبود سرعت پخش این است که در طول فرآیند صادرات، فایل(های) ویدیو را تا حد امکان کاهش دهید. نرخ بیت متغیر (VBR) وسیله‌ای برای فشرده‌سازی است که میزان بیت فایل ویدیویی را بر اساس پیچیدگی رنگ‌ها و حرکت در هر نقطه از ویدیو تنظیم می‌کند. هدف از این کار پایین نگه داشتن آن تا حد امکان بدون کاهش قابل توجه کیفیت است. به عنوان مثال، دنباله‌های اکشن سریع با رنگ‌های پیچیده بسیار به نرخ بیت بسیار بالاتری نیاز دارند. اما یک هد مکالمه ثابت‌تر که روی یک پس‌زمینه ساده گرفته می‌شود، با نرخ بیت پایین‌تر به خوبی کار می‌کند. یک VBR به کمپرسور ویدیوی شما اجازه می‌دهد تا به‌طور هوشمندانه در مورد نرخ بیت مناسب در حین صادرات تصمیم بگیرد که باعث کاهش حجم فایل ویدیو می‌شود.
اگر از AJAX برای بارگیری پخش کننده ویدیوی خود استفاده می کنید، هنگامی که مشتری اسکریپت اولیه اصلی را ارائه می کند (معمولا فقط چند صد کیلوبایت)، همه چیزهای دیگر می توانند به سرعت در پس زمینه بارگذاری شوند. در همین حال مشتری بقیه عناصر صفحه را رندر می کند. علاوه بر این، فریم و تصویر بندانگشتی پخش‌کننده ویدیو – عناصری که قبل از کلیک کاربر روی پخش قابل مشاهده هستند – می‌توانند فوراً اولویت‌بندی و بارگیری شوند تا تأثیر مثبتی بر حیاتی وب اصلی داشته باشند.
پخش خودکار ویدیوها همچنان محبوب است، به ویژه به عنوان پس‌زمینه در صفحات اصلی. اما اجرای ضعیف آنها می تواند باعث بروز همه نوع مشکلات سرعت سایت شود.
VBR را می توان با رایج ترین کدک های ویدئویی وب مانند VP9 و h.264 استفاده کرد.
نکته 3: از پخش خودکار ویدیوها خودداری کنید (یا حداقل آنها را کوتاه و بی صدا نگه دارید)
برای اطلاعات بیشتر در مورد سرعت سایت، بقیه پست ها و راهنماهای ما را بررسی کنید!
هدف این است که از پخش یکپارچه ویدیو، بدون بافر، و زمان بارگذاری سریع با همه دارایی‌ها در وب‌سایت خود اطمینان حاصل کنید. در این تلاش، شما باید به نکات حیاتی وب خود توجه داشته باشید – بزرگترین رنگ محتوایی (LCP)، تاخیر ورودی اول (FID) و تغییر چیدمان تجمعی (CLS).
نکته 1: ویدیوهای خود را از طریق CDN ارائه دهید
متأسفانه، پلاگین هایی که این موارد را اجرا می کنند اغلب هر تصویر را بر اساس یک ماشه بارگذاری می کنند. این می تواند به این معنی باشد که جاوا اسکریپت دیگر بارگذاری ویدیو را مسدود می کند. وقتی این اتفاق می‌افتد، به جای اینکه قبل از اینکه کاربر یا خزنده به آنجا برسد، باید تمام دارایی‌های ویدیویی را به‌طور کامل بارگیری کند، وقتی ویدیو در چرخ فلک ظاهر می‌شود.
هیچ راه حلی وجود ندارد – فایل های ویدیویی بزرگ هستند. در واقع آنقدر بزرگ است که 81 درصد از ترافیک اینترنت را در سال 2021 به خود اختصاص داده اند. ویدیوهای بارگذاری شده در هر صفحه وب احتمالاً بزرگترین دارایی یک مرورگر خواهد بود که باید با آن دست و پنجه نرم کند. مگر اینکه با Images JavaScript کاری بسیار غیرعادی (و احتمالاً غیرقابل توصیه) انجام دهید.
تگ
بهترین راه برای مقابله با این مشکل استفاده از چیزی به نام جریان تطبیقی است. پخش جریانی تطبیقی زمانی است که چندین نوع مختلف از یک ویدیو، همه با وضوح و نرخ بیت متفاوت، در اختیار یک سرور قرار می‌گیرد. سپس سرور بهترین نسخه ویدیویی را با کیفیت ارائه می دهد که هر اتصالی می تواند از عهده آن برآید. با پخش جریانی تطبیقی، اگر کاربر شما روی یک دستگاه تلفن همراه در بالای یک تپه راه دور باشد و فقط با یک اتصال 500 کیلوبیت در ثانیه کار می کند، سرور یک ویدیوی SD با نرخ بیتی حدود 300 کیلوبیت در ثانیه به جای تغییرات 4K ایده آل با سرعت 35 مگابیت در ثانیه ارائه می دهد.
فیل ناتینگهام یک استراتژیست بازاریابی است که در سئو ویدیو و استراتژی برند و بهینه سازی موتور جستجو تخصص دارد.
