چگونه فونت وب سایت را برای CORE WEB VITALS بهبود ببخشیم؟

تحریریه منتوریکس
تحریریه منتوریکس
00:34، 1400/03/12
چگونه فونت وب سایت را برای CORE WEB VITALS بهبود ببخشیم؟
1 رای    میانگین 5/5
لطفا شما هم امتیاز بدهید!

چگونه فونت وب سایت را برای CORE WEB VITALS بهبود ببخشیم؟


معیارهای core web vitals به معیارهای کلیدی در سئو سایت تبدیل شده‌اند. این معیارها به تجربه‌ای که کاربر هنگام مواجهه با سایت شما دارد توجه می‌کند و بر همین اساس به سایتتان رتبه می‌دهد. فونت سایت هم از جمله معیارهای کلیدی در ساختن تجربه کاربری مثبت است. یک وب – فونت کامل شامل استایل‌ها و گلیف‌های غیرضروری می‌شود. از این استایل‌ها و گلیف‌ها شاید هیچ استفاده‌ای نشود، ولی در عین حال حجم دانلود را به‌مراتب افزایش می‌دهند. در این مقاله قصد داریم تا درباره بهینه‌سازی بارگذاری وب – فونت‌ها با شما صحبت کنیم. به این طریق کاربر فقط همان فونتی که مشاهده می‌کند را دانلود خواهد کرد.
در مواقعی که وب – فونت شما خیلی حجیم باشد، می‌توان از کد CSS با نام @font-face استفاده کرد. با کمک این روش می‌توانید خانواده فونت را به یک سری مجموعه منابع تقسیم کنیم. به‌عنوان مثال وب – فونت شما به دو دسته Unicode و Style Variants تقسیم می‌شوند. با این کار مرورگر فقط آن دسته‌ای که نیاز است را دانلود کرده و رندر می‌کند. البته در هنگام استفاده از این روش باید دقت داشته باشید تا باعث تأخیر در بارگذاری نوشته و فونت نشوید.

برای پیدا کردن آشنایی اولیه با معیارهای core web vitals این مطلب را بخوانید:

راهنمای جامع Core web vitals و توصیه‌هایی برای بهبود معیارها

با عملکرد پیش‌فرض آشنا شوید

روش لیزی – لودینگ (Lazy Loading) یک روش رندرینگ نوشته همراه با تأخیر است. در این روش، مرورگر ابتدا یک نمودار درختی برای رندرینگ ایجاد می‌کند. این نمودار درختی به درخت‌های DOM و CSSOM وابسته است. مرورگر از این نمودار استفاده می‌کند تا پیش از آنکه یک نوشته را رندر کند، متوجه شود که آن نوشته از کدام فونت استفاده می‌کند. در نتیجه درخواست یک فونت خاص تا بارگذاری منابع ضروری به تأخیر می‌افتد. به همین خاطر مرورگر تمام رندرینگ‌های نوشته را تا زمانی که منابع فچ شوند، مسدود می‌کند.

فونت وب سایت

  1. مرورگر اطلاعات HTML را درخواست می‌کند
  2. مرورگر شروع به آنالیز پاسخ‌های HTML کرده و DOM را ایجاد می‌کند
  3. مرورگر درخواست‌های تمام دیسپچ ها، CSS ها، JSها و سایر منابع را پیدا می‌کند
  4. مرورگر بعد از اینکه محتوای CSS دریافت شد، CSSOM را می‌سازد و آن را با درخت DOM ترکیب می‌کند تا درخت رندرینگ را ایجاد کند
  5. مرورگر تصمیم می‌گیرد که کدام محتوا را نشان دهد

در این حالت، محتوای اصلی صفحه پیش از بارگذاری فونت انجام می‌شود. به همین خاطر امکان دارد شاهد مشکل Blank Text Problem شوید. در چنین وضعیتی، مرورگر صفحه را بدون متن بارگذاری می‌کند. برای جلوگیری از بروز این مشکل می‌توانید از font-display استفاده کنید. با این کار نحوه عملکرد مرورگر را در زمانی که فونت‌ها قابل دسترسی نباشند، کنترل خواهید کرد. به این طریق هم مشکل Blank Text حل می‌شود و هم از تغییرات ناگهانی پوسته جلوگیری خواهد شد.

منابع وب – فونت خود را پری – لود کنید

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

