بهینه‌سازی فونت فارسی برای سئو و سرعت سایت

آیا فونت فارسی روی سئو سایت تأثیر دارد؟

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

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

بنابراین بهتر است بهینه‌سازی فونت را بخشی از بهینه‌سازی فنی و تجربه کاربری سایت بدانیم، نه یک تکنیک مستقیم برای افزایش رتبه در نتایج جستجو.

چرا فونت‌های فارسی می‌توانند سنگین باشند؟

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

در نتیجه یک فایل فونت کامل ممکن است بسیار بزرگ‌تر از چیزی باشد که یک وب‌سایت فارسی واقعاً به آن نیاز دارد.

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

بهترین فرمت فونت برای سایت چیست؟

برای استفاده از فونت‌های وب، فرمت WOFF2 معمولاً انتخاب مناسبی است. این فرمت با هدف استفاده در وب طراحی شده و می‌تواند حجم فایل را نسبت به برخی فرمت‌های قدیمی‌تر کاهش دهد.

در پروژه‌های مدرن، بهتر است فایل‌های فونت مورد نیاز سایت با فرمت WOFF2 ارائه شوند و از نگهداری فرمت‌های غیرضروری که مرورگرهای هدف به آن‌ها نیاز ندارند خودداری شود.

1. فقط وزن‌های مورد نیاز فونت را بارگذاری کنید

یکی از رایج‌ترین اشتباهات در طراحی سایت، بارگذاری تعداد زیادی وزن فونت است. برای مثال ممکن است یک سایت هم‌زمان وزن‌های 100، 200، 300، 400، 500، 600، 700، 800 و 900 را بارگذاری کند، در حالی که واقعاً فقط دو یا سه وزن استفاده می‌شود.

اگر طراحی سایت فقط به وزن معمولی و Bold نیاز دارد، بهتر است تنها همان وزن‌ها در صفحه ارائه شوند.

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

2. فونت فارسی را Subset کنید

Font Subsetting یکی از روش‌های مهم کاهش حجم فونت است. در این روش، مجموعه کاراکترهای مورد نیاز از فایل اصلی فونت جدا می‌شود و فایل کوچک‌تری برای استفاده در وب ایجاد می‌شود.

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

اگر Subset بیش از حد محدود باشد، ممکن است برخی کلمات با فونت جایگزین نمایش داده شوند یا مرورگر مجبور شود فایل دیگری را دریافت کند.

3. از Variable Font فقط در صورت نیاز استفاده کنید

Variable Font می‌تواند چندین محور و وزن را در یک فایل فونت ارائه کند و در پروژه‌های خاص بسیار مفید باشد. اما استفاده از آن به‌صورت خودکار به معنی کاهش حجم نیست.

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

بنابراین انتخاب بین فونت استاتیک و Variable Font باید بر اساس نیاز واقعی پروژه و اندازه فایل‌های نهایی انجام شود.

4. font-display چیست؟

ویژگی font-display مشخص می‌کند مرورگر هنگام بارگذاری فونت چگونه رفتار کند.

یکی از گزینه‌های رایج برای سایت‌ها font-display: swap است. در این حالت مرورگر می‌تواند ابتدا متن را با فونت جایگزین نمایش دهد و پس از آماده شدن فونت اصلی، آن را جایگزین کند.

نمونه ساده استفاده از آن:

@font-face {
  font-family: "PersianWebFont";
  src: url("/fonts/persian-webfont.woff2") format("woff2");
  font-display: swap;
}

انتخاب مقدار مناسب font-display به طراحی و نیاز پروژه بستگی دارد و باید رفتار واقعی صفحه پس از اعمال آن بررسی شود.

5. آیا باید فونت را Preload کنیم؟

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

با این حال نباید تمام فایل‌های فونت را Preload کرد. اگر چندین فونت و وزن را هم‌زمان Preload کنید، منابع شبکه‌ای که برای تصاویر، CSS یا محتوای مهم‌تر مورد نیاز هستند ممکن است تحت فشار قرار بگیرند.

بنابراین Preload باید فقط برای فونت‌هایی استفاده شود که واقعاً در نمایش اولیه صفحه نقش مهمی دارند.

6. از فونت‌های سیستم در شرایط مناسب استفاده کنید

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

