آموزش بهینه سازی فونت سایت برای افزایش سرعت

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

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

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

علاوه بر این، بهینه‌سازی وب‌فونت‌ها می‌تواند امتیاز شاخص‌های حیاتی وب (Core Web Vitals)، به‌ویژه شاخص CLS (جابجایی تجمعی طرح‌بندی) را به‌طور قابل‌توجهی افزایش دهد.

وب‌فونت‌ها چه هستند؟

در وب دو نوع اصلی فونت وجود دارد:

• فونت‌های امن برای وب (Web-safe fonts): فونت‌های استانداردی مانند Times New Roman، فونت Arial و Courier که به‌صورت پیش‌فرض بر روی دستگاه‌ها نصب شده‌اند.
• وب‌فونت‌ها: این فونت‌ها به‌طور پیش‌فرض روی دستگاه‌ها نصب نشده و باید توسط مرورگر قبل از نمایش بارگذاری شوند. برای کسانی که با جزئیات فنی آشنا نیستند، فونت‌ها مجموعه‌ای از حروف الفبا هستند؛ اما اگر دقیق‌تر نگاه کنیم، این فونت‌ها در واقع مجموعه‌ای از گلیف‌ها (glyphs) بوده و هر گلیف یک وکتور Vector است که یک حرف یا نماد را در زبان‌های مختلف، نه فقط انگلیسی، توصیف می‌کند.

سفارش خدمات افزایش سرعت سایت وردپرس

دو متغیر اندازه یک فایل فونت خاص را تعیین می‌کنند: پیچیدگی مسیرهای برداری هر گلیف و تعداد گلیف‌ها در یک فونت خاص. به عنوان مثال، فونت (Open Sans) اوپن سنس، که یک فونت وب محبوب است، شامل ۸۹۷ گلیف است که شامل کاراکترهای لاتین، یونانی و سیریلیک می‌شود.

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

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

1. هاستینگ خود: ذخیره منابع فونت در سرور وب شما همراه با سایر فایل‌های وب‌سایتتان.
2. هاستینگ شخص ثالث: استفاده از خدمات فونت مانند Adobe Typekit، Fonts.com یا Google Fonts.

هر کدام از این گزینه‌ها مزایا و معایب خود را دارند. استفاده از میزبانی توسط شخص ثالث ممکن است راه‌اندازی ساده‌تری داشته باشد، اما به این معنی است که شما هیچ کنترلی بر عملکرد و امنیت نخواهید داشت و حتی اگر سرویس دچار مشکل شود، نمی‌توانید کاری انجام دهید. برای مثال، در سال ۲۰۱۵ وقتی سرورهای Typekit دچار مشکل شد، سایت‌های سراسر جهان مجبور شدند از فونت‌های Arial و Georgia استفاده کنند.

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

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

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

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

در اینجا چند قدم برای بهینه‌سازی ارائه فونت‌ها آورده شده است.

1. بررسی و نظارت بر استفاده از فونت‌ها

با گسترش پشتیبانی مرورگرها از قاعده CSS @font-face، استفاده از وب‌فونت‌های سفارشی به طرز چشمگیری افزایش یافته است. بر اساس گزارش HTTP Archive، ۶۷٪ از صفحات وب در حال حاضر از فونت‌های سفارشی استفاده می‌کنند و به‌طور میانگین هر وب‌سایت چهار درخواست HTTP  برای بارگذاری فونت‌ها دارد.

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

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

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

2. استفاده از زیرمجموعه‌های فونت

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

همان‌طور که ایلیا گریگوریک، متخصص برجسته بهینه‌سازی عملکرد وب در گوگل، توضیح می‌دهد، بسیاری از فونت‌ها می‌توانند به زیرمجموعه‌ها یا حتی به چندین بازه یونیکد تقسیم شوند تا تنها کاراکترهای مورد نیاز برای یک صفحه خاص بارگذاری شوند. با استفاده از @font-face، می‌توانید از توصیف‌گر Unicode-range برای تعیین لیستی از مقادیر بازه استفاده کنید که به سه شکل مختلف قابل تنظیم هستند:

