عملکرد ویدئو

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

با این حال، تصاویر تنها نوع رسانه‌ای نیستند که معمولاً در وب دیده می‌شوند. ویدیوها یکی دیگر از انواع رسانه محبوب هستند که اغلب در صفحات وب استفاده می‌شوند. قبل از بررسی برخی از بهینه‌سازی‌های ممکن، مهم است که ابتدا نحوه عملکرد عنصر <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">

بارگذاری تنبل

یک ویژگی نسبتاً جدید در عملکرد ویدیو، ویژگی loading=lazy است. مشابه بارگذاری تنبل تصویر در سطح مرورگر و مشابه iframeها ، این ویژگی نیز همین ویژگی را برای دانلود poster و preload ویدیوها به ارمغان می‌آورد.

استفاده از ویژگی poster به همراه preload="none" یا preload="metadata" می‌تواند به طور پیش‌فرض از دانلود ویدیو جلوگیری کند، ویژگی loading=lazy حتی دانلود تصویر پوستر و متادیتا را تا زمانی که ویدیو در viewport یا نزدیک به آن قرار گیرد، به تعویق می‌اندازد.

جاسازی‌ها

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

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

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

دانش خود را بیازمایید

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

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