ترفند های افزایش سرعت وب سایت (قسمت آخر)

فکر می‌کنید سرعت بخشیدن به وب‌سایت شما مهم نیست؟
دوباره فکر کنید…

اما چگونه بهینه سازی سرعت وب سایت بر نرخ تبدیل تأثیر می گذارد؟
سایت های کند ، نرخ تبدیل را از بین می برند .
با بهبود سایت خود ، می‌توانید از توصیه‌ها و معیارهای Google برای تعیین اهداف و اندازه گیری عملکرد خود استفاده کنید.

قسمت دوم این مطلب را می‌توانید از اینجا مطالعه کنید

۱۳-از سیستم عامل های میزبان خارجی استفاده کنید

علاوه بر میزبانی از پرونده های سایت خود در CDN ، می توانید از سیستم عامل های میزبان خارجی برای برخی از پرونده های بزرگتر خود نیز استفاده کنید.

این مورد به ویژه برای فیلم ها بسیار ارزشمند است.

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

حالا چی؟

اولین فکر شما این است که فیلم را مستقیماً از طریق FTP یا ویرایشگر وردپرس در سایت خود بارگذاری کنید.

این کارو نکنید!!

هنگامی که فیلم ها را بر روی سرور خود میزبانی می کنید ، یک تن فضا اشغال می کنند! فایل های ویدئویی می توانند به راحتی بیش از ۱۰۰ مگابایت را اشغال کنند.

اگر از سرور مشترک استفاده می کنید ، فضای محدودی دارید. ویدیوها باعث می شوند شما به سرعت از این حد فراتر بروید.

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

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

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

اگر تا به حال سعی کرده اید ویدیویی را تماشا کنید و بارگیری آن هر چند ثانیه مکث داشته باشد ، می دانید که چقدر ناامید کننده است

این کار را با بازدیدکنندگان خود انجام ندهید.

درعوض ، ویدیوی خود را در سرویس شخص ثالثی مانند، youtube , vimeo, wistia, aparat ,…  آپلود و بارگزاری کنید

سپس ، فیلم را در سایت خود قرار دهید.

این فرآیند باعث صرفه جویی در فضا ، منجر به زمان بارگیری سریعتر و انجام آن بسیار آسان است.

مشکل ترین قسمت فقط انتخاب یکی از مواردی است که می خواهید استفاده کنید.

یوتیوب

وقتی بیشتر مردم به ویدیوی آنلاین فکر می کنند ، به YouTube فکر می کنند. این سایت با بیش از ۱.۵ میلیون نفر کاربر که تقریباً ۵ میلیارد فیلم در روز تماشا می کنند یکی از شناخته شده ترین سایت های جهان است .

همچنین استفاده از آن کاملاً رایگان است.

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

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

نکته منفی قابل توجه در YouTube این است که برای اکثر ویدیوها ۱۵ دقیقه محدودیت دارد. اگر می خواهید محتوای طولانی تری بارگذاری کنید ، باید درخواست کنید محدودیت خود را افزایش دهید – بنابراین اگر این کاری است که به طور منظم انجام می دهید ، ممکن است بهترین گزینه برای شما نباشد.

 

ویمئو

بعد از یوتیوب ، ویمئو با ۷۱۵ میلیون بازدید در ماه ، دومین پلتفرم میزبانی ویدیو است .

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

از طرف مثبت ، پخش کننده ویدیوی استاندارد آن کمی بهتر از YouTube است.

 

توجه به این نکته مهم است که Vimeo برای بارگذاری محتوا محدودیت دارد.

در حالی که یک عضویت اساسی به شما اجازه ۵۰۰ بار مگابایت بارگیری در هفته و حداکثر ۵ گیگابایت را می دهد ، سه برنامه پرداختی آنها از ۷ دلار تا ۵۰ دلار در ماه است و فضای ذخیره سازی آنها از ۲۵۰ گیگابایت تا ۵ ترابایت است.

ویستیا

ویستیا از نظر طراحی با بازاریابی کمی با یوتیوب و ویمئو متفاوت است.

کاربران به طور کلی سایت ویستا را برای محتوا مرور نمی کنند – بنابراین اگر فیلم های خود را جستجو و پیدا کنید ، این گزینه برای شما نیست.

اما اگر روی استفاده از ویدئو به عنوان ابزاری برای بازاریابی متمرکز باشید ، این دقیقاً همان چیزی است که شما نیاز دارید.

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

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

بعلاوه ، پخش کننده ویدیوی wistia قابل تنظیم است ، بنابراین می توانید با تغییر دکمه پخش و سایر کنترل ها به رنگ برند خود ، به فیلم های خود احساس مارک دهید.

 

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

و اگر از hubspot یا marketo استفاده می کنید ، می توان آن را با هر دو سیستم عامل کاملاً یکپارچه کرد.

بزرگترین نقطه ضعف ویستیا این است که برنامه رایگان آن فقط شامل سه فیلم است.

فراتر از آن ، برنامه های پرداختی ۹۹ دلار در ماه است.

آپارات

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

 

 

هنگامی که پلت فرم ویدئوی خود را انتخاب کرده و ویدئویی را بارگذاری کردید ، افزودن آن به سایت خود بدون توجه به پلت فرم مورد استفاده آسان است.

“تعبیه” را انتخاب کنید و کد HTML را که سیستم عامل شما ارائه می دهد کپی کنید.

 

سپس ، کد را در صفحه ای که می خواهید در آن نمایش داده شود کپی و پیست کنید.

