Front-End Performance Checklist 2021 – Smashing Magazine

پشتیبانی از WOFF2 عالی است ، و ما می توانیم از WOFF به عنوان گزینه بازگشتی برای مرورگرهایی استفاده كنیم كه از آن پشتیبانی نمی كنند – یا شاید مرورگرهای قدیمی بتوانند از قلم های سیستم استفاده كنند. وجود دارد بسیاری ، بسیاری ، بسیاری گزینه هایی برای بارگیری قلم وب ، و ما می توانیم یکی از استراتژی های “Zach Leatherman’s” را انتخاب کنیمراهنمای جامع راهکارهای بارگذاری قلم، “(قطعه کد نیز به عنوان موجود است دستورالعمل های بارگیری قلم وب)

احتمالاً گزینه های بهتری که امروز باید در نظر گرفته شود ، هستند FOFT انتقادی با preload و روش “سازش”. هر دو از a رندر دو مرحله ای برای ارائه فونت های وب به صورت مرحله ای – ابتدا یک زیرمجموعه کوچک مورد نیاز است تا صفحه را سریع و دقیق با فونت وب رندر کند و سپس بقیه اعضای خانواده را به صورت همگام بارگیری کنید. تفاوت در این است که تکنیک “سازش” فقط درصورت غیرهمزمان پلی فیل را بارگیری می کند وقایع بارگذاری قلم پشتیبانی نمی شوند ، بنابراین نیازی نیست که بصورت پیش فرض polyfill را بارگیری کنید. آیا به یک پیروزی سریع نیاز دارید؟ Zach Leatherman دارای یک سریع 23 دقیقه ای آموزش و مطالعه موردی برای مرتب کردن فونت های خود.

به طور کلی ، ممکن است ایده خوبی باشد که از آن استفاده کنید preload منبع اشاره برای بارگیری فونت ها ، اما در علامت گذاری خود نکات را ذکر کنید بعد از پیوند به CSS و JavaScript مهم. با preload، وجود دارد معمای اولویت ها، بنابراین تزریق را در نظر بگیرید rel="preload" درست قبل از اسکریپت های مسدود کننده خارجی ، عناصر را به DOM وارد کنید. به گفته اندی دیویس ، “منابعی که با استفاده از یک اسکریپت تزریق می شود تا زمان اجرای اسکریپت از مرورگر پنهان است و ما می توانیم از این رفتار برای تأخیر در هنگام کشف مرورگر استفاده کنیم. preload hint. “در غیر این صورت ، بارگیری فونت برای شما در اولین زمان ارائه هزینه دارد.

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

استفاده از آن کاملاً رایج شده است local() مقدار (که با نام فونت محلی به آن اشاره می شود) هنگام تعریف a font-family در @font-face قانون:

/* Warning! Not a good idea! */
@font-face {
  font-family: Open Sans;
  src: local('Open Sans Regular'),
       local('OpenSans-Regular'),
       url('opensans.woff2') format ('woff2'),
       url('opensans.woff') format('woff');
}

این ایده منطقی است: برخی از فونت های متن باز محبوب مانند Open Sans با برخی از درایورها یا برنامه ها از قبل نصب می شوند ، بنابراین اگر فونت به صورت محلی در دسترس باشد ، مرورگر نیازی به بارگیری فونت وب ندارد و می تواند محلی را نمایش دهد فوراً فونت بگیرید. مانند برام استین اشاره کرد، “اگرچه یک قلم محلی با نام قلم وب مطابقت دارد ، اما به احتمال زیاد همان قلم نیست. بسیاری از فونت های وب با نسخه “دسک تاپ” آنها متفاوت است. متن ممکن است متفاوت ارائه شود ، برخی از نویسه ها به قلم های دیگر بازمی گردند ، ویژگی های OpenType به طور کامل از دست می روند یا ارتفاع خط متفاوت است. “

همچنین ، با گذشت زمان و تحول حروف چاپی ، نسخه نصب شده محلی ممکن است با قلم وب بسیار متفاوت باشد و شخصیت ها بسیار متفاوت به نظر برسند. بنابراین ، به گفته برام ، بهتر است که هرگز فونت ها و قلم های نصب شده محلی را مخلوط نکنید که در @font-face قوانین Google Fonts از همین طریق پیروی کرده است از کار انداختن local() در نتایج CSS برای همه کاربران، غیر از درخواست های Android برای Roboto.

هیچ کس دوست ندارد منتظر نمایش محتوا باشد. با font-display توصیف کننده CSS، ما می توانیم رفتار بارگیری قلم را کنترل کرده و محتوای قابل خواندن را فعال کنیم بلافاصله. مستقیما (با font-display: optional) یا تقریبا فوری (با وقفه 3 ثانیه ، به شرطی که فونت با موفقیت بارگیری شود – با font-display: swap) (خوب ، این یک کمی پیچیده تر از آن.)