البته در وب‌سایت‌های فارسی ممکن است فونت سیستم بین دستگاه‌ها تفاوت زیادی داشته باشد؛ بنابراین اگر هویت بصری برند به یک فونت خاص وابسته است، استفاده از Web Font می‌تواند انتخاب مناسب‌تری باشد.

7. فونت‌های غیرضروری را حذف کنید

بسیاری از وب‌سایت‌ها به دلیل قالب یا افزونه‌های مختلف چند خانواده فونت را هم‌زمان بارگذاری می‌کنند.

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

8. فونت را از منبع مناسب ارائه کنید

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

در بسیاری از پروژه‌ها، نگهداری فونت‌های اصلی روی زیرساخت خود سایت مزیت‌هایی مانند کنترل بهتر نسخه فایل و کاهش وابستگی به سرویس‌های خارجی دارد.

مهم‌تر از محل ارائه فونت، اندازه فایل، Cache Policy، تعداد درخواست‌ها و زمان دسترسی به آن است.

9. کش مرورگر را برای فونت تنظیم کنید

فایل‌های فونت معمولاً تغییرات بسیار کمتری نسبت به محتوای سایت دارند. بنابراین می‌توان برای آن‌ها سیاست کش مناسبی در نظر گرفت.

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

10. از بارگذاری فونت در تمام صفحات جلوگیری کنید

اگر یک فونت فقط در بخش خاصی از سایت استفاده می‌شود، نیازی نیست همیشه و در تمام صفحات بارگذاری شود.

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

11. فونت فارسی و LCP

اگر متن بزرگ و مهم صفحه با فونت وب نمایش داده شود، نحوه بارگذاری فونت می‌تواند روی تجربه نمایش محتوای اصلی اثر بگذارد.

با این حال، نباید تصور کرد که هر مشکل LCP مربوط به فونت است. تصویر اصلی، HTML، CSS، TTFB و نحوه اولویت‌بندی منابع نیز می‌توانند عوامل مهمی باشند.

برای همین بهتر است ابتدا مشخص شود عنصر LCP صفحه چیست و سپس ارتباط آن با بارگذاری فونت بررسی شود.

12. فونت و CLS چه ارتباطی دارند؟

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

انتخاب مناسب فونت جایگزین، تنظیم صحیح CSS و مدیریت نحوه بارگذاری فونت می‌تواند به کاهش چنین مشکلاتی کمک کند.

13. استفاده از unicode-range برای فونت فارسی

ویژگی unicode-range می‌تواند مشخص کند یک فایل فونت برای چه محدوده‌ای از کاراکترها استفاده شود.

این قابلیت می‌تواند در معماری‌های پیشرفته‌تر برای تقسیم فونت به مجموعه‌های مختلف مفید باشد. برای مثال می‌توان بخش‌هایی از فونت را برای کاراکترهای فارسی، لاتین یا مجموعه‌های خاص تعریف کرد.

البته پیاده‌سازی آن باید با دقت انجام شود تا مرورگر مجبور به دریافت چندین فایل غیرضروری نشود.

14. فونت فارسی در وردپرس

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

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

بهتر است با بررسی Network و Source صفحه مشخص کنید چه فایل‌هایی واقعاً بارگذاری می‌شوند و کدام فایل‌ها غیرضروری هستند.

15. فونت‌های فارسی گوگل را چگونه استفاده کنیم؟

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

در بسیاری از پروژه‌های فارسی، می‌توان فونت مورد نیاز را به‌صورت Local روی سرور سایت قرار داد تا کنترل بیشتری روی فایل‌ها، نسخه‌بندی، Cache و نحوه بارگذاری وجود داشته باشد.

16. آیا Local Font بهتر از CDN است؟

پاسخ به این سؤال به معماری سایت بستگی دارد. Local Hosting به شما کنترل بیشتری روی فایل فونت می‌دهد، در حالی که CDN می‌تواند در شرایط مناسب فایل را از نقطه‌ای نزدیک‌تر به کاربر ارائه کند.

برای سایت‌هایی که بیشتر کاربران آن‌ها در یک منطقه مشخص هستند، یک زیرساخت مناسب و نزدیک به کاربران ممکن است اهمیت بیشتری از استفاده صرف از یک CDN عمومی داشته باشد.

17. چگونه حجم فونت فارسی را کاهش دهیم؟

برای کاهش حجم فونت می‌توان این اقدامات را انجام داد:

• استفاده از WOFF2
• حذف وزن‌های غیرضروری
• استفاده از Font Subsetting
• حذف کاراکترهای غیرضروری
• حذف خانواده‌های فونت اضافی
• استفاده صحیح از Variable Font در پروژه‌های مناسب
• کش کردن فایل‌های فونت
• جلوگیری از بارگذاری فونت در صفحات غیرضروری

18. آیا استفاده از چند فونت فارسی اشتباه است؟

استفاده از چند فونت الزاماً اشتباه نیست، اما باید دلیل مشخصی داشته باشد. هر خانواده فونت معمولاً منابع جداگانه‌ای نیاز دارد و استفاده زیاد از آن‌ها می‌تواند حجم و پیچیدگی بارگذاری صفحه را افزایش دهد.

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

19. چگونه فونت سایت را از نظر عملکرد بررسی کنیم؟

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

موارد زیر را بررسی کنید:

• تعداد فایل‌های فونت
• حجم هر فایل
• فرمت فایل
• زمان دریافت فایل
• آیا فایل واقعاً در صفحه استفاده می‌شود؟
• آیا فونت قبل از محتوای مهم بارگذاری می‌شود؟
• آیا فایل فونت از کش استفاده می‌کند؟

20. نمونه ساختار بهینه برای یک سایت فارسی

برای بسیاری از سایت‌ها می‌توان ساختاری ساده مانند زیر در نظر گرفت:

• یک خانواده فونت اصلی
• یک وزن معمولی برای متن
• یک وزن Bold برای عناوین و تأکیدها
• فایل‌های WOFF2
• Subset مناسب برای کاراکترهای مورد نیاز
• font-display مناسب
• Cache-Control مناسب
• Preload فقط برای فونت واقعاً حیاتی در صورت نیاز

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

آیا Preload همه فونت‌ها باعث افزایش سرعت می‌شود؟

خیر. Preload کردن تعداد زیادی منبع می‌تواند باعث رقابت آن‌ها برای پهنای باند و اتصال شبکه شود.

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

چک‌لیست بهینه‌سازی فونت فارسی

1. تمام فایل‌های فونت سایت را شناسایی کنید.
2. حجم هر فایل را بررسی کنید.
3. فونت‌های غیرضروری را حذف کنید.
4. وزن‌های استفاده‌نشده را حذف کنید.
5. در صورت امکان از WOFF2 استفاده کنید.
6. فونت را برای کاراکترهای مورد نیاز Subset کنید.
7. font-display را به‌درستی تنظیم کنید.
8. فقط فونت‌های حیاتی را در صورت نیاز Preload کنید.
9. کش مناسب برای فایل‌های فونت تنظیم کنید.
10. بارگذاری فونت در صفحات غیرضروری را حذف کنید.
11. تأثیر فونت بر LCP و CLS را بررسی کنید.
12. بعد از تغییرات، عملکرد سایت را دوباره اندازه‌گیری کنید.

اشتباهات رایج در بهینه‌سازی فونت فارسی

بارگذاری تمام وزن‌های فونت

استفاده از همه وزن‌ها در حالی که فقط دو وزن مورد نیاز است، حجم غیرضروری ایجاد می‌کند.

استفاده از فایل TTF بزرگ

استفاده مستقیم از فایل‌های دسکتاپ بزرگ برای وب می‌تواند انتخاب مناسبی نباشد. بهتر است نسخه مناسب وب فونت تهیه شود.

Preload کردن تمام فونت‌ها

Preload بیش از حد می‌تواند باعث رقابت فونت‌ها با منابع مهم دیگر شود.

استفاده هم‌زمان از چند خانواده فونت

هر خانواده فونت می‌تواند منابع بیشتری به صفحه اضافه کند. بهتر است استفاده از چند فونت دلیل مشخصی داشته باشد.

توجه نکردن به فونت قالب وردپرس

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

جمع‌بندی

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

استفاده از WOFF2، کاهش تعداد وزن‌ها، Subsetting، مدیریت صحیح font-display، استفاده محتاطانه از Preload، کش مناسب و جلوگیری از بارگذاری فونت‌های غیرضروری از مهم‌ترین اقدامات برای بهینه‌سازی فونت فارسی هستند.

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

منابع

• Google Search Central – Core Web Vitals
• web.dev – Web Fonts and Performance
• MDN Web Docs – @font-face
• MDN Web Docs – font-display
• W3C – Web Fonts Specifications