راه حل این کابوس دیجیتال، بهینه سازی فونت ها برای سرعت سایت است. در این مقاله جامع، قرار است صفر تا صد این موضوع را با در نظر گرفتن شرایط خاص اینترنت در ایران و رفتار کاربران ایرانی بررسی کنیم تا سایت شما مثل یک جت بارگذاری شود.
چرا بهینه سازی فونت ها برای سرعت سایت تا این حد حیاتی است؟
فونتها؛ مسافرانی سنگینوزن در جادههای باریک اینترنت
وقتی از سرعت سایت حرف میزنیم، بیشتر مدیران کسبوکارها بلافاصله به یاد حجم عکسها یا ویدیوها میافتند. اما واقعیت این است که فایلهای مربوط به تایپوگرافی (همان فونتهای زیبای فارسی مثل ایرانسنس، دانا یا وزیرمتن) میتوانند قاتل خاموش سرعت سایت شما باشند.
در کشور ما، با توجه به نوسانات سرعت اینترنت و استفاده گسترده کاربران از شبکههای موبایل (3G و 4G که گاهی در مترو یا فضاهای بسته به شدت افت کیفیت پیدا میکنند)، هر یک کیلوبایت اضافی که مرورگر مجبور به دانلود آن باشد، یک ریسک بزرگ برای از دست دادن مشتری است. وقتی شما برای بهینه سازی فونت ها برای سرعت سایت زمان میگذارید،
در واقع دارید جلوی دو پدیده آزاردهنده را میگیرید:
ناپدید شدن متن (FOIT): کاربر صفحه را میبیند اما متنها نامرئی هستند تا فونت دانلود شود.
پرش متن (FOUT و CLS): متن ابتدا با فونت پیشفرض مرورگر (مثل فونت زشت Times New Roman یا Arial) نمایش داده میشود و بعد از دانلود فونت اصلی، ظاهر و سایز نوشتهها تغییر میکند. این تغییر سایز باعث جابجایی المانهای صفحه میشود که گوگل در معیارهای Core Web Vitals به آن نمره منفی شدیدی میدهد.
انتخاب فرمت مناسب؛ قدم اول در سبُکسازی
با فرمتهای قدیمی خداحافظی کنید؛ زمان، زمانِ وبهای مدرن است.
اولین قدم برای بهینه سازی فونت ها برای سرعت سایت، استفاده از فرمتهای درست است. بسیاری از طراحان سایت هنوز فایلهایی با فرمت TTF یا OTF را در هاست آپلود میکنند. این کار در وب امروزی یک اشتباه مهلک است. این فرمتها برای نصب روی سیستمعامل (مثل ویندوز برای استفاده در فتوشاپ یا ورد) طراحی شدهاند، نه برای دانلود در مرورگر!
جادوی WOFF و WOFF2
برای استفاده در فضای وب، کنسرسیوم جهانی وب (W3C) فرمتهای WOFF (Web Open Font Format) را معرفی کرده است. اما ستاره اصلی میدان، WOFF2 است.
فرمت WOFF2 فایلهای فونت را با استفاده از الگوریتم پیشرفته Brotli فشرده میکند.
این فرمت در مقایسه با TTF، حجم فونت را بین ۳۰ تا ۵۰ درصد کاهش میدهد، بدون اینکه ذرهای از کیفیت آن کم شود.
یک مثال واقعی از بازار ایران:
فرض کنید فونت محبوب «ایرانسنس» نسخه معمولی (Regular) با فرمت TTF حدود ۹۰ کیلوبایت حجم دارد. وقتی همین فایل را با فرمت WOFF2 در سایت خود قرار دهید، حجم آن به حدود ۳۵ الی ۴۰ کیلوبایت میرسد. حالا تصور کنید سایت شما ۳ وزن مختلف از این فونت را لود میکند؛ شما در مجموع بیش از ۱۵۰ کیلوبایت در مصرف دیتای کاربر صرفهجویی کردهاید. این یعنی بارگذاری بسیار سریعتر با اینترنتهای محدود.
پیشبارگذاری (Preload) فونتهای کلیدی؛ خط ویژه مرورگرها
به مرورگر بگویید چه چیزی مهمتر است تا در ترافیک سایت گیر نکند.
مرورگرها معمولاً کدهای سایت را از بالا به پایین میخوانند. تا زمانی که مرورگر به فایل CSS شما نرسد و آن را تحلیل نکند، متوجه نمیشود که سایت به چه فونتی نیاز دارد. این وقفه باعث میشود دانلود فونت با تاخیر آغاز شود.
برای دور زدن این مشکل در استراتژیهای بهینه سازی فونت ها برای سرعت سایت، از تکنیکی به نام Preload استفاده میکنیم. با استفاده از تگ Preload در بخش سایت، به مرورگر میگوییم: «منتظر خواندن تمام فایلهای CSS نمان، این فونت فارسی برای من بسیار حیاتی است، همین الان در پسزمینه شروع به دانلودش کن!»
link rel="preload" href="/fonts/vazirmatn-regular.woff2" as="font" type="font/woff2" crossorigin
نکته طلایی برای سایتهای ایرانی:
فقط و فقط فونتهایی را Preload کنید که در محتوای اصلی (Above the fold) یا همان نیمه بالایی سایت که کاربر در نگاه اول میبیند، استفاده شدهاند (مثل فونت تیترها و پاراگراف اول). اگر تمام وزنهای فونت را Preload کنید، ترافیک شبکهای شدیدی ایجاد میکنید که نتیجه عکس خواهد داشت و سایت به شدت کند میشود.
مدیریت نمایش فونت با ویژگی Font-Display
به کاربران خود احترام بگذارید؛ نگذارید به صفحه سفید خیره شوند.
همانطور که در ابتدای مقاله اشاره کردیم، یکی از بدترین تجربیات کاربری، خیره شدن به صفحهای است که عکس دارد اما متن ندارد. در ایران، کاربرانی که از VPN استفاده میکنند یا سرعت اینترنتشان افت کرده است، بارها با این مشکل مواجه میشوند.
شما میتوانید رفتار مرورگر را در زمان تاخیر دانلود فونت کنترل کنید. این کار با افزودن ویژگی font-display در فایل CSS شما در بخش @font-face انجام میشود.
@font-face {
font-family: 'YekanBakh';
src: url('/fonts/YekanBakh-Regular.woff2') format('woff2');
font-display: swap;
}
چرا حالت Swap بهترین انتخاب است؟
وقتی شما از font-display: swap; استفاده میکنید، به مرورگر دستور میدهید: «تا زمانی که فونت اصلی (مثلاً یکانبخ) دانلود نشده است، بلافاصله متن را با یک فونت ساده سیستمی (مثل Tahoma) به کاربر نشان بده. به محض اینکه فونت یکانبخ دانلود شد، آن را جایگزین کن.»
این کار باعث میشود کاربر از همان ثانیه اول بتواند خواندن مقاله یا مشخصات محصول شما را شروع کند و معطل نشود.
این یک ترفند فوقالعاده موثر در پروسه بهینه سازی فونت ها برای سرعت سایت است.
حذف وزنها و استایلهای اضافی؛ سبُک کردن کولهبار
طراحی مینیمال، سرعت ماکسیمم.
یکی از اشتباهات رایج طراحان وب تازهکار این است که پکیج کامل یک فونت را در سایت فراخوانی میکنند. مثلاً فونت «دانا» ممکن است دارای ۱۰ وزن مختلف از خیلی نازک (Thin) تا خیلی ضخیم (Black) باشد.
آیا واقعاً به همه این وزنها در سایت نیاز دارید؟ پاسخ در ۹۹ درصد مواقع منفی است!
برای داشتن یک سایت استاندارد و پرسرعت، شما نهایتاً به ۲ یا ۳ وزن نیاز دارید:
- Regular (معمولی – وزن ۴۰۰): برای متون اصلی و پاراگرافها.
- Bold (ضخیم – وزن ۷۰۰): برای تیترها و تاکیدها.
- Light (نازک – وزن ۳۰۰): (اختیاری) برای زیرنویسها یا المانهای خاص گرافیکی.
هر وزنی که اضافه میکنید، یک فایل مجزا است که باید دانلود شود. با حذف وزنهای بیاستفاده، قدم بزرگی در راستای بهینه سازی فونت ها برای سرعت سایت برمیدارید.
میزبانی محلی فونتها (Local Hosting)؛ کلید طلایی در ایران
به سرورهای خارجی متکی نباشید، خانهسازی در سرور خودتان امنتر است.
در سطح جهانی، استفاده از سرویسهایی مثل Google Fonts بسیار رایج است. اما در ایران، داستان کاملاً متفاوت است. به دلیل تحریمها، فیلترینگ، اختلالات شبکه اینترنت ملی و مسدود شدن برخی از IP های خارجی، درخواستهای مرورگر برای دریافت فونت از سرورهای گوگل ممکن است با تاخیرهای چند ثانیهای مواجه شود یا حتی کاملاً شکست بخورد (Time out).
اگر از قالبهای آماده وردپرسی استفاده میکنید، احتمالاً این قالبها در حال فراخوانی دهها فونت از سرورهای گوگل هستند. برای بهینهسازی واقعی در ایران:
- درخواستهای Google Fonts را در قالب خود غیرفعال کنید.
- فایلهای فونت را دانلود کرده و مستقیماً روی هاست خودتان (یا CDN ایرانی که استفاده میکنید) آپلود نمایید.
- آنها را به صورت محلی (Local) فراخوانی کنید.
این کار باعث میشود مرورگر برای پیدا کردن فونت نیاز به اتصال به یک سرور خارجی (DNS Lookup اضافی) نداشته باشد و فونت را از همان جایی بخواند که عکسها و کدهای سایت شما قرار دارند.
تکنیک Subsetting؛ بُرش زدن فونت به اندازه نیاز
چرا باید کاراکترهای ژاپنی و روسی را در یک سایت کاملاً فارسی لود کنیم؟
این شاید یکی از حرفهایترین و جذابترین بخشهای بهینه سازی فونت ها برای سرعت سایت باشد. یک فایل فونت استاندارد، معمولاً شامل هزاران کاراکتر (Glyph) است. حروفی از زبانهای عربی، اردو، کردی، انگلیسی، نمادهای ریاضی، پولهای کشورهای مختلف و…
وقتی شما یک وبسایت خدماتی در تهران دارید که فقط به زبان فارسی خدمات میدهد، نیازی به لود کردن کاراکترهای زبانهای دیگر ندارید. تکنیک Subsetting به شما اجازه میدهد تا با استفاده از ابزارهای آنلاین یا نرمافزارها، فقط حروف فارسی، اعداد و حروف پایه انگلیسی را از فایل فونت استخراج کرده و یک فایل جدید بسازید. این کار میتواند حجم فایل نهایی شما را به طرز شگفتانگیزی تا ۷۰ درصد دیگر کاهش دهد!
راهنمای اصطلاحات (Glossary)
برای اینکه این مسیر فنی برای شما شفافتر شود، برخی اصطلاحات کلیدی را به زبان ساده ترجمه کردهایم:
FOIT (Flash of Invisible Text): فلاش متن نامرئی. حالتی که سایت لود شده، جای متنها خالی و سفید است تا زمانی که فونت دانلود شود. (مثل وقتی که قاب عکس روی دیوار است ولی عکسی داخلش نیست!)
FOUT (Flash of Unstyled Text): فلاش متن بدون استایل. حالتی که متنها اول با یک فونت زشت و پیشفرض کامپیوتر نشان داده میشوند و ناگهان به فونت اصلی سایت تغییر چهره میدهند.
WOFF2: مدرنترین و فشردهترین فرمت فایلهای فونت برای استفاده در طراحی سایت که حجم بسیار کمی دارد.
Preload: پیشبارگذاری. یک دستور کدنویسی که به مرورگر میگوید: «این فایل برای من خیلی مهم است، قبل از هر چیز دیگری دانلودش کن.»
Font-Display: یک ویژگی در کدنویسی ظاهر سایت (CSS) که به ما اجازه میدهد تصمیم بگیریم مرورگر در زمان طول کشیدن دانلود فونت، چه رفتاری با متنها داشته باشد.
بهینه سازی فونت ها برای سرعت سایت تنها یک اقدام تزئینی یا لوکس نیست؛ بلکه یکی از ستونهای اصلی در بهبود تجربه کاربری (UX) و افزایش رتبه سئو (SEO) سایت شماست. در بازار پر رقابت ایران، کاربری که سایت شما را به دلیل کندی ترک کند، با یک کلیک به سراغ سایت رقیب شما خواهد رفت. اجرای دقیق مواردی مانند استفاده از فرمت WOFF2، مدیریت با Font-display، استفاده از تگ Preload و میزبانی محلی فونتها، نیازمند دقت، تخصص فنی و زمان است.
شما به عنوان مدیر یک کسبوکار، باید تمرکزتان را روی استراتژیهای فروش و توسعه مجموعه خود بگذارید. درگیر شدن با کدهای پیچیده و استانداردهای متغیر گوگل، وظیفهای است که باید به متخصصان سپرده شود.
شرکت دیجیتال مارکتینگ چکاوک شهر، با تیمی از مهندسین زبده در زمینه سئو تکنیکال و بهینهسازی سرعت سایت، آماده است تا زیرساختهای دیجیتال شما را متحول کند. ما با پیادهسازی بهروزترین استانداردهای جهانی و بومیسازی آنها برای کاربران ایرانی، سرعت سایت شما را به بالاترین سطح ممکن میرسانیم تا هیچ مشتری پنهانی را به خاطر کندی سایت از دست ندهید. همین حالا با مشاوران ما در چکاوک شهر تماس بگیرید و قدم اول را برای داشتن یک سایت سریع، قدرتمند و پولساز بردارید.
برای ثبت دیدگاه باید وارد حساب کاربری خود شوید.
ورود / ثبتنامهنوز دیدگاهی برای این مطلب ثبت نشده است.