با این حال ، اگر شما می خواهید تأثیر بازآفرینی متن را به حداقل برسانید، ما می توانیم از API بارگیری قلم (در همه مرورگرهای مدرن پشتیبانی می شود) به طور خاص این بدان معنی است که برای هر قلم ، ما می خواهیم ایجاد کنیم FontFace شی ، سپس سعی کنید همه آنها را بیاورید ، و فقط سپس آنها را به صفحه اعمال کنید. به این ترتیب ، ما همه بازتولیدها را گروه بندی کنید با بارگیری همزمان همه فونت ها ، و سپس دقیقاً یک بار از فونت های برگشتی به فونت وب جابجا شوید. نگاهی بیندازید توضیحات زک، از ساعت 32:15 شروع می شود ، و قطعه کد):

/* Load two web fonts using JavaScript */
/* Zach Leatherman: https://noti.st/zachleat/KNaZEg/the-five-whys-of-web-font-loading-performance#sWkN4u4 */

// Remove existing @font-face blocks
// Create two
let font = new FontFace("Noto Serif", /* ... */);
let fontBold = new FontFace("Noto Serif, /* ... */);

// Load two fonts
let fonts = await Promise.all([
  font.load(),
  fontBold.load()
])

// Group repaints and render both fonts at the same time!
fonts.forEach(font => documents.fonts.add(font));

Adrian Bece برای شروع فکت واکشی خیلی زود با API Font Loading حاکی از برای اضافه کردن یک فضای شکستن nbsp; در بالای body، و آن را بصری با مخفی کنید aria-visibility: hidden و یک .hidden کلاس:

<body class="no-js">
  <!-- ... Website content ... -->
  <div aria-visibility="hidden" class="hidden" style="font-family: '[web-font-name]'">
      <!-- There is a non-breaking space here -->
  </div>
  <script>
    document.getElementsByTagName("body")[0].classList.remove("no-js");
  </script>
</body>

این همراه با CSS است که خانواده های مختلفی از قلم ها را برای حالت های مختلف بارگیری اعلام می کند ، با تغییراتی که Font Loading API پس از بارگیری موفقیت آمیز قلم ها ایجاد می کند:

body:not(.wf-merriweather--loaded):not(.no-js) {
  font-family: [fallback-system-font];
  /* Fallback font styles */
}

.wf-merriweather--loaded,
.no-js {
  font-family: "[web-font-name]";
  /* Webfont styles */
}

/* Accessible hiding */
.hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

اگر تا به حال فکر کرده اید که چرا علی رغم همه بهینه سازی های شما ، لایت هاوس هنوز هم پیشنهاد می کند منابع انسداد رندر (قلم ها) را حذف کنید ، در همان مقاله Adrian Bece چند مورد را ارائه می دهد تکنیک های خوشحال کردن فانوس دریایی، همراه با بارگذار قلم گتسبی اومنی، یک بارگذاری فونت ناهمگام و پلاگین مدیریت فلش متن غیر سبک (FOUT) برای گتسبی.

اکنون ، ممکن است بسیاری از ما از CDN یا میزبان شخص ثالث برای بارگیری قلم های وب از آن استفاده کنیم. به طور کلی ، آن است همیشه بهتره که همه دارایی های ثابت خود را میزبان خود کنید اگر می توانید ، بنابراین استفاده کنید google-webfonts-helper، روشی بدون دردسر برای میزبانی خودکار قلم های Google. و اگر امکان پذیر نباشد ، شاید می توانید پروکسی پرونده های قلم Google را از طریق مبدا صفحه.

شایان ذکر است که گوگل در حال انجام این کار است کمی کار خارج از جعبه ، بنابراین یک سرور برای جلوگیری از تأخیر ممکن است نیاز به کمی تغییر داشته باشد (ممنون ، باری!)

این مسئله از اهمیت ویژه ای برخوردار است ، به خصوص از زمان Chrome v86 (انتشار اکتبر 2020) ، منابع بین سایت مانند قلم ها را نمی توان در همان CDN به اشتراک گذاشت دیگر – به دلیل حافظه پنهان مرورگر پارتیشن بندی شده. این رفتار سالها در Safari پیش فرض بود.

اما اگر به هیچ وجه امکان پذیر نباشد ، راهی برای رسیدن به آن وجود دارد سریعترین فونت های Google با قطعه هری رابرتز:

<!-- By Harry Roberts.
https://csswizardry.com/2020/05/the-fastest-google-fonts/

- 1. Preemptively warm up the fonts’ origin.
- 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
-    most modern browsers.
- 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
-    only after it’s arrived. Works in all browsers with JavaScript enabled.
- 4. In the unlikely event that a visitor has intentionally disabled
-    JavaScript, fall back to the original method. The good news is that,
-    although this is a render-blocking request, it can still make use of the
-    preconnect which makes it marginally faster than the default.
-->

<!-- [1] -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- [2] -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<!-- [3] -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media="all"" />

<!-- [4] -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>

استراتژی هری این است که ابتدا منشا فونت ها را به طور پیشگیرانه گرم کند. سپس واکشی ناهمگام با اولویت بالا را برای پرونده CSS آغاز می کنیم. پس از آن ، ما یک واکشی ناهمگام با اولویت کم را شروع می کنیم که فقط پس از ورود به صفحه اعمال می شود (با ترفند چاپ صفحه سبک) سرانجام ، اگر جاوا اسکریپت پشتیبانی نمی شود ، به روش اصلی بازمی گردیم.

آه ، صحبت کردن در مورد Google Fonts: می توانید اصلاح تا 90٪ از اندازه درخواستهای Google Fonts توسط اعلام تنها کاراکترهای مورد نیاز شما با &text. به علاوه ، پشتیبانی از نمایش قلم اخیراً اضافه شده است به Google Fonts نیز ، بنابراین می توانیم از آن خارج از جعبه استفاده کنیم.

هر چند یک کلمه احتیاط سریع است. اگر استفاده می کنید font-display: optional، آی تی ممکن است بهینه نباشد همچنین استفاده کنید preload زیرا این درخواست فونت وب را زود هنگام آغاز می کند (باعث ازدحام شبکه اگر منابع مسیر حیاتی دیگری دارید که باید بازیابی شوند). استفاده کنید preconnect برای درخواست های فونت متقابل سریع تر ، اما با احتیاط انجام دهید preload به عنوان پیش بارگذاری فونت ها از مبدأ متفاوت ، مشاجره شبکه را در پی خواهد داشت. همه این تکنیک ها در زاکس پوشش داده شده است دستورالعمل های بارگیری قلم وب.

از طرف دیگر ، شاید ایده خوبی باشد که از قلم های وب انصراف دهید (یا حداقل مرحله دوم رندر) اگر کاربر آن را فعال کرده باشد کاهش حرکت در تنظیمات دسترسی یا انتخاب کرده است حالت صرفه جویی در داده (دیدن Save-Data سرتیتر) ، یا هنگامی که کاربر اتصال کند دارد (از طریق شبکه اطلاعات API)

ما همچنین می توانیم از prefers-reduced-data جستجوی رسانه CSS به نه اگر کاربر حالت ذخیره داده را انتخاب کرده است ، تعریف های قلم را تعریف کنید (موارد موجود وجود دارد) موارد استفاده دیگر نیز) اگر پرسش رسانه ای باشد ، اساساً افشا می شود Save-Data عنوان درخواست از پسوند Client Hint HTTP روشن / خاموش است تا امکان استفاده با CSS فراهم شود. در حال حاضر فقط در Chrome و Edge پشت یک پرچم پشتیبانی می شود.

