رفتن به مطلب

به هم ریختگی فونت قبل از بارگذاری کامل سایت


پست های پیشنهاد شده

سلام دوستان. من وقتی سایتم را با مرورگری برای اولن بار باز می کنم, ابتدا متن ها با tahoma یا arial نشون داده میشوند و بعد از حدود یک ثانیه که css قالب بارگذاری می شود, با فونت خود قالب (فونت نسیم) نشون داده می شوند.
حالا مثلا اندازه فونت 12px در فونت tahoma و فونت نسیم متفاوت است و این باعث بی ریختی سایت می شود و هم چنین در cls تاثیر منفی می گذارد.
چگونه میشه از این اتفاق جلوگیری کرد. و همون ابتدا فقط با فونت خود قالب نشون بده.

لینک به ارسال

سلام

تا جایی که من دیدم این قضه اتفاقا خوبه و یه تکنیک هست

مثلا به دیجی کالا ایراد گرفته بودن این رو که زمان لود طولانی داره و فونتی نداره که قبل بارگزاری کامل کاربر بتونه بخونه مطالب رو و تا بارگزاری کامل سایت بدون فونته

به نظرم یه امتیازه

 

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

لینک به ارسال
در 4 ساعت قبل، HAMRAH گفته است :

سلام

تا جایی که من دیدم این قضه اتفاقا خوبه و یه تکنیک هست

مثلا به دیجی کالا ایراد گرفته بودن این رو که زمان لود طولانی داره و فونتی نداره که قبل بارگزاری کامل کاربر بتونه بخونه مطالب رو و تا بارگزاری کامل سایت بدون فونته

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

بله درست است. بنده نیز همین را عرض کردم! یعنی تا بارگزاری شدن فونت خود قالب، متنی نمایش داده نشه

ویرایش شده توسط miraziz
لینک به ارسال
در 3 ساعت قبل، miraziz گفته است :

بله درست است. بنده نیز همین را عرض کردم! یعنی تا بارگزاری شدن فونت خود قالب، متنی نمایش داده نشه

سلام، خیر، دقیقا حالتی که @HAMRAH اشاره کردند صحیح هست، یعنی گوگل توصیه می‌کنه تا لود کامل فونت، شما با همون فونت ساده نمایش بدید، اما صفحه‌ی سفید نباشه، حالتی که الان روی سایتتون هست درسته، اما اگر می‌خواین این مدل نباشه، در جایی که فونت رو تعریف کردید (در بخش font-face) کد display: swap رو بردارید.

لینک به ارسال
در ۱ ساعت قبل، فرشاد گوهری گفته است :

سلام، خیر، دقیقا حالتی که @HAMRAH اشاره کردند صحیح هست، یعنی گوگل توصیه می‌کنه تا لود کامل فونت، شما با همون فونت ساده نمایش بدید، اما صفحه‌ی سفید نباشه، حالتی که الان روی سایتتون هست درسته، اما اگر می‌خواین این مدل نباشه، در جایی که فونت رو تعریف کردید (در بخش font-face) کد display: swap رو بردارید.

سلام ممنون از پاسختان. من از display:block استفاده کرده ام. اما روشی که شما گفتید در cls تاثیر منفی دارد آخه

لینک به ارسال
در 9 ساعت قبل، miraziz گفته است :

سلام ممنون از پاسختان. من از display:block استفاده کرده ام. اما روشی که شما گفتید در cls تاثیر منفی دارد آخه

والا تا جایی که من دیدم CLS بیشتر به خود المان‌های اصلی صفحه ایراد می‌گیره، من الان سایت خودم با همین روش هست و CLS رو اکثرا زیر 0.1 نشون میده شما یکبار فونت رو روی حالت swap هم تست کنید، مطمئنید این مشکل CLS به خاطر فونتتون هست؟ من به تجربه دیدم وقتی عکس‌های قسمت بالای سایت روی حالت Lazy Load هستند و بعد از لود صفحه، عکس‌ها نشون داده میشه CLS توی اون صفحات بالا میره.