تأخیر رندرینگ متن را شخصی‌سازی کنید

پری – لودینگ باعث می‌شود که احتمال در دسترس بودن وب – فونت زمانی که محتوای پیج رندر می‌شود، بیشتر باشد؛ اما هیچ تضمینی در این مسئله وجود ندارد. در این شرایط باز هم شما باید عملکرد مرورگر را زمانی که متن را رندر می‌کند، با استفاده از font-familyدر نظر بگیرید. در این مقاله به شما توصیه می‌کنیم که از Invisible Text اجتناب کنید. هرچند از مرورگرهای مدرن با کمک  font-displayمی‌توانید بخواهید که عملکردی مشابه داشته باشد. دقیقا مشابه تایم – اوت فونت برخی از مرورگرها، کد font-displayلایف تایم دانلود فونت را به سه بخش مختلف تقسیم می‌کند:

  1. بازه اول بازه فونت – بلاک است. در مدت این بازه اگر ظاهر فونت بارگذاری نشود، به جا هر تلاش دیگر، باید invisible fallback font face رندر شود. از طرف دیگر اگر ظاهر فونت در این مدت بارگذاری شد، فونت – فیس به‌صورت نرمال استفاده می‌شود.
  2. بازه دوم، بازه Font Swap است. این اتفاق دقیقاً بعد از فونت – بلاک رخ می‌دهد. در طول این بازه اگر فونت – فیس بارگذاری نشد، باید با یک فال – بک، فونت فیس رندر شود. اگر فونت فیس به‌صورت موفقیت‌آمیز در بازه Swap بارگذاری شد، از فونت فیس به‌صورت نرمال استفاده می‌شود.
  3. بازه سوم، بازه Font Failure است. این بازه دقیقاً بعد از بازه Font Swap اجرا می‌شود. اگر تا زمانی که این بازه آغاز شود، فونت فیس بارگذاری نشده باشد، این را به‌عنوان خطا در بارگذاری لحاظ می‌کند و باعث فونت فال – بک نرمال می‌شود. در غیر این صورت، از فونت فیس به‌صورت نرمال استفاده خواهد شد.

با درک کامل این سه بازه شما می‌توانید از font-display استفاده کنید تا تصمیم‌بگیرید فونت شما در زمانی که دانلود شده باشد یا اینکه دانلود نشده باشد، چطور بارگذاری شود. برای کار با font-display باید @font-faceرا به کد خود اضافه کنید:

فونت وب سایت

در استفاده از Font Display می‌توانید از مقادیر زیر استفاده کنید:

  • Auto
  • Block
  • Swap
  • Fallback
  • Optional

بررسی Font Loading API

با استفاده و کد CSS مخصوص این کار یعنی font-display شما می‌توانید کنترل بسیار مناسبی بر بارگذاری و رندرینگ فونت خود داشته باشید؛ اما اگر می‌خواهید شخصی‌سازی بیشتری انجام دهید، می‌توانید از یک جاوا اسکریپت استفاده کنید. Font Loading API به شما کمک می‌کند تا فونت فیس CSS را دستکاری کنید، روند دانلود آن را پیگیری کنید و عملکرد پیش‌فرض آن را در Lazyload تغییر دهید. به‌عنوان مثال اگر مطمئن هستید که به یک استایل خاص فونت نیاز است، می‌توانید آن را تعریف کنید تا مرورگر به سرعت منبع فونت را فچ کند:

فونت وب سایت

به یک استراتژی کش مناسب نیاز خواهید داشت

منابع فونت معمولاً منابع استاتیک هستند و آپدیت فراوانی نیاز ندارند. به همین خاطر از بابت انقضاء منابع آسوده خاطر هستید و می‌توانید conditional ETag header و optimal Cache-Control policy را برای  تمامی منابع فونت مشخص کنید. اگر کاربر شما از یک Service Worker استفاده کند، ارائه منابع فونت با یک استراتژی Cache – first  می‌تواند مناسب باشد. توجه داشته باشید که نباید فونت را با استفاده از localStorage یا IndexedDB ذخیره کنید. هر کدام از اینها دارای مشکلات عملکرد منحصر‌به‌فرد هستند. حافظه کش HTTP مرورگر بهترین مکانیزم برای رساندن منابع فونت به مرورگر محسوب می‌شود.

