فونت فارسی و سرعت سایت

چرا قلم فارسی گران تر تمام می شود

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

عدد واقعی از فایل های همین سایت: قلم اصلی در وزن معمولی ۷۲۶ گلیف و ۶۵۲ کدپوینت دارد و ۴۱.۷ کیلوبایت است. نسخه ساب ست شده اش ۵۹۹ گلیف و ۵۲۷ کدپوینت دارد و ۲۴.۷ کیلوبایت است.

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

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

چند وزن واقعا لازم دارید؟

اینجا جایی است که بیشتر سایت های فارسی بایت از دست می دهند، و راه حلش یک تنظیم نیست، یک قاعده در خود CSS است که کمتر کسی از آن استفاده می کند.

وقتی مرورگر به متنی با وزنی برسد که برایش فایلی ندارید، آن متن را بی قلم رها نمی کند و قلم جعلی هم نمی سازد؛ نزدیک ترین وزنی را که دارید انتخاب می کند. قاعده اش در استاندارد CSS نوشته شده و جهت جستجو هم مشخص است: برای وزنی زیر پانصد، اول وزن های پایین تر بررسی می شوند و بعد بالاتر ها؛ برای وزنی بالای پانصد، اول بالاتر ها و بعد پایین تر ها.

حالا همین سایت. در فایل استایل اصلی پنج وزن نوشته شده و می توانید خودتان بشمریدشان:

grep -ohE 'font-weight:[[:space:]]*[0-9]{3}' style.css | tr -d ' ' | cut -d: -f2 | sort -un

خروجی اش پنج عدد است: ۴۰۰ و ۵۰۰ و ۶۰۰ و ۷۰۰ و ۸۰۰. ولی در HTML خروجی همین سایت فقط سه بلوک font-face وجود دارد: ۴۰۰ و ۷۰۰ و ۸۰۰. وزن ۵۰۰ به ۴۰۰ می رسد و وزن ۶۰۰ به ۷۰۰، چون قاعده بالا همین را می گوید، و هیچ کس تفاوتش را روی صفحه نمی بیند.

حساب کنید چه صرفه جویی ای شد. سه فایلی که فرستاده می شوند ۲۴.۷ و ۲۴.۹ و ۲۵.۰ کیلوبایت اند، جمعا ۷۴.۶ کیلوبایت؛ همین سه وزن به شکل کامل ۴۱.۷ و ۴۱.۸ و ۴۲.۰ کیلوبایت اند. اگر هر پنج وزن به شکل کامل و بدون ساب ست فرستاده می شدند، ۲۰۸.۶ کیلوبایت می شد. یعنی دو تصمیم با هم بیش از دو سوم وزن قلم را برداشتند، و تصمیم دوم، یعنی نفرستادن دو وزن، به تنهایی حدود ۵۰ کیلوبایت بود؛ بیشتر از آنچه ساب ست کردن روی یک فایل صرفه جویی می کند.

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

و یک اعتراف کوچک از خانه تکانی نکرده خودمان: در پوشه قلم های این سایت یک وزن ششم هم هست که ۴۱.۵ کیلوبایت جا گرفته و هیچ جای کد به آن ارجاعی نیست. به بازدیدکننده فرستاده نمی شود، پس روی سرعت اثری ندارد، ولی همان قدر باید حذف شود.

font-display: چرا ما optional را انتخاب کردیم و نه swap

تا وقتی فایل قلم نرسیده، مرورگر باید تصمیم بگیرد با متن چه کند، و font-display همان تصمیم را می نویسد. تقریبا هر آموزشی swap را توصیه می کند. ما optional را انتخاب کرده ایم و دلیلش را می نویسیم، چون این یکی از آن جاهاست که توصیه رایج برای فارسی بدتر جواب می دهد.

با swap مرورگر فورا متن را با قلم جایگزین می کشد و به محض رسیدن قلم اصلی عوضش می کند. متن هیچ وقت نامرئی نیست و همین برد این گزینه است. بهایش هم دقیقا در همان لحظه تعویض است: عرض حروف عوض می شود، خط ها دوباره می شکنند و کل صفحه یک تکان می خورد. آن تکان همان جابه جایی چیدمان است که در درس Core Web Vitals اندازه گیری می شود.

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

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

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

فونت را زودتر شروع کنید: preload و Early Hints

مرورگر تا CSS را نخواند نمی داند که اصلا قلمی لازم دارد، و تا HTML نرسیده CSS را هم ندارد. یعنی دانلود قلم به طور طبیعی دیر شروع می شود، و همه کاری که در این بخش می کنیم این است که این شروع را جلو بیندازیم.

قدم اول preload است: یک خط در سر سند که به مرورگر می گوید این فایل را همین حالا شروع کن. قاعده ای که رعایت نکردنش رایج ترین اشتباه این کار است، این است که فقط قلم های نمای اول را preload کنید. اگر هر پنج وزن را preload کنید، مرورگر پنج دانلود همزمان شروع می کند و پهنای باندی که باید صرف تصویر اصلی صفحه می شد صرف قلمی می شود که در ته صفحه لازم است. این سایت سه قلم دارد و فقط دو تا را preload می کند: وزن معمولی برای بدنه و سنگین ترین وزن برای تیتر اصلی.

قدم دوم چیزی است که کمتر دیده می شود و اثرش واقعی است. سرور می تواند همان هدر preload را به شکل یک هدر پاسخ هم بفرستد، و بعضی شبکه های توزیع محتوا آن را به شکل یک پاسخ مقدماتی با کد ۱۰۳ برای مرورگر می فرستند، پیش از آنکه خود HTML آماده شود. یعنی در همان مدتی که سرور دارد صفحه را می سازد، مرورگر می تواند قلم را دانلود کند.

روی همین سایت این کار می کند و از بیرون هم دیده می شود: درخواست به صفحه اول ابتدا یک پاسخ 103 با همان دو قلم برمی گرداند و بعد پاسخ 200 با خود صفحه. اگر می خواهید روی سایت خودتان امتحانش کنید، هدرها را با ابزار خط فرمان بگیرید و دنبال خطی بگردید که با ۱۰۳ شروع می شود؛ مرورگر این پاسخ را در ابزار توسعه دهنده نشان نمی دهد.

و یک شرط که این کار را از یک تنظیم تزئینی جدا می کند: 103 فقط وقتی به درد می خورد که ساختن صفحه واقعا زمان ببرد. روی صفحه ای که از کش می آید و در بیست میلی ثانیه جواب می دهد، فرصتی برای جلو افتادن نمانده.

پشته جایگزین که نمی پرد

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

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

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

و کاری که ارزشش را دارد و کمتر انجام می شود: پشته را واقعا امتحان کنید. در ابزار توسعه دهنده مرورگر نام قلم اصلی را از قاعده حذف کنید و ببینید صفحه چه شکلی می شود. اگر آن صفحه هنوز قابل خواندن است، تصمیم optional برایتان راحت می شود؛ اگر شبیه یک صفحه شکسته شد، پشته تان را عوض کنید نه font-display را.

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