۸ نکته بهینه‌سازی ویدیوها برای بارگذاری سریع‌تر

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 05 مهر 1397
دسته بندی ها : طراحی وب

افزودن ویدیو به وبسایت گاهی اوقات شبیه به کار کردن با یک شمشیر دو لبه است. کاربران دنیای وب از ویدیوهایی با کیفیت بالا خوششان می‌آيد اما وبسایت شما برای مدیریت چنین ویدیوهایی مدیریت نشده است، به همین دلیل باید منتظر مشکلات کارایی وبسایت‌تان باشید. در این مطلب قصد داریم نکاتی را به شما بگوییم که با در نظر گرفتن آن‌ها می‌توانید مطمئن شوید که محتوای ویدیویی‌تان بجای آنکه کاربران را از وبسایت دور کند، میزان تبدیلات وبسایت را افزایش می‌دهد.

اهمیت بهینه‌سازی ویدیو

برای اینکه کاربران را راضی و سرگرم نگه دارید استفاده از محتوای چند رسانه‌ای عالی است، به همین دلیل است که امروزه توسعه‌دهندگان بیشتری در حال اضافه کردن ویدیو به وبسایت‌شان هستند. اندازه صفحات وب در بین سال‌های ۲۰۱۱ تا ۲۰۱۷ از ۱ مگابایت به ۳ مگابایت رسیده است، اصلی‌ترین دلیل این افزایش وجود محتوای ویدیویی است. 

میانگین اندازه ویدیوها نیز در دنیای وب به ۷۲۹ کیلوبایت افزایش داشته؛ اگر شما وبسایتی را دارید که در آن از ویدیوهای مختلفی استفاده کرده‌اید پس بهتر است نکاتی را برای بهینه‌سازی آن‌ها در نظر بگیرید. اینگونه کارایی وبسایت بسیار افزایش خواهد یافت.

بهترین فرمت‌های ویدیویی برای وب

به دلیل قابلیت ایجاد ویدیوهای با کیفیت در اندازه‌های کوچک، MP4 و WebM توانسته‌اند به یک استاندارد برای دنیای وب تبدیل شوند. در حال حاضر پلتفرم‌هایی مانند یوتیوب و ویمیو از این فرمت‌ها به عنوان یک استاندارد استفاده می‌کنند. در حال حاضر MP4 توسط تمام مرورگرها به خوبی پشتیبانی می‌شود اما پشتیبانی کاملی از WebM را نمی‌توانیم شاهد باشیم، WebM فقط در مرورگرهای فایرفاکس و کروم پشتیبانی می‌شود.

WebM همواره حجم کمتری را نسبت به MP4 دارد اما مشکل پشتیبانی یکی از موانع استفاده همگانی از آن است. مخصوصا این مشکل را با دستگاه‌های موبایل می‌توانید بیشتر ببینید.

مقدمه‌ای بر بهینه‌سازی ویدیو برای وبسایت‌ها

برای ارائه دادن محتوای ویدیویی با کیفیت به کاربران دو پروسه وجود دارد که باید آن‌ها را دنبال کنید:

  1. بهینه‌سازی فایل ویدیویی؛ تاثیری مینیمال روی سرعت بارگذاری وبسایت
  2. بهینه‌سازی صفحه وب برای جایگذاری و نمایش درست ویدیو در وبسایت

۱. استفاده از ابزارهای فشرده‌سازی داده

ابزارهای فشرده‌سازی داده مانند Blazemp و HandBrake فایل‌های ویدیویی را بدون کم کردن کیفیت آن‌ها کوچک می‌کنند. فایل های چند رسانه کوچکتر بارگذاری سریع‌تری خواهند داشت بنابراین می‌توانید در کمترین زمان ممکن به کاربران ویدیوها را نمایش دهید.

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

۲. تبدیل به فرمت‌های پشتیبانی شده توسط HTML5

یکی از مزیت های بزرگی که HTML5 برای توسعه‌دهندگان دارد قابلیت استفاده از محتوای ویدیویی بدون نیاز به پلاگین است. می‌توانید از طریق یک تبدیل کننده ویدیو، فیلم‌های خود را به فرمت‌هایی تبدیل کنید که در HTML5 پشتیبانی می‌شوند.

۳. حذف صدا 

اگر از یک Hero Video برای وبسایت‌تان استفاده می‌کنید پس شما نیازی به صدای آن نخواهید داشت. بنابراین برای کم شدن حجم ویدیو می‌توانید داده‌های صوتی آن را حذف کنید. با استفاده از یک ابزار ویرایش ویدیو ساده این کار به راحتی انجام‌پذیر خواهد بود.

۴. استریم مسقیم از سرور 

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

۵. استفاده از یک شبکه توزیع محتوا یا CDN

CDN یک شبکه بزرگ از سرور‌های مختلف است که در نقاط جغرافیایی مختلفی قرار داده شده است. این شبکه به کاربران این امکان را می‌دهد تا بتوانند محتوا را از طریق نزدیک ترین سروری که در موقعیت آن‌ها قرار دارد مشاهده کنند. برای محتوای ویدیویی بزرگ‌تر این قابلیت بسیار مهم و پایه‌ای است. 

بهینه‌سازی صفحات وب برای محتوای ویدیویی