چک لیست نهایی برای بارگذاری وب فونت

  • با استفاده از، font-display یا the Font Loading API:، بارگذاری و رندرینگ فونت خود را شخصی‌سازی کنید: عملکرد پیش‌فرض Lazyloading باعث تأخیر در رندرینگ نوشته می‌شود. این پلتفرم‌های وب به شما کمک می‌کند تا این عملکرد را برای فونت‌های خاص تغییر دهید و استراتژی تایم – اوت و رندرینگ را برای محتواهای مختلف پیج خود شخصی‌سازی کنید.
  • Revalidation را مشخص کرده و سیاست‌های بهینه‌سازی کش را لحاظ کنید: منابع فونت همگی استاتیک هستند و به ندرت آپدیت می‌شوند. به همین خاطر می‌توانید مطمئن شوید که سرورها از long-lived max-age timestamp و توکن revalidation استفاده می‌کنند. این دو سیاست اجازه استفاده مجدد از فونت‌های خاص را بین صفحات مختلف صادر می‌کند. اگر از یک Service Worker استفاده می‌کنید، استراتژی Cache-first می‌تواند مناسب باشد.

اندازه وب فونت را کاهش دهید

تایپوگرافی یکی از روش‌های عالی برای طراحی، برندینگ، خوانایی و قابلیت وصول محسوب می‌شود. با کمک وب فونت‌ها می‌توانید از تمامی مزایای نام برده شده بهره‌مند شود. متن قابل در پیج قابل انتخاب، قابل جستجو، قابل بزرگنمایی و دارای قابلیت تطابق با DPI است و همچنین بدون در نظر گرفتن رزولوشن و اندازه تصویر، همواره شارپ و عالی به نظر می‌رسد. استفاده از وب فونت‌ها برای یک طراحی عالی، UX و عملکرد مناسب است. به همین خاطر بهینه‌سازی وب فونت‌ها نقش مهمی در بهبود عملکرد کلی وبسایت را ایفا می‌کند. هر فونت یک منبع اضافی محسوب می‌شود و برخی از فونت‌ها شاید باعث انسداد رندرینگ متن شوند؛ اما اینطور نیست که همیشه حضور وب فونت‌ها باعث کاهش سرعت رندرینگ شوند. بلکه به‌صورت عکس، فونت‌های بهینه‌سازی شده با کمک یک استراتژی مناسب برای بارگذاری، می‌توانند به کاهش حجم بارگذاری صفحه کمک کنند و در نتیجه زمان رندرینگ پیج را کاهش دهند. پس می‌توان گفت که در کنار روش‌های بالا، می‌توانید از روش‌های دیگر برای بهینه‌سازی عملکرد فونت‌ها استفاده کنید.

ساختار یک وب فونت

یک وب فونت مجموعه‌ای از گلیف‌ها است و هر گلیف به شکل یک وکتور است که حرف یا یک علامت را نشان می‌دهد. در نتیجه از دو متغیر برای تعیین اندازه یک فایل فونت استفاده می‌شود: اولاً پیچیدگی مسیر وکتور هر گلیف و دوماً تعداد گلیف در هر فونت. به‌عنوان مثال Sans را باز کنید که یکی از معروف‌ترین وب فونت‌ها محسوب می‌شود. این وب فونت شامل 897 گلیف است که شامل لاتین، یونانی و کاراکترهای سیریلیک می‌شود.

ساختار یک وب فونت

زمانی که یک فونت را انتخاب می‌کنید، حتماً باید در نظر داشته باشید که کدام مجموعه کاراکتر را ساپورت می‌کند. اگر باید از چند زبان در وبسایت خود استفاده کنید، باید از یک فونت استفاده کنید که از نظر ظاهری برای کاربر یکسان باشد. به‌عنوان مثال Google Noto Font Family تمام زبان‌های جهان را پشتیبانی می‌کند. البته اندازه Noto با تمام زبان‌ها حدود 1.1 گیگابایت است.

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

به‌صورت کلی وب فونت‌ها شامل چهار نوع فرمت می‌شوند:

  • EOT
  • TTF
  • WOFF
  • WOFF2

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

  • از WOFF2 جایی استفاده کنید که مرورگر از آن پشتیبانی می‌کند؛
  • از WOFF اکثر مرورگرها پشتیبانی می‌کنند؛
  • TFF برای اندروید کمتر از 4.4 مناسب است؛
  • EOT برای مرورگرهای IE نسخه کمتر از 9 مناسب است.

