عملکرد ویدئو

در ماژول قبلی ، برخی از تکنیک‌های عملکرد مرتبط با تصاویر را یاد گرفتید، که یک نوع منبع پرکاربرد در وب هستند که می‌توانند پهنای باند قابل توجهی را مصرف کنند، اگر مراقب بهینه‌سازی آن‌ها و در نظر گرفتن دیدگاه کاربر نباشند.

با این حال، تصاویر تنها نوع رسانه ای نیستند که معمولاً در وب مشاهده می شوند. ویدئوها یکی دیگر از انواع رسانه های محبوب هستند که اغلب در صفحات وب استفاده می شوند. قبل از بررسی برخی از بهینه سازی های ممکن، مهم است که ابتدا نحوه عملکرد عنصر <video> را درک کنید.

فایل های منبع ویدیو

هنگام کار با فایل های رسانه ای، فایلی را که در سیستم عامل خود می شناسید ( .mp4 ، .webm ، و موارد دیگر) ظرف نامیده می شود. یک ظرف حاوی یک یا چند جریان است. در بیشتر موارد، این جریان ویدئو و صدا خواهد بود.

شما می توانید هر جریان را با استفاده از یک کدک فشرده کنید. برای مثال، یک video.webm می‌تواند یک محفظه WebM باشد که حاوی یک جریان ویدیویی فشرده‌شده با استفاده از VP9 ، و یک جریان صوتی فشرده‌شده با استفاده از Vorbis باشد.

درک تفاوت بین کانتینرها و کدک ها مفید است، زیرا به شما کمک می کند تا فایل های رسانه ای خود را با استفاده از پهنای باند بسیار کمتر فشرده کنید، که منجر به کاهش زمان بارگذاری کلی صفحه می شود، و همچنین به طور بالقوه بزرگترین رنگ محتوای صفحه (LCP) را بهبود می بخشد. متریک کاربر محور و یکی از سه هسته اصلی وب .

یکی از راه های فشرده سازی فایل های ویدئویی استفاده از FFmpeg است:

ffmpeg -i input.mov output.webm

دستور قبلی - اگرچه در هنگام استفاده از FFmpeg ساده است - فایل input.mov را می گیرد و با استفاده از گزینه های پیش فرض FFmpeg یک فایل output.webm را خروجی می دهد. دستور قبلی یک فایل ویدئویی کوچکتر را خروجی می دهد که در همه مرورگرهای مدرن کار می کند. بهینه سازی گزینه های ویدیویی یا صوتی ارائه شده توسط FFmpeg می تواند به شما کمک کند تا اندازه فایل ویدیو را حتی بیشتر کاهش دهید. به عنوان مثال، اگر از عنصر <video> برای جایگزینی یک GIF استفاده می کنید، باید آهنگ صوتی را حذف کنید:

ffmpeg -i input.mov -an output.webm

اگر می‌خواهید چیزها را کمی بیشتر تغییر دهید، FFmpeg هنگام فشرده‌سازی ویدیوها بدون استفاده از رمزگذاری نرخ بیت متغیر، پرچم -crf را ارائه می‌دهد. -crf مخفف عبارت Constant Rate Factor است. این تنظیمی است که سطح فشرده سازی را تنظیم می کند و این کار را با پذیرش یک عدد صحیح در یک محدوده مشخص انجام می دهد.

کدک هایی مانند H.264 و VP9 از پرچم -crf پشتیبانی می کنند، اما استفاده از آن بستگی به کدک مورد استفاده شما دارد. برای اطلاعات بیشتر، در مورد ضریب نرخ ثابت برای رمزگذاری ویدیوها در H.264 و همچنین کیفیت ثابت هنگام رمزگذاری ویدیوها در VP9 مطالعه کنید.

فرمت های متعدد

هنگام کار با فایل‌های ویدئویی، تعیین فرمت‌های چندگانه به عنوان یک بازگشت برای مرورگرهایی عمل می‌کند که از همه فرمت‌های مدرن پشتیبانی نمی‌کنند.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

از آنجایی که همه مرورگرهای مدرن از کدک H.264 پشتیبانی می‌کنند ، MP4 می‌تواند به عنوان نسخه جایگزین برای مرورگرهای قدیمی استفاده شود. نسخه WebM می تواند از کدک جدیدتر AV1 استفاده کند که هنوز به طور گسترده پشتیبانی نمی شود، یا کدک VP9 قبلی که بهتر از AV1 پشتیبانی می شود، اما معمولاً به خوبی AV1 فشرده نمی شود.

ویژگی poster

تصویر پوستر یک ویدیو با استفاده از ویژگی poster در عنصر <video> اضافه می‌شود، که قبل از شروع پخش، به کاربران نشان می‌دهد که محتوای ویدیو ممکن است چه باشد:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

پخش خودکار

طبق بایگانی HTTP، 20 درصد از ویدیوها در سراسر وب دارای ویژگی autoplay هستند. autoplay زمانی استفاده می‌شود که یک ویدیو باید فوراً پخش شود - مانند زمانی که به عنوان پس‌زمینه ویدیو یا جایگزینی برای GIFهای متحرک استفاده می‌شود.