انتخاب فرمت درست و بهینه‌سازی شیوه تحویل ویدیو به مخاطب راه‌های خوبی برای بهینه‌سازی محتوای ویدیویی هستند اما برای اینکه مطمئن شوید که تجربه کاربری بهتری را ارائه می‌کنید وبسایت‌تان باید به خوبی از ویدیوهای با کیفیت پشتیبانی کند. در این جا می‌توانید ۳ نکته برای پیاده‌سازی چنین حالتی را مشاهده کنید:

۱. تعیین اندازه ویدیو

در HTML و CSS مطمئن شوید که طول و عرض ویدیو را به خوبی تعیین کرده‌اید. با این کار فضای مورد نیاز برای نمایش ویدیو تثبیت می‌شود.

۲. تا زمان بارگذاری کامل برگه، ویدیو را بارگذاری نکنید

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

۳. اولویت‌دهی به کاربران موبایل

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

حتی اگر یک توسعه‌دهنده فرانت-اند حرفه‌ای باشید، طراحی وبسایتی که بتواند روی صفحات مختلف به خوبی ظاهر شود چالش برانگیز و سخت است. برخی از افراد نسخه دیگری از وبسایت‌شان را که برای موبایل مناسب است می‌سازند اما چنین کاری منطقی نیست. شما باید اضافه کاری بسیاری بکنید. استفاده کردن از Media Screen ها و دیگر تکنیک‌های طراحی واکنشگرا می‌تواند نتیجه بسیار بهتری برای‌تان داشته باشد.

بهینه‌سازی محتوای ویدیویی برای سئو

استفاده از یوتیوب به عنوان پلتفرمی در جهت دیده شدن محتوای‌تان عالی است اما اگر می‌خواهید وبسایت‌تان برای ویدیوها دیده شود باید از دامنه خودتان استفاده کنید. وقتی ویدیویی را در یوتیوب آپلود می‌کنید و آن را در وبسایت‌تان قرار می‌دهید، موتورهای جستجوگر لینک یوتیوب را برای نام ویدیو در اولویت قرار می‌دهند. برای اینکه ویدیوهای‌تان را از نظر سئو بهینه‌سازی شوند چند نکته وجود دارد که بهتر است رعایت کنید:

  • متاداده‌های مناسب را برای ویدیوهای‌تان ایجاد کنید.
  • سعی کنید عنوان ویدیو را به صورت توصیفی وارد کنید. البته در کوتاه نگه‌داشتن آن نیز تلاش کنید.
  • از کلمات کلیدی مناسب استفاده کنید.
  • تصویر بندانگشتی مناسبی را برای ویدیوهای‌تان انتخاب کنید.
  • این کارها را بعد از بهینه‌سازی ویدیو انجام دهید در غیر اینصورت متاداده‌های مربوط به ویدیوی‌تان ممکن است از بین برود.

آیا وبسایت‌تان واقعا نیاز به ویدیو دارد؟

فواید افزودن محتوای ویدیویی به وبسایت‌تان معمولا ارزشمندتر از میزان زمانی است که بر بارگذاری صفحات‌تان اضافه می‌شود. اما باید در نظر داشته باشید که اگر ویدیوهای‌تان نمی‌توانند محتوای با ارزشی را به وبسایت اضافه کنند و تجربه کاربری بهتری را ارائه نمایند بنابراین بهتر است که منابع‌تان را هدر ندهید.

در پایان

تا زمانی که فایل‌های چندرسانه‌ای و طراحی صفحات‌تان را بهینه‌سازی می‌کنید افزودن ویدیو به وبسایت باید کمترین تاثیر را روی کارایی آن داشته باشد. افزودن محتوای ویدیویی روی نرخ تبدیلات وبسایت‌تان تاثیر بسیار زیادی خواهد داشت. بنابراین بهینه‌سازی ویدیوهای‌تان را جدی بگیرید.

منبع

مقالات پیشنهادی

9 نکته برای سریع‌تر کردن بارگذاری وبسایت

یکی از مهمترین جنبه‌های هر وبسایتی، زمان بارگذاری آن است. مهم نیست که وبسایت‌تان از چه جنبه‌های بصری و محتوایی بهره می‌برد، اگر وبسایت‌تان به صورت سری...

8 نکته سئو در طراحی وب که نباید از دست دهید

در چند سال اخیر ما شاهد تاکیید بسیار زیادی روی تجربه کاربری بودیم. آمدن موبایل های هوشمند و کم شدن منابع این مسئله اهمیت بسیار بالاتری نیز پیدا کرد. د...

8 دليلي كه نبايد از يك مديريت محتوا استفاده كنيد

من تمايل دارم افرادي رو پيدا كنم كه در قدم اول ميخوان به مشتريان چنين ايده اي رو، ترويج بدن كه اون ها ميتونن سايت خودشون رو "به راحتي به كمك يه واژه پ...

8 نکته درباره Emmet که شاید نمی‌دانستید

Emmet (که برای مدتی با نام Zen Coding شناخته می‌شد) یک ابزار ویرایشگر کد بسیار کاربری است که قطعه کد‌ها و میان‌بر‌هایی برای HTML و حتی CSS را به ارمغا...