اندازه فونت را با فشرده‌سازی کاهش دهید

همان طور که اشاره کردیم، یک فونت شامل گلیف‌های مختلف می‌شود. هر کدام از این‌ها یک سری مسیر را شامل می‌شوند تا یک حرف را شکل دهند. هر گلیف با دیگری متفاوت است؛ اما همه آن‌ها شامل اطلاعات مشابه می‌شوند که می‌توان آن‌ها را با GZIP یا سایر فشرده‌ساز‌ها، فشرده کرد:

  • فرمت‌های EOT و TFF به‌صورت پیش‌فرض فشرده‌سازی نمی‌شوند. مطمئن شوید که پیکربندی مناسب را برای استفاده از فشرده‌ساز GZIP لحاظ کرده باشید؛
  • فرمت WOFF دارای فشرده‌ساز پیش‌فرض است. مطمئن شوید که WOFF حتماً از فشرده‌سازی بهینه استفاده می‌کند؛
  • فرمت WOFF2 دارای الگوریتم خاص فشرده‌سازی و پیش پردازش است تا حجم فایل را تا 30 درصد کاهش دهد.

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

فرمت درست را انتخاب کنید

هر @font-face نام یک خانواده فونت را ارائه می‌دهد و به‌عنوان یک گروه منطقی از یک سری اطلاعات همانند خواص فونت، استایل، وزن، کشش و src descriptor نگهداری می‌کند. این اطلاعات می‌توانند یک لیست اولویت‌بندی شده از مکان منابع هر کدام از فونت‌ها ایجاد کنند: 

فرمت درست را انتخاب کنید
در مثال بالا، یک خانواده فونت با نام Awsome Font همراه با دو استایل نرمال و ایتالیک تعریف شده است و هر کدام از آن‌ها دارای یکی سری منابع فونت مختلف هستند. از طرف دیگر هر src descriptor شامل یک لیست اولویت‌بندی شده است که با کاما آن را از لیست منابع جدا کرده‌اند:

  • دستور local() به شما اجازه می‌دهد تا فونت‌های نصب شده محلی را بارگذاری کرده و از آن‌ها به‌عنوان مرجع استفاده نمایید؛
  • دستور url() به شما اجازه می‌دهد تا فونت‌های اکسترنال را بارگذاری کنید و به آن‌ها اجازه می‌دهد تا شامل format() اختیاری باشند. این فرمت اختیاری نشان دهنده فرمت فونتی است که توسط URL به‌عنوان مرجع قرار داده شده است.

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

  1. مرورگر پوسته صفحه را بارگذاری می‌کند و تشخیص می‌دهد که به کدام استایل فونت برای رندر یک متن خاص بر روی صفحه نیاز است؛
  2. برای هر فونت مورد نیاز، مرورگر چک می‌کند که آیا فونت به‌صورت محلی موجود است یا نه؛
  3. اگر فونت به‌صورت محلی موجود نباشد، مرورگر کد را به این شکل از سر می‌گیرد:
  • اگر فرمت – هینت موجود باشد، مرورگر پیش از شروع دانلود چک می‌کند که آیا مرورگر از این هینت پشتیبانی می‌کند یا نه. اگر از این هینت پشتیبانی نکند، به سراغ هینت بعدی می‌رود.
  • اگر هیچ فرمت – هینتی موجود نباشد، مرورگر منبع اصلی را دانلود می‌کند.

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

Unicode-range subsetting

علاوه بر خواص فونت همانند استایل، وزن و استرج، دستور @font-face به شما اجازه می‌دهدتا یک سری کد – پوینت Unicode که توسط هر منبع پشتیبانی می‌شود را نیز تعریف کنید. این مسئله به شما کمک می‌کند تا یک Unicode فونت بزرگ را به زیرمجموعه‌های کوچک‌تر همانند لاتین، سیریلیک و یونانی تقسیم کرده و حین رندرینگ متن بر روی یک صفحه خاص، فقط گلیفی که به آن نیاز است را دانلود نمایید.

unicode-range descriptor به شما اجازه می‌دهد تا یک لیست comma-delimited از مقادیر رنج را مشخص کنید. این لیست می‌تواند به سه شکل مختلف باشد:

  • سینگل کد – پوینت همانند U+416
  • رنج اینتروال یا همان فاصله‌دار. به‌عنوان مثال U+400-4ff که این بخش نشان دهنده رنج شروع و پایان کد پوینت است؛
  • رنج وایلد کارت (به‌عنوان مثال U+4??): کاراکتر؟ نشان دهنده هر عدد هگزادسیمال است.