معیارهای؟ برای اندازه گیری عملکرد بارگیری قلم وب ، موارد زیر را در نظر بگیرید همه متن قابل مشاهده است متریک (لحظه بارگیری همه فونت ها و نمایش تمام مطالب در فونت های وب) ، زمان واقعی نوشتن همچنین شمارش مجدد قلم وب بعد از اولین رندر بدیهی است که هرچه هر دو معیار پایین تر باشند ، عملکرد بهتری دارند.

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

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

حالا ، چه چیزی باعث می شود استراتژی بارگیری فونت وب ضد گلوله سپس؟ قلم های زیرمجموعه را آماده کرده و برای رندر 2 مرحله ای آماده کنید ، آنها را با a اعلام کنید font-display توصیفگر ، از Font Loading API برای گروه بندی مجدد رنگ ها و ذخیره فونت ها در حافظه پنهان کارگر سرویس ثابت استفاده کنید. در اولین بازدید ، پیش بارگیری اسکریپت ها را درست قبل از اسکریپت های خارجی مسدود کنید. می توانید دوباره به برام استین برگردید Font Face Observer در صورت لزوم و اگر شما علاقه مند به اندازه گیری عملکرد بارگذاری فونت هستید ، Andreas Marschke به کاوش می پردازد ردیابی عملکرد با Font API و UserTiming API.

در آخر ، اضافه کردن را فراموش نکنید unicode-range برای تجزیه یک قلم بزرگ به قلمهای کوچکتر مخصوص زبان و استفاده از مونیکا دینکلسکو قلم-سبک-منطبق برای به حداقل رساندن تغییر ناخوشایند در طرح ، به دلیل اختلاف اندازه بین فونت و وب.

متناوباً ، برای تقلید از یک فونت وب برای یک فونت جایگزین ، می توانیم استفاده کنیم توصیف کنندگان @ font-face برای نادیده گرفتن معیارهای قلم (نسخه ی نمایشی، در Chrome 87 فعال شده است). (توجه داشته باشید که تنظیمات با پشته های پیچیده پیچیده پیچیده است.)

آیا آینده درخشان به نظر می رسد؟ با غنی سازی قلم مترقی، سرانجام ممکن است بتوانیم “فقط قسمت مورد نیاز قلم را در هر صفحه مشخص بارگیری کنیم ، و برای درخواست های بعدی برای آن قلم ، بارگیری اصلی را با مجموعه های اضافی از حروف لغو” به صورت پچ “انجام دهد ، همانطور که در بازدیدهای پی در پی صفحه مورد نیاز است” ، جیسون بنیادین آن را توضیح می دهد. نسخه ی نمایشی انتقال افزایشی در حال حاضر در دسترس است ، و آن است کار در حال انجام.