لینک به ارسال
در 3 ساعت قبل، فرشاد گوهری گفته است :

والا تا جایی که من دیدم CLS بیشتر به خود المان‌های اصلی صفحه ایراد می‌گیره، من الان سایت خودم با همین روش هست و CLS رو اکثرا زیر 0.1 نشون میده شما یکبار فونت رو روی حالت swap هم تست کنید، مطمئنید این مشکل CLS به خاطر فونتتون هست؟ من به تجربه دیدم وقتی عکس‌های قسمت بالای سایت روی حالت Lazy Load هستند و بعد از لود صفحه، عکس‌ها نشون داده میشه CLS توی اون صفحات بالا میره.

نه مشکل cls قالب من به خاطر فونت نیست. من چند مقاله در مورد cls خواندم که در آنها به دو مرود اساسی که اشاره کرده بودند یکی همین foit و fout در فونت ها بود و دیگری هم تعیین عرض ارتفاع برای تصاویر. از قضا به هیچ وجه به lazy load اشاره ای نکرده بود. الان هم در گزارش gtmetrix و page speed insights در قسمت Avoid large layout shifts به دو مورد اساسی ایراد میگیره که مربوط به بدنه ی اصلی مطالب(کد زیر) و منوی بالای سایت است که به هیچ وجه نمیدونم منظورش, ایراد در کدوم قسمت کدها است.

<div class="content section-inner-index">



https://gtmetrix.com/reports/echolalia.ir/jK9CB6nk/

ویرایش شده توسط miraziz
لینک به ارسال

سلام دوستان. من یک بار کل فونت های قالب را به sans-serif تغییر دادم و cls از 0.36 به 0.01 کاهش پیدا کرد. یعنی عالی شد. یعنی اصلی ترین عامل کاهش cls از همان جابجایی عناصر صفحه با تغییر فونت پیش فرض به فونت قالب اتفاق می افتد.
دلیل آن هم این است که مثلا 12px  در فونت sans-serif و فونت نسیم بسیار متفاوت است و این باعث تغییر اندازه ارتفاق سطر ها می شود.
ممنون می شوم دوستان انجمن یک راه حل جامعی برای این مشکل پیشنهاد دهند

لینک به ارسال
در 4 ساعت قبل، miraziz گفته است :

سلام دوستان. من یک بار کل فونت های قالب را به sans-serif تغییر دادم و cls از 0.36 به 0.01 کاهش پیدا کرد. یعنی عالی شد. یعنی اصلی ترین عامل کاهش cls از همان جابجایی عناصر صفحه با تغییر فونت پیش فرض به فونت قالب اتفاق می افتد.
دلیل آن هم این است که مثلا 12px  در فونت sans-serif و فونت نسیم بسیار متفاوت است و این باعث تغییر اندازه ارتفاق سطر ها می شود.
ممنون می شوم دوستان انجمن یک راه حل جامعی برای این مشکل پیشنهاد دهند

سلام دوباره. دوستان این مسئله را با line-height حل می شود. امیدوارم برای دیگر اعضا نیز مفید باشد

لینک به ارسال
در 4 ساعت قبل، coder000 گفته است :

سلام درمورد Largest Contentful Paint راهنمایی می کنید؟

در اینترنت آوزش های خوبی برای این موارد وجود دارد ولی برای شروع و تجزیه و تحلیل پارامترهای موثر در سرعت لود صفحه، مقاله‌ی جامع زیر از نوین بلاگ را بخوانید.
https://www.novin.com/blog/everything-about-site-speed/

همچنین از لینک زیر می توانید در مورد LCP هم به صورت دقیق‌تر و مجزا مطالعه کنید
https://ivahid.com/blog/fix-largest-contentful-paint/

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...