به‌عنوان مثال شما می‌توانید خانواده فونت Awesome را به زیرمجموعه ژاپنی و لاتین تقسیم کنید. هر کدام از آن‌ها بر اساس نیاز دانلود می‌شوند: 

Unicode-range subsetting
استفاده از زیرمجموعه رنج یونی-کد و فایل‌های تفکیک شده برای هر استایل به شما اجازه می‌دهد تا یک مجموعه از خانواده فونت را تعریف کنید که سریع‌تر و بهتر دانلود می‌شوند. به این ترتیب کاربران فقط همان زیرمجموعه‌ای که نیاز داشته باشند را دانلود می‌کنند و نیازی نیست تا همه زیرمجموعه‌ها را دانلود نمایند تا بتوانند از صفحه استفاده کنند. اثکر مرورگرها از Unicode-range پشتیبانی می‌کنند. برای اینکه با مرورگرهای قدیمی سازگاری داشته باشید، می‌توانید از یک فال – بک به Manual Subsetting استفاده کنید. به این ترتیب شما یک زیرمجموعه تکی تعریف می‌کنید که شامل تمام زیرمجموعه‌های ضروری می‌شود و مابقی را از مرورگر مخفی می‌کنید. به‌عنوان مثال اگر صفحه شما از کاراکتر لاتین استفاده می‌کند، شما می‌توانید گلیف‌های دیگر را حذف کنید و فقط زیرمجموعه‌ اساسی را به مخاطب ارائه دهید.

1. تشخیص دهید که به چه زیرمجموعه‌ای نیاز است

  • اگر مرورگر از unicode-range subsetting پشتیبانی می‌کند، پس به‌صورت خودکار از زیرمجموعه صحیح استفاده می‌کند. در این حالت فقط باید تمام زیرمجموعه‌ها را به پیج ارائه دهید و با کمک دستور @font-face به آن بگویید که کدام Unicode-range مناسب است.
  • اگر مرورگر از Unicode-range subsetting پشتیبانی نکند، پس باید تمام زیرمجموعه‌های غیرضروری را از کاربر مخفی کنید و دولوپر باید در این مواقع، زیرمجموعه‌ای را به‌عنوان زیرمجموعه اصلی برای مرورگر تعریف کنید.

2. یک سری زیر مجموعه فونت ایجاد کنید

  • با کمک ابزار اپن - سورس  pyftsubset یک سری زیرمجموعه فونت بسازید و آن‌ها را بهینه‌سازی کنید؛
  • بعضی از سرویس‌های فونت به شما اجازه می‌دهند تا با کمک پارامترهای شخصی‌سازی شده کوئری، خودتان به‌صورت دستی زیرمجموعه سازی را انجام دهید. در این روش شما می‌توانید از روش دستی استفاده کنید تا یک سری زیرمجموعه برای پیج خود ایجاد کنید. برای این کار باید با ارائه‌دهنده فونت‌های وبسایت خود مشورت کنید.

ترکیب و انتخاب فونت

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

ترکیب و انتخاب فونت

در مثال بالا یک خانواده فونت با سه وزن مختلف بولد 400 (رگولار) 700 (بولد) و 900 (اکسترا بولد) نشان داده شده است. مرورگر تمام استایل‌های بین این سه وزن را به نزدیک‌ترین استایل مپ می‌کند. از همین منطق برای ایتالیک نیز استفاده می‌شود. طراحان فونت می‌توانند استایل‌هایی که تولید می‌کنند را کنترل کنند و همچنین این مسئله را نیز کنترل نمایند که شما از کدام استایل در پیج استفاده می‌کند. هر استایل به‌صورت جداگانه دانلود می‌شود. به همین خاطر بهتر است تعداد استایل‌ها را تا حد امکان کاهش دهیم. به‌عنوان مثال در اینجا شما دو استایل بولد را برای خانواده فونت Awesome تعریف می‌کنید: 