GIF های متحرک می توانند بسیار بزرگ باشند، به خصوص اگر فریم های زیادی با جزئیات پیچیده داشته باشند. این غیرمعمول نیست که GIF های متحرک چندین مگابایت داده مصرف می کنند، که می تواند باعث کاهش قابل توجهی در پهنای باند شود که برای منابع مهم تر صرف می شود. به طور کلی باید از فرمت های تصویر متحرک اجتناب کنید، زیرا معادل های <video> برای این نوع رسانه بسیار کارآمدتر هستند.

اگر پخش خودکار ویدیو برای وب سایت شما الزامی است، می توانید از ویژگی autoplay مستقیماً در عنصر <video> استفاده کنید:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

با ترکیب ویژگی poster با Intersection Observer API، می‌توانید صفحه خود را طوری پیکربندی کنید که فقط ویدیوها را زمانی بارگیری کند که در قسمت دید قرار گرفتند . تصویر poster می تواند یک مکان نگهدار تصویر با کیفیت پایین باشد، مانند اولین فریم ویدیو. هنگامی که ویدیو در نمای نمایش ظاهر شد، مرورگر شروع به دانلود ویدیو می کند. این می‌تواند زمان بارگذاری محتوای داخل نمای اولیه را بهبود بخشد. از جنبه منفی، هنگام استفاده از یک تصویر poster برای autoplay ، کاربران شما تصویری را دریافت می کنند که فقط برای مدت کوتاهی نمایش داده می شود تا زمانی که ویدیو بارگیری شود و پخش شود.

پخش توسط کاربر

به طور کلی، به محض اینکه تجزیه کننده HTML عنصر <video> را کشف کند، مرورگر شروع به دانلود یک فایل ویدئویی می کند. اگر عناصر <video> دارید که در آن کاربر پخش را آغاز می کند، احتمالاً نمی خواهید ویدیو تا زمانی که کاربر با آن تعامل نداشته باشد دانلود شود.

می‌توانید با استفاده از ویژگی preload عنصر <video> بر آنچه برای منابع ویدیویی دانلود می‌شود تأثیر بگذارید:

• تنظیم preload="none" به مرورگر اطلاع می دهد که هیچ یک از محتوای ویدیو نباید از قبل بارگیری شود.
• تنظیم preload="metadata" فقط ابرداده های ویدئویی، مانند مدت زمان ویدئو و احتمالا سایر اطلاعات سطحی را واکشی می کند.

اگر در حال بارگذاری ویدیوهایی هستید که کاربران نیاز به شروع پخش برای آن دارند، تنظیم preload="none" احتمالاً مطلوب ترین حالت است.

در این مورد می توانید با افزودن یک تصویر poster ، تجربه کاربری را بهبود ببخشید. این به کاربر زمینه ای را در مورد آنچه ویدیو درباره آن است می دهد. علاوه بر این، اگر تصویر پوستر عنصر LCP شما است، می‌توانید اولویت تصویر poster را با استفاده از راهنمایی <link rel="preload"> همراه با fetchpriority="high" افزایش دهید:

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

جاسازی می کند

با توجه به پیچیدگی در بهینه سازی و ارائه کارآمد محتوای ویدیویی، منطقی است که بخواهید مشکل را به سرویس های ویدیویی اختصاصی مانند YouTube یا Vimeo بارگذاری کنید. چنین سرویس‌هایی تحویل ویدیوها را برای شما بهینه می‌کنند، اما جاسازی یک ویدیو از یک سرویس شخص ثالث می‌تواند تأثیر خاص خود را بر عملکرد داشته باشد، زیرا پخش‌کننده‌های ویدیوی تعبیه‌شده اغلب می‌توانند منابع اضافی زیادی مانند جاوا اسکریپت را ارائه دهند.

با توجه به این واقعیت، تعبیه‌های ویدیوی شخص ثالث می‌تواند به طور قابل توجهی بر عملکرد صفحه تأثیر بگذارد. طبق بایگانی HTTP، جاسازی‌های یوتیوب، رشته اصلی را برای بیش از 1.7 ثانیه برای وب‌سایت میانه مسدود می‌کند. مسدود کردن رشته اصلی برای مدت زمان طولانی یک مشکل جدی تجربه کاربر است که می‌تواند بر تعامل صفحه با رنگ بعدی (INP) تأثیر بگذارد. با این حال، می‌توانید با بارگیری نکردن جاسازی فوراً در طول بارگیری اولیه صفحه، مصالحه کنید و به جای آن یک مکان نگهدار برای جاسازی ایجاد کنید که در هنگام تعامل کاربر با آن، جاسازی شده با ویدیوی واقعی جایگزین شود.

دموهای ویدیویی

دانشتان را امتحان کنید

بعدی: بهینه سازی فونت های وب

بعدی در پوشش ما برای بهینه سازی انواع منابع خاص، فونت ها است. بهینه سازی فونت های وب سایت شما چیزی است که اغلب نادیده گرفته می شود، اما می تواند تأثیر قابل توجهی بر سرعت بارگذاری کلی وب سایت شما و معیارهایی مانند LCP و تغییر چیدمان تجمعی (CLS) داشته باشد.