۲ – تبلیغات باطن ورقه
تبلیغات که الان بسیار بسیار باطن تارنماها زیاد گردیده، مخصوصا از هنگامی که ماشین کرایه ایهای تبلیغات کلیکی آومدن. قرار دادن کد اسکریپت این وبسایتها برای اکران تبلیغات میتونه روی زمان بر کردن مجال CLS تاثیر آموزش سئو مشهد بذاره.
یا این که embeds و iframes چندین وبسایتها، فیلمها، نقشهها و … که میتونه یک shift بد رو برای یوزرها تارنما آموزش سئو در مشهد شما فیس بده.
به عنوان مثال می تونید این موردها رو در انتهای برگه بارگذاری نمایید و یا این که از پیشین به اون نصیب width و height بدید. اما اینراه حل توی اکثر مفاد برای کلیه کاربردی می باشد.
۳ – محتوای پویای غیرمنتظره
اینجانب پیش از این تلفن همراه سابق خودم رو سرچ کردم و وارد دیجی محصول شدم، داشتم ویژگی ها موبایل سابق خودم نگاه میکردم که یهو برگه رفت پایبن خیس!! چرا؟
زیرا نو نصیب تولیدها مربوط به اون تلفن همراه کهن (برای مثال اخرین ورژن) بالای مال شد. اما الان این ایراد حل کردن البته هر محتوایی مثل محصول ها مرتبط یا این که مقالهها مرتبط و یا این که اومدن خبر نامه به طور غیرمنتظره بین قسمت های داخلی تارنما که منجر به وجود آوردن Shift ورقه میشه پرهیز فرمائید.
۴ – فونت همون اولیه بار گذاری نشه بد نمیشه
چه کنیم؟:
از font-display برای از فی مابین بردن FOIT و فعال کردن FOUT به کارگیری نمایید و در غایت برای حل کردن خلل FOUT بهتره (همون Layout Shift) از rel="preload" کردن فونت در head وبسایت به کار گیری نمایید. (امیدوارم فهمیده باشی چی میگم، اینجا رو می بایست دارای تخصص جاری ساختن بده برات) با نمونه عالی توضیح میدم:
در نمونه بالا اومدیم از خصوصیت font-display: swap; به کارگیری کردیم تا شرایط FOUT فعال بشه و سرعت خوب بشه، درحال حاضر درصورتیکه دقت نمائید یک آدرسی اون فونت بالا داره در قسمت src. اون نشانی برمیدارم و در کدی مشابه به ذیل درج میکنم و در هدر وبسایت قرار میدم تا این شغل سبب ساز بهبود Cumulative Layout Shift بشه (اعتنا فرمائید گفتیم بهبود و نگفتیم رفع بی نقص این غلط).
۵ – برنامه خردسالان ها
اما گاهی این برنامه کودکان ها در بعضا لایهها سوا چهارچوب به گوشه و کنار نیاز دارن و منجر میشه Shift در ورقه چهره بده. پس توصیه میشه در صورتی شما کارتن دارید و یا این که به یاری CSS این برنامه خردسالان ها رو نوشتید یک اعتنا ویژه داشته باشید.
۶ – و دیگر مفاد در بهبود مجال Cumulative Layout Shift
مطمئن باشید چندین موردها دیگر میباشد که روی CLS اثر داره و کسی روحش خبر نداره زیرا برای هر سایتی میتونه چند موردها استثنا صورت بده و می بایست رسیدگی کرد، در نرم افزار نویسی ما انقدر تداخلها داریم که میتونه بستر ساز این اشتباهات باشه.
گاهی با تغییر و تحول هاست برخی مشکلاتی که پندار نمیکنیم حل میشه، گاهی با تغییر تحول پوسته برخی مشکلاتی که تامل نمیکنیم حل میشه و گاهی با تغییر و تحول پلاگین یا این که غیرفعال کردن برخی مورد ها و یا این که حتی بهبود برخی از اشتباهات و ارورهای دیگر GTMetrix میبینید که CLS بهبود پیدا کرد.
درصورتی که داده ها بیشتری درباره CLS خواستید میتونید نوشته ی علمی انگلیسی وبسایت web.dev رو هم بخونید.
Layout Shift مدام بد وجود ندارد!
مواقعی که اشاره کردیم مرتبط با Unexpected Layout Shift بود به عبارت دیگر تغییراتی که ما انتظار نداشتیم اما گاهی وقتها ما یوزرها یکسری تغییرات رو هم انتظار داریم. به عنوان مثال:
روی یکی سوال ها متداول کلیک می کنی و انتظار داری شیت به قولی به سمت پایینن shift بشه یعنی فعالیت Layout Shift حادثه میوفته. این مفاد Expected Layout Shift میتونیم بگیم.
عده بندی CLS
CLS گفتیم از Cumulative Layout Shift میاد و این میزان هم در Lighthouse گوگل است و هم در گزارش Core Web Vitals گوگل سرچ کنسول و هم در GTMetrix نقش داره.
CLS چیست؟ گفتیم که معیاریه برای رسیدگی پایداری موادتشکیل دهنده، در طی بار گذاری شدن برگه و به طور کامل روی ساخت تجربیات کاربری تمرکز داره. محتواها و عنصرها برگه نباید بهشکل غیرمنتظرهای جابجا بشن و سبب سردرگمی مخاطب بشن.
آحاد انتقالهای موادسازنده ورقه، ترازو Cumulative Layout Shift رو معلوم میکنه که هرچقدر کمتر باشه، کاغذ ما پایدارتر و UX عالی خواهد بود. انتقال محتواها بعضی اوقات به جهت تبلیغات جان دار در شیت می باشد که ناگهان بالای برگه ظواهر میشه و سبب ساز انتقال بقیه محتواهای شیت به سمت ذیل میشه.
نکته قابل توجه: در قسمت خطاهای Structure خطایی با تیتر Avoid large layout shifts داریم که دقیقا مرتبط با همین نوشته ی علمی میباشد، پس با خوندن این نوشتهیعلمی هم گزارش خطاهای Structure و هم گزارش Performance در جی تی متریکس شما بهود پیدا میکنه.
۲ – تبلیغات باطن ورقه
تبلیغات که الان بسیار بسیار باطن تارنماها زیاد گردیده، مخصوصا از هنگامی که ماشین کرایه ایهای تبلیغات کلیکی آومدن. قرار دادن کد اسکریپت این وبسایتها برای اکران تبلیغات میتونه روی زمان بر کردن مجال CLS تاثیر آموزش سئو مشهد بذاره.
یا این که embeds و iframes چندین وبسایتها، فیلمها، نقشهها و … که میتونه یک shift بد رو برای یوزرها تارنما آموزش سئو در مشهد شما فیس بده.
به عنوان مثال می تونید این موردها رو در انتهای برگه بارگذاری نمایید و یا این که از پیشین به اون نصیب width و height بدید. اما اینراه حل توی اکثر مفاد برای کلیه کاربردی می باشد.
۳ – محتوای پویای غیرمنتظره
اینجانب پیش از این تلفن همراه سابق خودم رو سرچ کردم و وارد دیجی محصول شدم، داشتم ویژگی ها موبایل سابق خودم نگاه میکردم که یهو برگه رفت پایبن خیس!! چرا؟
زیرا نو نصیب تولیدها مربوط به اون تلفن همراه کهن (برای مثال اخرین ورژن) بالای مال شد. اما الان این ایراد حل کردن البته هر محتوایی مثل محصول ها مرتبط یا این که مقالهها مرتبط و یا این که اومدن خبر نامه به طور غیرمنتظره بین قسمت های داخلی تارنما که منجر به وجود آوردن Shift ورقه میشه پرهیز فرمائید.
۴ – فونت همون اولیه بار گذاری نشه بد نمیشه
چه کنیم؟:
از font-display برای از فی مابین بردن FOIT و فعال کردن FOUT به کارگیری نمایید و در غایت برای حل کردن خلل FOUT بهتره (همون Layout Shift) از rel="preload" کردن فونت در head وبسایت به کار گیری نمایید. (امیدوارم فهمیده باشی چی میگم، اینجا رو می بایست دارای تخصص جاری ساختن بده برات) با نمونه عالی توضیح میدم:
در نمونه بالا اومدیم از خصوصیت font-display: swap; به کارگیری کردیم تا شرایط FOUT فعال بشه و سرعت خوب بشه، درحال حاضر درصورتیکه دقت نمائید یک آدرسی اون فونت بالا داره در قسمت src. اون نشانی برمیدارم و در کدی مشابه به ذیل درج میکنم و در هدر وبسایت قرار میدم تا این شغل سبب ساز بهبود Cumulative Layout Shift بشه (اعتنا فرمائید گفتیم بهبود و نگفتیم رفع بی نقص این غلط).
۵ – برنامه خردسالان ها
اما گاهی این برنامه کودکان ها در بعضا لایهها سوا چهارچوب به گوشه و کنار نیاز دارن و منجر میشه Shift در ورقه چهره بده. پس توصیه میشه در صورتی شما کارتن دارید و یا این که به یاری CSS این برنامه خردسالان ها رو نوشتید یک اعتنا ویژه داشته باشید.
۶ – و دیگر مفاد در بهبود مجال Cumulative Layout Shift
مطمئن باشید چندین موردها دیگر میباشد که روی CLS اثر داره و کسی روحش خبر نداره زیرا برای هر سایتی میتونه چند موردها استثنا صورت بده و می بایست رسیدگی کرد، در نرم افزار نویسی ما انقدر تداخلها داریم که میتونه بستر ساز این اشتباهات باشه.
گاهی با تغییر و تحول هاست برخی مشکلاتی که پندار نمیکنیم حل میشه، گاهی با تغییر تحول پوسته برخی مشکلاتی که تامل نمیکنیم حل میشه و گاهی با تغییر و تحول پلاگین یا این که غیرفعال کردن برخی مورد ها و یا این که حتی بهبود برخی از اشتباهات و ارورهای دیگر GTMetrix میبینید که CLS بهبود پیدا کرد.
درصورتی که داده ها بیشتری درباره CLS خواستید میتونید نوشته ی علمی انگلیسی وبسایت web.dev رو هم بخونید.
Layout Shift مدام بد وجود ندارد!
مواقعی که اشاره کردیم مرتبط با Unexpected Layout Shift بود به عبارت دیگر تغییراتی که ما انتظار نداشتیم اما گاهی وقتها ما یوزرها یکسری تغییرات رو هم انتظار داریم. به عنوان مثال:
روی یکی سوال ها متداول کلیک می کنی و انتظار داری شیت به قولی به سمت پایینن shift بشه یعنی فعالیت Layout Shift حادثه میوفته. این مفاد Expected Layout Shift میتونیم بگیم.
عده بندی CLS
CLS گفتیم از Cumulative Layout Shift میاد و این میزان هم در Lighthouse گوگل است و هم در گزارش Core Web Vitals گوگل سرچ کنسول و هم در GTMetrix نقش داره.
CLS چیست؟ گفتیم که معیاریه برای رسیدگی پایداری موادتشکیل دهنده، در طی بار گذاری شدن برگه و به طور کامل روی ساخت تجربیات کاربری تمرکز داره. محتواها و عنصرها برگه نباید بهشکل غیرمنتظرهای جابجا بشن و سبب سردرگمی مخاطب بشن.
آحاد انتقالهای موادسازنده ورقه، ترازو Cumulative Layout Shift رو معلوم میکنه که هرچقدر کمتر باشه، کاغذ ما پایدارتر و UX عالی خواهد بود. انتقال محتواها بعضی اوقات به جهت تبلیغات جان دار در شیت می باشد که ناگهان بالای برگه ظواهر میشه و سبب ساز انتقال بقیه محتواهای شیت به سمت ذیل میشه.
نکته قابل توجه: در قسمت خطاهای Structure خطایی با تیتر Avoid large layout shifts داریم که دقیقا مرتبط با همین نوشته ی علمی میباشد، پس با خوندن این نوشتهیعلمی هم گزارش خطاهای Structure و هم گزارش Performance در جی تی متریکس شما بهود پیدا میکنه.

نرخ کلیک (CTR)