ترکیب و انتخاب فونت
در مثال فوق می‌توانید ببینید که خانواده فونت Awesome از دو منبع مختلف ساخته می‌شود که یک مجموعه گلیف لاتین (U+000-5FF) را پوشش می‌دهند؛ اما هر کدام دارای یک وزنه مختلف 400 (نرمال) و 700(بولد) هستند. با وجود این اگر یک دستور CSS از Weight یا یک سری فونت استایل دیگر برای ایتالیک استفاده کند، چه اتفاقی می‌افتد؟

  • اگر تطابقی با همان فونت دقیقاً وجود نداشت، مرورگر از یک جایگزین نزدیک به آن استفاده می‌کند؛
  • اگر هیچ شباهتی از نظر استایل وجود نداشت، پس مرورگر از فونت ترکیبی خودش استفاده می‌کند.

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

در جدول فوق می‌توانید شاهد تفاوت بین اندازه واقی و اندازه ترکیبی برای گروه فونت Open Sans باشید. تمامی استایل‌های ترکیبی از یک فونت single 400-weight ساخته شده‌اند. همان طور که مشابه می‌کنید، تفاوت چشم‌گیری در نتایج وجود دارد. البته جزئیات اینکه چطور یک استایل بولد و ایتالیک ساخته شود، مشخص نشده است. از‌این‌رو نتایج در بین مرورگرهای مختلف، متفاوت خواهد بود.

چک لیست بهینه‌سازی اندازه وب فونت‌ها

  • کاربر فونت خود را بررسی کنید: از فونت‌های فراوانی در پیج خود استفاده نکنید و تا حد امکان، استایل‌های آن‌ها را کاهش دهید. این مسئله باعث می‌شود تا سرعت عملکرد وبسایت شما افزایش پیدا کند.
  • از زیرمجموعه منابع فونت خود استفاده کنید.: بسیاری از فونت‌ها را می‌توان به زیرمجموعه‌های مختلف یا Unicode-Range های کوچک‌تر تقسیم کرد. به این طریق فقط از یک سری گلیف خاص برای یک صفحه استفاده می‌شود. با کمک این روش می‌توانید اندازه فایل دانلود راه کاهش دهید و سرعت بارگذاری را بیشتر کنید. البته هنگام تعریف زیرمجموعه، باید استفاده مجدد از یک فونت را نیز در نظر داشته باشید. به‌عنوان مثال لازم نیست اگر در یک صفحه دو بار از یک فونت استفاده شد، آن را دوبار دانلود کنید.
  • از فرمت‌های بهینه برای هر مرورگر استفاده کنید: باید از فرمت‌های WOFF2، WOFF، EOT و TFF برای هر فونت استفاده کنید. توجه داشته باشید که از GZIP برای فرمت‌های EOT و TFF حتماً استفاده کنید. این دو فرمت دارای فشرده‌سازی پیش‌فرض نیستند.
  • در لیست SRC خود به Local() اولویت دهید: در لیست SRC خود، local('Font Name') را در بخش ابتدایی قرار دهید تا مطمئن شوید که درخواست‌های HTTP برای فونت‌هایی که نصب شده‌اند ایجاد نمی‌شوند.
  • از Lighthouse برای تست کردن فشرده‌سازی متن خود استفاده کنید.

از invisible text اجتناب کنید

فونت‌ها معمولاً فایل‌های حجیم هستند و بارگذاری آن‌ها زمان‌بر است. در بخش‌های قبلی، روش‌های مختلفی را به شما معرفی کردیم تا با کمک زیرمجموعه یا دستورهای مختلف همانند Lazyload، سرعت بارگذاری منابع فونت را افزایش دهید. در این بخش قصد داریم تا درباره invisible text با شما صحبت کنیم. برخی از مرورگرها متن را تا زمانی که فونت بارگذاری شود، مخفی می‌کنند. به این مسئله invisible text گفته می‌شود. اگر شما به‌دنبال افزایش عملکرد وبسایت خود هستید، باید از "flash of invisible text" اجتناب کنید و با کمک فونت‌های سیستمی یا همان "flash of unstyled text"، متن را بدون فوت وقت به کاربر خود نشان دهید.

متن را بدون فوت وقت نشان دهید

در این مقاله از دو روش برای نشان دادن متن بدون فوت وقت استفاده می‌کنیم. روش اول خیلی ساده است اما همه مرورگرهای از آن پشتیبانی نمی‌کنند. روش دوم کمی سخت‌تر است اما بیشتر مرورگرها از آن پشتیبانی می‌کنند.