برای سایت های HTML ، کافی است آن را در مکانی که می خواهید در صفحه نشان داده شود ، به کد خود اضافه کنید.

برای وردپرس ، به ویرایشگر متن بروید و همین کار را انجام دهید.

در اینجا مثالی از شکل ویدئوی Wistia که در یک پست وبلاگ وردپرس تعبیه شده است ، آورده شده است:

-۱۴تحویل CSS را بهینه کنید

CSS سبک مورد نیاز صفحه شما را نگه داری میکند، به طور کلی ، وب سایت شما به یکی از دو روش به این اطلاعات دسترسی پیدا می کند: در یک فایل خارجی ، که قبل از ارائه صفحه شما بارگیری می شود ، یا به صورت درون خطی ، یعنی در خود فایل های سورس HTML است.

CSS خارجی در کد HTML شما با کدی بارگذاری می شود که شبیه به این شکل است:

<! – سبک های شما ->

<linkerl= “stylesheet” type = “text / css” mediad = “all” href = http: //yourURL/style.css />

هه inline CSS در HTML صفحه شما قرار دارد و به صورت زیر است:

 

به عنوان یک قاعده کلی ، از قرار دادن CSS در کد HTML (مانند divs یا عنوان های خود) مانند CSS درون خطی تصویر بالا خودداری کنید. اگر تمام CSS خود را در صفحه سبک خارجی خود قرار دهید ، کد تمیزتری دریافت خواهید کرد.

این اندازه کد شما را کاهش می دهد و تعداد کپی های کمتری ایجاد می کند.

هنگام تنظیم سبک های خود ، همچنین بهتر است فقط از یک صفحه سبک CSS خارجی استفاده کنید ، زیرا سبک های اضافی درخواست های HTTP را افزایش می دهند.

اگر مطمئن نیستید که چگونه CSS شما در حال حاضر تنظیم شده است ، می توانید از این ابزار تحویل CSS  برای اطلاعات بیشتر استفاده کنید. URL خود را وارد کنید و گزارشی با تمام پرونده های CSS خارجی خود مشاهده خواهید کرد.

به پایین پیمایش کنید ، همچنین خواهید دید که آن فایل خارجی در کجا قرار دارد و همچنین هر CSS درون صفحه ای و اندازه کلی پرونده های CSS شما چیست.

اگر بیش از یک پرونده CSS خارجی دارید ، هر کدام به زمان بارگذاری صفحه شما اضافه می کنند. در بعضی موارد ، این امر اجتناب ناپذیر است – اما در اکثر موارد ، بهتر است آنها را ترکیب کنید.

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

به سادگی محتویات هر فایل CSS را کپی کرده و در یک فایل اصلی CSS جایگذاری کنید .

سپس ، HTML خود را برای ارجاع به این فایل جدید به روز کنید و تمام منابع مربوط به پرونده های قدیمی را حذف کنید.

اکنون ، مرورگرهای بازدید کننده شما فقط به جای چند مورد ، فقط یک فایل CSS را بارگیری می کنند که این باعث کاهش تعداد کلی درخواست ها و کاهش زمان بارگیری صفحه می شود.
پس از انجام این کار ، می توانید از  Pagespeed ​​insights  استفاده کنید تا مطمئن شوید با CSS مسدود کردن رندر مشکلی ندارید.

اگر منابع اسکریپت مسدود کننده دارید ، آنها را در بخش “پیشنهادهای بهینه سازی” مشاهده خواهید کرد.

 

اگر قبلاً از افزونه ای مانند WP rocket یا W3 Total Cache استفاده می کنید ، این مسئله مشکلی ایجاد نمی کند. اگر هنوز با مشکلات انسداد رندر مواجه هستید ، تنظیمات افزونه خود را دوباره بررسی کنید یا توصیه های Google را  برای بهینه سازی تحویل CSS دنبال کنید.

15. اولویت بندی مطالب بالاتر از حد برابر (بارگذاری تنبل)

فقط توصیه شده که فقط از یک صفحه سبک CSS و بدون CSS درون خطی استفاده کنید ، یک نکته مهم وجود دارد که باید در نظر بگیرید.

با بارگیری سریعتر بخش بالای تاشو (بالای صفحه) می توانید تجربه کاربر را بهبود بخشید – حتی اگر بارگیری بقیه صفحه چند ثانیه طول بکشد.

این بارگذاری تنبل نامیده می شود و به ویژه برای صفحات با محتوای زیاد زیر لایه مفید است.

به عنوان مثال ، فرض کنید شما یک پست وبلاگ می نویسید که شامل ۲۰ عکس است. به طور معمول ، مرورگر کاربر باید قبل از نمایش هر چیزی در صفحه ، همه آن تصاویر را بارگیری کند.

با بارگذاری تنبل ، می تواند ابتدا محتوای موجود در نمای را بارگیری کند ، سپس همه آن عکس ها را بارگیری کند.

به این ترتیب کاربر نیازی به انتظار برای دسترسی به صفحه ندارد و با مشاهده تصاویر ، بارگیری می شود.

این می تواند زمان بارگذاری در پست های دارای تعداد زیادی عکس (مانند این مورد) را به میزان قابل توجهی کاهش دهد.

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

بار تنبل

Lazy loadیک افزونه کاملاً ساده است که از jQuery.sonarفقط برای بارگذاری تصاویر در صورت مشاهده تصاویر در مرورگر کاربر استفاده می کند.

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

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