بارگذاری و رندر WebFont را بهینه کنید

Ilya Grigorik

یک WebFont "کامل" که شامل تمام انواع سبک‌ها، که ممکن است به آن‌ها نیازی نداشته باشید، به‌علاوه تمام حروف‌های علامت‌گذاری که ممکن است بلااستفاده بمانند، می‌تواند به راحتی منجر به دانلود چند مگابایتی شود. در این پست نحوه بهینه سازی بارگذاری WebFonts را خواهید آموخت تا بازدیدکنندگان فقط آنچه را که استفاده می کنند دانلود کنند.

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

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

رفتار پیش فرض

بارگذاری تنبل فونت ها پیامد پنهان مهمی دارد که ممکن است رندر متن را به تاخیر بیندازد. مرورگر باید درخت رندر را بسازد که به درخت های DOM و CSSOM وابسته است، قبل از اینکه بداند برای رندر متن به کدام منابع فونت نیاز دارد. در نتیجه، درخواست‌های فونت پس از دیگر منابع حیاتی به تأخیر می‌افتد و ممکن است مرورگر از رندر متن تا زمانی که منبع واکشی شود مسدود شود.

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

"مسابقه" بین اولین رنگ محتوای صفحه، که می تواند مدت کوتاهی پس از ساخت درخت رندر انجام شود، و درخواست منبع فونت همان چیزی است که "مشکل متن خالی" را ایجاد می کند که در آن مرورگر ممکن است طرح بندی صفحه را ارائه کند، اما هر چیزی را حذف می کند. متن

با از پیش بارگذاری WebFonts و استفاده از font-display برای کنترل نحوه رفتار مرورگرها با فونت‌های در دسترس، می‌توانید از صفحات خالی و تغییر طرح‌بندی به دلیل بارگیری فونت جلوگیری کنید.

منابع WebFont خود را از قبل بارگیری کنید

اگر احتمال زیادی وجود دارد که صفحه شما به یک WebFont خاصی نیاز دارد که در یک URL از قبل می‌شناسید، می‌توانید از اولویت‌بندی منابع استفاده کنید. استفاده از <link rel="preload"> بدون نیاز به منتظر ماندن برای ایجاد CSSOM، درخواستی را برای WebFont در ابتدای مسیر رندر بحرانی آغاز می کند.

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

در حالی که پیش بارگذاری احتمال در دسترس بودن WebFont را هنگام رندر شدن محتوای صفحه افزایش می دهد، هیچ تضمینی ارائه نمی دهد. هنوز باید در نظر داشته باشید که مرورگرها هنگام رندر متنی که font-family استفاده می کند که هنوز در دسترس نیست، چگونه رفتار می کنند.

در پست اجتناب از متن نامرئی در حین بارگذاری فونت، می توانید ببینید که رفتار پیش فرض مرورگر سازگار نیست. با این حال، می‌توانید با استفاده از font-display به مرورگرهای مدرن بگویید که می‌خواهید چگونه رفتار کنند.

مشابه رفتارهای مهلت زمانی فونت موجود که برخی از مرورگرها اجرا می کنند، font-display طول عمر دانلود فونت را به سه دوره اصلی تقسیم می کند:

1. اولین دوره، دوره بلوک فونت است. در طول این مدت، اگر صورت فونت بارگذاری نشده باشد، هر عنصری که سعی در استفاده از آن دارد باید با یک صورت فونت برگشتی نامرئی ارائه شود. اگر چهره فونت در طول دوره بلوک با موفقیت بارگیری شود، از چهره فونت به طور معمول استفاده می شود.
2. دوره تعویض فونت بلافاصله پس از دوره بلوک فونت رخ می دهد. در طول این مدت، اگر صورت فونت بارگذاری نشود، هر عنصری که سعی در استفاده از آن دارد باید با یک صورت فونت بازگشتی ارائه شود. اگر چهره فونت در طول دوره تعویض با موفقیت بارگیری شود، چهره فونت به طور معمول استفاده می شود.
3. دوره شکست فونت بلافاصله پس از دوره تعویض فونت رخ می دهد. اگر با شروع این دوره، صفحه فونت هنوز بارگذاری نشده باشد، به عنوان بارگیری ناموفق علامت گذاری می شود که باعث بازگشت فونت عادی می شود. در غیر این صورت، صورت فونت به طور معمول استفاده می شود.

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

برای کار با ویژگی font-display ، آن را به قوانین @font-face خود اضافه کنید:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  font-display: auto; /* or block, swap, fallback, optional */
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

font-display در حال حاضر از محدوده مقادیر زیر پشتیبانی می کند:

• auto
• block
• swap
• fallback
• optional

برای اطلاعات بیشتر در مورد پیش بارگذاری فونت ها و ویژگی font-display ، به پست های زیر مراجعه کنید:

• از متن نامرئی در هنگام بارگذاری فونت خودداری کنید
• کنترل عملکرد فونت با استفاده از نمایش فونت
• با بارگذاری فونت های اختیاری از قبل از تغییر طرح و چشمک زدن متن نامرئی (FOIT) جلوگیری کنید

Font Loading API

<link rel="preload"> و font-display CSS که با هم استفاده می شوند، کنترل زیادی بر بارگذاری و رندر فونت به شما می دهند، بدون اینکه هزینه زیادی را اضافه کنید. اما اگر به سفارشی‌سازی‌های اضافی نیاز دارید و مایلید هزینه‌های سربار معرفی شده با اجرای جاوا اسکریپت را متحمل شوید، گزینه دیگری وجود دارد.

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

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  // apply the font (which may re-render text and cause a page reflow)
  // after the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default the content is hidden,
  // and it's rendered after the font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply your own render strategy here...
});

علاوه بر این، به دلیل اینکه می توانید وضعیت فونت (از طریق روش check() ) را بررسی کنید و پیشرفت دانلود آن را پیگیری کنید، همچنین می توانید یک استراتژی سفارشی برای رندر متن در صفحات خود تعریف کنید:

• می توانید تمام رندرهای متن را تا زمانی که فونت در دسترس باشد نگه دارید.
• شما می توانید یک بازه زمانی سفارشی برای هر فونت پیاده سازی کنید.
• می‌توانید از فونت بازگشتی برای رفع انسداد رندر استفاده کنید و سبک جدیدی را وارد کنید که پس از در دسترس بودن فونت، از فونت مورد نظر استفاده می‌کند.

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

ذخیره سازی مناسب یک امر ضروری است

منابع فونت معمولاً منابع ثابتی هستند که به‌روزرسانی‌های مکرر را نمی‌بینند. در نتیجه، آنها به طور ایده آل برای انقضای حداکثر سنی طولانی مناسب هستند - اطمینان حاصل کنید که هم یک هدر ETag شرطی و هم یک خط مشی بهینه Cache-Control برای همه منابع فونت تعیین می کنید.

اگر برنامه وب شما از یک سرویس دهنده استفاده می کند، ارائه منابع فونت با استراتژی cache-first برای بیشتر موارد استفاده مناسب است.

شما نباید فونت ها را با استفاده از localStorage یا IndexedDB ذخیره کنید. هر یک از آن ها مجموعه ای از مشکلات عملکرد خاص خود را دارند. حافظه پنهان HTTP مرورگر بهترین و قوی ترین مکانیسم را برای ارائه منابع فونت به مرورگر فراهم می کند.

چک لیست بارگذاری WebFont

• بارگیری و رندر فونت را با استفاده از <link rel="preload"> ، font-display یا Font Loading API سفارشی کنید: رفتار بارگذاری تنبل پیش‌فرض ممکن است منجر به تأخیر در ارائه متن شود. این ویژگی‌های پلتفرم وب به شما این امکان را می‌دهند که این رفتار را برای فونت‌های خاص لغو کنید و استراتژی‌های رندر سفارشی و زمان‌بندی را برای محتوای مختلف در صفحه مشخص کنید.
• اعتبار مجدد و سیاست های ذخیره بهینه را مشخص کنید: فونت ها منابع ثابتی هستند که به ندرت به روز می شوند. اطمینان حاصل کنید که سرورهای شما یک مُهر زمانی حداکثر عمر طولانی و یک توکن اعتبارسنجی مجدد ارائه می کنند تا امکان استفاده مجدد کارآمد از فونت بین صفحات مختلف را فراهم کند. اگر از یک سرویس‌کار استفاده می‌کنید، یک استراتژی cache-first مناسب است.

تست خودکار رفتار بارگذاری WebFont با Lighthouse

Lighthouse می تواند به خودکارسازی فرآیند اطمینان از پیروی از بهترین شیوه های بهینه سازی فونت وب کمک کند.

ممیزی های زیر می تواند به شما کمک کند تا مطمئن شوید که صفحات شما به مرور زمان بهترین شیوه های بهینه سازی فونت وب را دنبال می کنند:

• درخواست های کلیدی را از قبل بارگیری کنید
• از سیاست کش ناکارآمد در دارایی های ثابت استفاده می کند
• تمام متن در طول بارگذاری WebFont قابل مشاهده باقی می ماند