• کد نقطه‌ای تنها (برای مثال، U+416): نشان‌دهنده یک کاراکتر واحد است.
• محدوده بازه‌ای (برای مثال، U+400-4ff): نشان‌دهنده نقطه‌های شروع و پایان یک بازه از کاراکترها است.
• محدوده wildcard (برای مثال، U+4??): کاراکترهای? نشان‌دهنده هر رقم هگزادسیمال هستند.

برای مثال، در اینجا نحوه تقسیم خانواده فونت Awesome را به زیرمجموعه‌های لاتین و ژاپنی نشان می‌دهیم که مرورگر به‌طور خودکار فقط زمانی که کاربر به آن نیاز داشته باشد، دانلود می‌کند:

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

اگر هدف شما از به کار بردن یک وب‌فونت گوگل، تنها نمایش عنوان سایت باشد، یک نکته مهم وجود دارد: «فقط کاراکترهای مورد نیاز برای عنوان را دانلود کنید». برای این کار، کافی است &text=  را به همراه حروف خاص مورد نظر خود در انتهای URL فونت گوگل اضافه نمایید.

برای مثال، اگر بخواهید کلمه “Blog” را با استفاده از فونت مونتسرات بارگذاری کنید، می‌توانید از روش زیر بهره بگیرید:

<link href='//fonts.googleapis.com/css?family=Montserrat&text=Blog' rel='stylesheet'>

این لینک به CDN فونت‌های گوگل می‌گوید تنها حرف بزرگ B و حروف کوچک l،o و g را بارگذاری کند و سایر کاراکترها را نادیده بگیرد.

3. ارائه فرمت‌های بهینه‌شده فونت برای هر مرورگر

در وب، چهار فرمت اصلی برای نگهداری فونت‌ها وجود دارد: EOT، TTF،WOFF و.WOFF2

• فونت باز نوع گنجانده شده :(EOT) این فرمت توسط مایکروسافت طراحی شده و در حال حاضر تنها توسط مرورگرهای IE استفاده می‌شود.
• فونت نوع واقعی :(TTF) فرمتی که از اواخر دهه ۱۹۸۰ وجود داشته و پشتیبانی جزئی مرورگرهای IE را دارد.
• فرمت فونت باز وب :(WOFF) فرمتی که در سال ۲۰۰۹ توسعه یافته و در واقع نسخه فشرده شده و با اطلاعات متادیتای اضافی از OpenType یا TrueType است. این فرمت از پشتیبانی گسترده‌ای برخوردار بوده، اما در برخی مرورگرهای قدیمی در دسترس نیست.
• فرمت فونت باز وب :(WOFF2) نسخه بهبود یافته‌ای از WOFF است که به‌طور میانگین کاهش ۳۰ درصدی حجم فایل را فراهم می‌آورد. بااین‌حال، پشتیبانی از این فرمت هنوز در بسیاری از مرورگرها، در حال ‌توسعه می‌باشد.

متأسفانه هیچ فرمت واحدی وجود ندارد که در تمامی مرورگرها قابل استفاده باشد، بنابراین باید چندین فرمت مختلف را ارائه دهید. برای انتخاب فرمت‌های مناسب، بهتر است که به آمار گوگل آنالیتیکس (Google Analytics) مراجعه کنید تا ببینید کدام مرورگرها و دستگاه‌ها در بین بازدیدکنندگان شما پرطرفدارتر هستند.

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

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

بااین‌حال، مرورگرهایی مانند Opera Mini، IE8 و نسخه‌های قدیمی‌تر مرورگرهای اندروید از آن پشتیبانی نمی‌کنند. اگرچه این مسئله می‌تواند نگران‌کننده باشد، اما این مرورگرها به طور خودکار به فونت‌های ایمن وب، باز می‌گردند.

4. به local() در لیست src اولویت دهید

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

یکی دیگر از مشکلات استفاده از فونت‌های وب، نمایش لحظه‌ای یک فضای خالی یا متن بدون قالب‌بندی است. این پدیده به ترتیب فلش متن نامرئی (FOIT) و فلش محتوای بدون سبک (FOUC)  نامیده می‌شود. در واقع، در حین بارگذاری فونت در مرورگر، ممکن است کاربر برای لحظه‌ای یک فضای خالی به جای متن یا متنی با فرمت اولیه ببیند. این اتفاق برای کاربرانی که فونت مورد نظر را از قبل روی دستگاه خود نصب کرده‌اند، کاملاً غیرضروری است.