روش اول: استفاده از font-display

Before    After
@font-face { font-family: Helvetica; }    @font-face { font-family: Helvetica; font-display: swap; }
کد Font-Display یک API برای نشان دادن استراتژی خاص نمایش فونت است. swap به مرورگر شما می‌گوید که متن از این فونت استفاده می‌کند و باید به سرعت با استفاده از فونت سیستمی آن را نشان دهد. زمانی که فونت شخصی‌سازی شده آماده باشد، فونت سیستمی با فونت شخصی‌سازی شده جایگزین خواهد شد. اگر مرورگر از font-display پشتیبانی نکند، مرورگر از عملکرد پیش‌فرض خود برای بارگذاری فونت استفاده می‌کند. عملکرد پیش‌فرض هر مرورگر با دیگری تفاوت دارد:

  • مرورگر Edge: از فونت سیستمی استفاده می‌کند و پس از بارگذاری فونت شخصی‌سازی شده، آن را جایگزین می‌کند.
  • کروم: متن را به مدت 3 ثانیه مخفی می‌کند و اگر فونت در طول این مدت آماده نشد، متن را با فونت سیستمی نشان می‌دهد و پس از بارگذاری فونت اصلی، آن را جایگزین می‌کند.
  • فایرفاکس: متن را به مدت 3 ثانیه مخفی می‌کند و اگر فونت در طول این مدت آماده نشد، متن را با فونت سیستمی نشان می‌دهد و پس از بارگذاری فونت اصلی، آن را جایگزین می‌کند.
  • سافاری: متن را تا زمانی که فونت آماده باشد، مخفی می‌کند.

روش دوم: منتظر بمانید تا فونت‌های کاستوم بارگذاری شوند و از آن‌ها استفاده کنید

با کمی کار بیشتر، می‌توانید از عملکرد یکسان برای تمام مرورگرها استفاده کنید.
به‌صورت کلی این روش از سه بخش مختلف تشکیل می‌شود:

  • از یک فونت کاستوم در صفحه اصلی بارگذاری استفاده نکنید. این مسئله باعث می‌شود تا مرورگر متن را بلافاصله با فونت‌های سیستمی نشان دهد.
  • زمان بارگذاری فونت کاستوم خود را تشخیص دهید. با دو خط کد جاوا اسکریپت و کمک FontFaceObserver می‌توانید این مسئله را متوجه شوید؛
  • استایلینگ پیج را با استفاده از فونت کاستوم آپدیت کنید.
    برای اجرای این روش، باید این تغییرات را در کدنویسی خود انجام دهید:
  • CSS خود را رفکتور کنید تا در صفحه ابتدایی بارگذاری، از فونت کاستوم استفاده نکند؛
  • یک اسکریپت به صفحه خودتان اضافه کنید. این اسکریپت تشخیص می‌دهد که چه زمانی فونت کاستوم بارگذاری می‌شود و پس از آن استایلینگ صفحه را تغییر می‌دهد.

تست کردن نتیجه نهایی

شما می‌توانید با کمک Lighthouse تست کنید که آیا صفحه شما از ّFont-display: swap برای نمایش متن استفاده می‌کند یا نه. برای این کار مراحل زیر را پشت سر بگذارید:

  1. کلید‌های ترکیبی CTRL+SHIFT+J در ویندوز یا CMD+OPT+J را در مک فشار دهید تا DevToolsباز شود؛
  2. بر روی تب Lighthouseکلیک کنید؛
  3. مطمئن شوید که تیک Performance در لیست Categories خورده باشد؛
  4. بر روی Generate Report کلیک کنید.

در اینجا می‌تواند مطمئن شوید که متن شما حین بارگذاری مخفی نمی‌شود.

اگر به مطالعه در زمینه‌ی کور وب وایتال و سایر معیارهای تاثیرگذار در آن علاقه‌مند هستید، مجموعه مقالات core web vitals منتوریکس را ببینید و بخوانید. همچنین اگر برای کسب‌وکار خود به مشاوره دیجیتال مارکتینگ نیاز دارید با ما تماس بگیرید.

تحریریه منتوریکس
تحریریه منتوریکس

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

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

ما نظرات و سوالات شما را با دقت می‌خوانیم و پاسخ می‌دهیم
نظرات تعداد کاراکترهای باقی مانده: 300
انصراف