نکات سرعت سایت برای بارگذاری سریعتر ویدیو • Yoast

هیچ راه حلی وجود ندارد – فایل های ویدیویی بزرگ هستند. در واقع آنقدر بزرگ که آنها را به حساب آوردند 81 درصد از ترافیک اینترنت در سال 2021. ویدیوهای بارگذاری شده در هر صفحه وب به احتمال زیاد بزرگترین دارایی یک مرورگر خواهد بود. مگر اینکه کاری بسیار غیرعادی (و احتمالاً غیرقابل توصیه) با Images JavaScript انجام دهید.

این می‌تواند باعث شود برخی از توسعه‌دهندگان وب و سئوکارهای بی‌سابقه به نمودار آبشاری از ابزار اندازه‌گیری سرعت سایت نگاه کنند و اعلام کنند که «ویدئو برای سرعت سایت بد است». در حالی که این در کاربرد گسترده آن صادق نیست، بهترین شیوه های خاصی وجود دارد که باید از آنها آگاه باشید. راه اندازی صحیح تضمین می کند که ویدیو سرعت سایت شما را کاهش نمی دهد و سایت شما سرعت ویدیوی شما را کاهش نمی دهد.

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

نکته 1: ویدیوهای خود را از طریق CDN ارائه دهید

ساده ترین راه برای دریافت ویدیو در وب سایت وردپرس خود این است که فقط یک ویدیو را در کتابخانه رسانه خود آپلود کنید. پس از آن می توانید آن را در یک صفحه یا پست با استفاده از بلوک ویدیویی گوتنبرگ قرار دهید.

این نیز احتمالاً بدترین راه برای افزودن ویدیو است. این دستور العملی برای بافر تضمینی به محض زدن دکمه پخش توسط کاربر است. و این بر تاخیر ورودی اول (FID) تأثیر منفی می گذارد. چنین تنظیماتی به مرورگر نیاز دارد که یک فایل ویدیویی کامل (غیر بهینه) را مستقیماً از سرور شما با کلیک بارگیری کند، بدون اینکه برای مشکلات سرور، موقعیت مکانی کاربر یا سرعت اتصال ضعیف هیچ گونه بازگشتی نداشته باشد.

راهنمای Yoast برای CDN ها را برای جزئیات کامل در مورد راه بهتری برای تنظیم آن بررسی کنید. توجه داشته باشید که اگر ویدیوهایی را از سرویس‌هایی مانند YouTube یا Wistia جاسازی می‌کنید، آنها تحویل دارایی‌های ویدیویی را از شبکه CDN خود مدیریت می‌کنند.

نکته 2: از جریان تطبیقی ​​استفاده کنید

تگ

مشکل اینجا برای سرعت سایت زمانی است که می خواهید یک فایل ویدیویی بزرگ یا با وضوح بالا بارگذاری کنید. با یک اتصال کمتر از ستاره ای، تنها چیزی که اتفاق می افتد مقدار زیادی بافر است، در حالی که مرورگر سعی می کند به اندازه کافی فایل را برای شروع پخش بارگذاری کند. برای FID خیلی بد است.

بهترین راه برای مقابله با این مشکل استفاده از چیزی به نام جریان تطبیقی ​​است. پخش جریانی تطبیقی ​​زمانی است که چندین نوع مختلف از یک ویدیو، همه با وضوح و نرخ بیت متفاوت، در اختیار یک سرور قرار می‌گیرد. سپس سرور بهترین نسخه ویدیویی را با کیفیت ارائه می دهد که هر اتصالی می تواند از عهده آن برآید. با پخش جریانی تطبیقی، اگر کاربر شما روی یک دستگاه تلفن همراه در بالای یک تپه راه دور باشد و فقط با یک اتصال 500 کیلوبیت در ثانیه کار می کند، سرور یک ویدیوی SD با نرخ بیتی حدود 300 کیلوبیت در ثانیه به جای تغییرات 4K ایده آل با سرعت 35 مگابیت در ثانیه ارائه می دهد.

چطور می تونی این کار رو بکنی؟ خوب، شما می توانید خودتان آن را با استفاده از MPEG-DASH تنظیم کنید. یا به یک پلتفرم میزبانی ویدیوی شخص ثالث مانند یوتیوب یا ویستیا; اینها از جریان تطبیقی ​​به عنوان بخشی از پشته فناوری تحویل ویدیو استفاده می کنند.

