معیارهای core web vitals به معیارهای کلیدی در سئو سایت تبدیل شده‌اند. این معیارها به تجربه‌ای که کاربر هنگام مواجهه با سایت شما دارد توجه می‌کند و بر همین اساس به سایتتان رتبه می‌دهد. فونت سایت هم از جمله معیارهای کلیدی در ساختن تجربه کاربری مثبت است. یک وب – فونت کامل شامل استایل‌ها و گلیف‌های غیرضروری می‌شود. از این استایل‌ها و گلیف‌ها شاید هیچ استفاده‌ای نشود، ولی در عین حال حجم دانلود را به‌مراتب افزایش می‌دهند. در این مقاله قصد داریم تا درباره بهینه‌سازی بارگذاری وب – فونت‌ها با شما صحبت کنیم. به این طریق کاربر فقط همان فونتی که مشاهده می‌کند را دانلود خواهد کرد.

آنچه در این مطلب می‌خوانید:

1. با عملکرد پیش‌فرض آشنا شوید
2. منابع وب – فونت خود را پری – لود کنید
3. تأخیر رندرینگ متن را شخصی‌سازی کنید
4. بررسی Font Loading API
5. به یک استراتژی کَش مناسب نیاز خواهید داشت
6. چک لیست نهایی برای بارگذاری وب فونت
7. از invisible text اجتناب کنید
8. متن را بدون فوت وقت نشان دهید
9. تست کردن نتیجه نهایی

در مواقعی که وب – فونت شما خیلی حجیم باشد، می‌توان از کد 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 می‌تواند مناسب باشد.

از 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 منتوریکس را ببینید و بخوانید. همچنین اگر برای کسب‌وکار خود به مشاوره دیجیتال مارکتینگ نیاز دارید با ما تماس بگیرید.

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

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

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