راه‌حل این مشکل بسیار ساده است: از دستورlocal() برای بررسی وجود فونت روی سیستم کاربر استفاده کنید. با قرار دادن local (‘نام فونت’) در ابتدای لیست src، مطمئن می‌شوید که درخواست‌های HTTP برای فونت‌هایی که از قبل وجود دارند، ارسال نشود.

کد CSS مثال:

@font-face {
    font-family: 'Lobster';
    src: local('Lobster'), url('path/to/lobster.ttf') format('truetype');
}

با این کد:

• اول به مرورگر می‌گوییم که ببینید آیا “Lobster” در سیستم کاربر هست یا نه.
• اگر هست، استفاده می‌شود و نیازی به دانلود نیست.
• اگر نیست، از URL برای بارگذاری فونت استفاده می‌شود.

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

5. درخواست فونت را زودتر ارسال کنید

به‌طور پیش‌فرض، دستور@font-face  فونت‌ها را به صورتLazy Load  بارگذاری می‌کند. این بدان معناست که درخواست‌های مربوط به فونت پس از بارگذاری محتوای صفحه انجام می‌شوند. از دیدگاه سرعت و عملکرد، این روش بسیار مناسب است، به‌ویژه اگر به تکنیک‌های ارتقاء تدریجی (Progressive Enhancement)  اهمیت می‌دهید.

اما اگر تجربه کاربری برای شما مهم است و نمی‌خواهید کاربران با نمایش ناخوشایند متن نامرئی (FOIT)  روبرو شوند، می‌توانید این رفتار را برای فونت‌های خاصی مانند فونت عنوان تغییر دهید.

برای سفارشی‌سازی بارگذاری و نمایش فونت‌ها می‌توانید از دستوراتی مانند <link rel=”preload”>، ویژگی font-display  یاFont Loading API  استفاده کنید.

دستور <link rel=”preload”> به مرورگر اطلاع می‌دهد که به زودی به یک فونت نیاز خواهد بود، اما جزئیات مربوط به نحوه استفاده از آن را تعیین نمی‌کند. در ادامه شیوه استفاده از این دستور توضیح داده شده است:

HTML

<head>
<!-- Other tags... -->
<link rel="preload" href="/fonts/awesome-l.woff2" as="font">
</head>

CSS

@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
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-face را در بالای تمام تگ‌های<script> قرار دهید.

برای اطلاعات بیشتر درباره استفاده از ویژگی font-display، مقاله «font-display for the Masses» از سایت CSS-Tricks را مطالعه کنید.

6. اهمیت کش‌کردن صحیح (Caching)

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

• آموزش حذف کش سایت در مرورگر و وردپرس

راهنمای اصول وب گوگل پیشنهاد می‌کند که سرورهای شما یک زمان‌سنج max-age طولانی و یک توکن بازبینی ارائه دهند تا استفاده مؤثر از فونت‌ها در صفحات مختلف سایت شما امکان‌پذیر باشد. همچنین، باید از ذخیره فونت‌ها با استفاده از localStorage یا IndexedDB پرهیز کنید، زیرا هر یک از این روش‌ها مشکلات عملکردی خاص خود را دارند.

• Window: localStorage property
• IndexedDB API

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

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

نتیجه‌گیری

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

با بهینه‌سازی فونت‌های وب، احتمالاً می‌توانید نمره Cumulative Layout Shift که یکی از معیارهای اصلی Core Web Vitals را نیز بهبود دهید.

جهت خرید خدمات افزایش سرعت با تضمین، از خدمات افزایش سرعت سایت وردپرسی [تضمینی زیر 3 ثانیه] استفاده نمایید.

در اینجا برخی منابع اضافی برای بهینه‌سازی سرعت لود سایت آورده شده است:

• آموزش فعال کردن Gzip (فعال سازی جی‌زیپ)
• آموزش بهینه سازی Core Web Vitals
• لیزی لود (Lazy Loading) چیست و چرا باید از آن استفاده کرد؟

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

شما از چه تعداد فونت استفاده می‌کنید؟ آیا به بهینه‌سازی فونت‌های وب فکر کرده‌اید؟ نظرات خود را در زیر به اشتراک بگذارید!