نکته 3: فایل های ویدیویی را با نرخ بیت متغیر صادر کنید

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

VBR را می توان با رایج ترین کدک های ویدئویی وب مانند VP9 و h.264 استفاده کرد.

نکته 3: از پخش خودکار ویدیوها خودداری کنید (یا حداقل آنها را کوتاه و بی صدا نگه دارید)

پخش خودکار ویدیوها همچنان محبوب است، به ویژه به عنوان پس‌زمینه در صفحات اصلی. اما اجرای ضعیف آنها می تواند باعث بروز همه نوع مشکلات سرعت سایت شود.

به نظر من، بهتر است از این موارد اجتناب شود. آنها تقریباً همیشه زمان رسیدن به بزرگترین رنگ محتوایی (LCP) را به طور چشمگیری افزایش می دهند. با اجباری کردن پخش ویدیو همزمان با بارگیری عناصر اصلی HTML، تصویر و جاوا اسکریپت یک صفحه، از یک مرورگر می‌خواهید که مقدار زیادی را در یک زمان انجام دهد. اگر سرعت اتصال ضعیف باشد، این کار را کند انجام می دهد.

اگر باید ویدیوهای پخش خودکار حلقه ای داشته باشید، آنها را تا حد امکان کوتاه نگه دارید (در حالت ایده آل کمتر از 10 ثانیه). همچنین فایل ها را بدون صدا صادر کنید تا اندازه فایل تا حد امکان کوچک باشد.

نکته 4: محتوای ویدیویی را به صورت ناهمزمان بارگیری کنید

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

اگر از AJAX برای بارگیری پخش کننده ویدیوی خود استفاده می کنید، هنگامی که مشتری اسکریپت اولیه اصلی را ارائه می کند (معمولا فقط چند صد کیلوبایت)، همه چیزهای دیگر می توانند به سرعت در پس زمینه بارگذاری شوند. در همین حال مشتری بقیه عناصر صفحه را رندر می کند. علاوه بر این، فریم و تصویر بندانگشتی پخش‌کننده ویدیو – عناصری که قبل از کلیک کاربر روی پخش قابل مشاهده هستند – می‌توانند فوراً اولویت‌بندی و بارگیری شوند تا تأثیر مثبتی بر حیاتی وب اصلی داشته باشند.

این دقیقاً همان کاری است که افزونه Yoast Video SEO برای وردپرس برای سرعت بخشیدن به تحویل ویدیو انجام می دهد و تضمین می کند که حتی بزرگترین فایل های ویدیویی تأثیر منفی بر تجربه کاربر یا عملکرد جستجو ندارند.

نکته 5: ویدیوها را پشت JS مسدودکننده رندر قرار ندهید

گاهی اوقات اسکرول ها یا چرخ فلک ها حاوی فیلم هایی هستند، به عنوان جایگزینی برای تصاویر.

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

این امر سرعت سایت و تاخیر ورودی اول را مختل می کند، اما نه تنها این. همچنین می تواند به سئو آسیب برساند، زیرا Googlebot قادر به یافتن و فهرست بندی ویدیو نیست.

برای بررسی اینکه آیا Googlebot می‌تواند اجرای ویدیوی شما را تجزیه کند، می‌توانید موارد جدید را بررسی کنید گزارش صفحات ویدیویی در کنسول جستجوی گوگل.

خلاصه

با سرعت ویدیو و سایت، اصول اصلی که باید به خاطر بسپارید عبارتند از:

1. از راه اندازی سرور به طور خاص برای مقابله با فایل های رسانه ای بزرگ (CDN) استفاده کنید.
2. اطمینان حاصل کنید که فایل ویدیویی در حال بارگیری با سرعت اتصال مشتری سازگار است (جریان‌سازی تطبیقی)
3. فایل های ویدیویی خود را تا حد امکان کوچک نگه دارید بدون اینکه کیفیت را به خطر بیندازید (بیت متغیر)
4. قبل از بارگیری فایل ویدئویی واقعی، عناصر بصری اصلی را بارگیری کنید (تحویل ناهمزمان)
5. از بارگیری ویدیوها با سایر دارایی های صفحه جلوگیری نکنید (جاوا اسکریپت مسدود کننده رندر)

برای اطلاعات بیشتر در مورد سرعت سایت، بقیه پست ها و راهنماهای ما را بررسی کنید!