Cumulative Layout Shift دقیقا چی است؟
Cumulative Layout Shift دقیقا چی است؟
تا حال برات پیش اومده که وارد یک وب سایت شدی و چشم به راه بار گذاری شدن یک بخشی از تارنما هستی اما یهو بعداز بار گذاری شدن وبسایت اون قسمت از تارنما میره تحت؟ و یا این که میخوای روی یک دکمه برای مثال “آری” درون یک وبسایت کلیک کنی تا دستت میخواد بخوره به اون دکمه یک متن بالای دکمه ظواهر میشه و ممکنه ناخواسته روی “نه” بزنی و یک تجربیات کاربری بد برات آموزش سئو مشهد صورت بده.
Cumulative Layout Shift که مخفف اون میشه CLS اومده میگه این مورد ها بالا رو حل کنیم و توی تارنما نباشه، به همین آسانی.
هر چی عدد CLS کمتر باشه بهتره و هر چی بیشتر باشه یعنی تارنما شما به سئو بیشتری نیاز داره.
پخش کلیپ
ویدئو بالا رو نگاه نمائید، آغاز قسمت سبز وسطی بارگذاری میشه درحالی که قسمت سبز بالا بارگذاری نشده اما جاش خالی میباشد و به‌تدریج بارگذاری میشه و هیچ جابه‌جایی در بین قسمت‌های متعدد در عکس آموزش سئو در مشهد بالا نداریم. (منبع ویدئو)
پخش ویدئو
در کلیپ بالا اولیه قرمز رنگ وسطی بارگذاری میشه البته زیرا قرمز‌رنگ بالایی هنوز بارگذاری نشده این قرمز رنگ وسطی فراتر است و هنگامی قرمز‌رنگ بالایی بارگذاری میشه یهو استفاده کننده شاهد این میشه که قرمز رنگ وسطی بپره تحت خیس و این تجربیات کاربری منفی داره.
پخش کلیپ
همگی ما مطلقا یکسری قوانینی رو تجارب کردیم و معطل بارگیری شیت ای شدیم، دکمه ای که قصد تعامل با اون را داشتید و پیدا کردیم و روی اون کلیک کردیم، بعدش ورقه به سمت زیر عوض شده و ما کاملا روی یک پیوند دیگه کلیک کردیم. کاهش CLS به طور طبیعی میتونه جا به جایی المان‌ها از شیت رو کمتر کنه و تجربیات کاربری بود بهبود بده. مثال بالا رو لطفا نگاه فرمائید که درصورتی که CLS در مورد ها مثل بالا داشته باشید چقدر میتونه به مخاطب احساس بد بده. (منبع کلیپ)
به لهجه تخصصی CLS چیست؟
درحال حاضر در صورتیکه پاره ای تخصصی بگیم CLS چیست بایستی بگیم CLS معیاری برای اندازه گیری ثبات بصری در طی بار گذاری یک برگه گفته میشه یا این که یک تمجید دیگه اینه یک میزان و اندازه گیری برای تغییر تحول غیرمنتظره موادسازنده اینترنت در طی لودن شدن برای مخاطب است.
CLS (Cumulative Layout Shift) یکی فاکتورهای اصلی باطن میزان Web Vitals میباشد. واحد سنجش Web Vitals یکی قسمت های اساسی در گزارش Performance جی تی متریکس است.
ضمنا به Layout Shift به فارسی انتقال دکوراسیون هم گفته میشه.
ترازو بهتر و بد در Cumulative Layout Shift
CLS تاثیر بدون واسطه بر روی نمره کلی Performance در GTMetrix داره و این تاثیر کلا 5 درصد است البته نکته بسیار اساسی این می باشد که CLS تاثیر بدون واسطه بر روی سرعت وب سایت شما نداره و بلکه بر روی تجارب کاربری تاثیر داره. نمرات بهتر و بد فاکتور CLS به طور ذیل می باشد:
۰.۱ یا این که کمتر : عالی
دربین ۰.۱ تا ۰.۱۵ : قابل قبول، البته مستلزم سئو
میان ۰.۱۵ تا ۰.۲۵ : مقداری وقتگیر‌خیس از حد استاندارد
بیشتر از ۰.۲۵: خیلی وقتگیر‌خیس از حد استاندارد
در حالتی‌که یک وبسایتی CLS ذیل داشته باشه یعنی دارنده شیت اکران پایداری میباشد که ارکان رو به فضا منتقل نمیکنه و بارگیری اثبات و قابل پیش گویی کل محتوای وبسایت را ضمانت میکنه. به طور طبیعی شما در صورتی CLS رو بهبود بدید نهایتا Performance تارنما شما ۵ درصد بهبود پیدا میکنه.
هشدار: ما آدم‌ها کلا خیلی توی آزمایش گیری هامون خطا می کنیم یک مثال خطا اینکه ذهن عالی انعطاف پذیر خودمون رو سپردیم به ابزارها و اعداد (بعضی ها خطاها ابزارها رو درون نوشته‌علمی انگیزه متعدد بودن گزارش های GTMetrix گفتم)، یا این که یک مثال نادرست دیگه اینکه میپنداریم این فاکتور سرعت تارنما یعنی CLS تنها برای کاغذ اساسی وبسایت میباشد، به عبارت دیگر دوستان تنها ورقه مهم رو باهاش رسیدگی و تحلیل میکنن درحالی که بقیه صفحه ها هم بسیار اساسی می باشد.
چطور کاهش Cumulative Layout Shift بدیم؟
در لحاظ داشته باشید که بهبود CLS به همین آسانی وجود ندارد و بهتره به مکان خرابکاری بیشتر و خودسئویی روی سایتتون، بدید یک گروه تخصصی براتون اعمال بده، زیرا حل این موردها تنها متعلق به یک تخصص وجود ندارد و بایستی چندین دارای تخصص کنار هم باشن.
با این حالا یکسری مواقعی که میتونه روی Cumulative Layout Shift تاثیر بذار رو در اینجا درج کردیم و ممکنه بعضی موردها هم باشه که دراین لیست تحت نباشه البته موثر باشه.
۱ – خطای Specifying image dimensions
ما پیش از این درباره خطای اصلی Specify Image Dimensions کلام کرده بودیم، مشخص و معلوم کردن بعد ها عکس و ویدئوها میتونه به مرورگر مخاطب بسیار یاری کنه تا رده و اندازه هر المان رو به خیر تشخیص بده.
ویدئو ذیل مطلقا نگاه فرمائید تا خوب فهم و شعور نمائید.
پخش کلیپ
۲ – تبلیغات درون شیت
تبلیغات که الان بسیار بسیار باطن وبسایت‌ها زیاد گردیده، مخصوصا از وقتی که ماشین کرایه ای‌های تبلیغات کلیکی آومدن. قرار دادن کد اسکریپت این وب سایت‌ها برای اکران تبلیغات میتونه روی وقتگیر کردن فرصت CLS تاثیر بذاره.
یا این که embeds و iframes یکسری تارنما‌ها، فیلم‌ها، نقشه‌ها و … که میتونه یک shift بد رو برای یوزرها وب سایت شما چهره بده.
برای مثال می تونید این مفاد رو در انتهای کاغذ بارگذاری فرمائید و یا این که از پیشین به اون نصیب width و height بدید. ولی این شیوه حل توی اکثر موردها برای همگی کاربردی میباشد.
۳ – محتوای پویای غیرمنتظره
اینجانب پیش از این تلفن همراه سابق خودم رو سرچ کردم و وارد دیجی فرآورده شدم، داشتم ویژگی ها موبایل سابق خودم نگاه می کردم که یهو برگه رفت پایبن خیس!! چرا؟
زیرا جدید قسمت محصول ها مربوط به اون موبایل دیرین (به عنوان مثال اخرین ورژن) بالای فرآورده شد. اما الان این خلل حل کردن البته هر محتوایی مثل تولیدها مرتبط یا این که مقاله‌ها مرتبط و یا این که اومدن خبر نامه به طور غیرمنتظره در میان قسمت های داخلی تارنما که سبب ساز به وجود آوردن Shift ورقه میشه دوری نمائید.
اکنون موضوع چی میباشد؟:
عکس بالا خیلی بدیهی داره فرق این تو آیتم رو میگه، در شرایط FOUT متن سریع‌خیس اکران داده میشه و سرعت تارنما خوب میشه به عبارت دیگر شرایط FOUT سفارش میشه البته یک ایراد داره و اینکه شرایط FOUT ایراد Layout Shift رو داره. (شرایط FOIT که ۹۰ درصد وب سایت‌ها دارن رو رسیدگی نمی‌‌کنیم زیرا سبب ساز کندی تارنما میشه).
چه کنیم؟:
از font-display برای از در میان بردن FOIT و فعال کردن FOUT به کارگیری نمایید و در غایت برای حل کردن ایراد FOUT بهتره (همون Layout Shift) از rel="preload" کردن فونت در head تارنما به کار گیری فرمائید. (امیدوارم فهمیده باشی چی میگم، اینجا رو می بایست کارشناس اعمال بده برات) با نمونه خوب توضیح میدم:
در نمونه بالا اومدیم از خصوصیت font-display: swap; به کارگیری کردیم تا وضعیت FOUT فعال بشه و سرعت عالی بشه، درحال حاضر در‌حالتی که اعتنا نمائید یک آدرسی اون فونت بالا داره در قسمت src. اون نشانی برمیدارم و در کدی مشابه به پایین درج می‌کنم و در هدر وبسایت قرار میدم تا این فعالیت منجر بهبود Cumulative Layout Shift بشه (اعتنا فرمایید گفتیم بهبود و نگفتیم رفع بی نقص این اشتباه).