استفاده بهینه از فونت ها در وب – قسمت سوم

xwebfonts-subsetting.png.pagespeed.ic.eVRaX3Vckc

دیروز به معرفی سرویس فونت گوگل پرداختیم و راه های استفاده از آن. اما امروز قصد دارم در مورد استفاده بهینه تر از این سرویس بنویسم.

استفاده از چند فونت به طور همزمان

یکی از خروجی ها برای استفاده از فونت گوگل استفاده از تگ link هست که گوگل نیز استفاده از این روش را به شما توصیه می کند. بطور مثال برای استفاده از فونت Open Sans کافیست کد زیر را در درون تگ head سایتتان قرار دهید:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

حالا ممکن است در بسیاری از حالات طرح شما بیش از یک فونت مورد نیاز باشد. بنابراین بهتر است برای کاهش HttpRequest تمامی موارد را با هم انتخاب کرده و در یک درخواست واحد برای گوگل بفرستید. بطور مثال در نمونه زیر من همزمان 2 فونت Open Sans و Roboto را با یک درخواست به گوگل ارسال کرده ام:

<link href='http://fonts.googleapis.com/css?family=Open+Sans|Roboto' rel='stylesheet' type='text/css'>

استفاده محدود از یک فونت

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

بطور مثال من در طرح خود قصد دارم از فونت Open Sans تنها برای کلمه Hello استفاده کنم. کافیست به این شکل درخواست خودم رو به گوگل ارسال کنم:

<link href='http://fonts.googleapis.com/css?family=Open+Sans&text=Hello' rel='stylesheet' type='text/css'>

خب بیایید نتیجه کار رو بررسی کنیم:

در تصویر زیر حالت معمولی لود فونت Open Sans را مشاهده می کنید که حجمی معادل 14.7  کیلوبایت را به سایت افزوده است:

google-font-request

حالا در تصویر زیر ما درخواست کاراکترهای کلمه Hello را داده ایم:

google-font-request-subset

همونطور که مشاهده می کنید در حالت دوم کاهش بسیار زیادی را مشاهده می کنیم یعنی: 1.6 کیلوبایت.

توجه داشته باشید که در حالت دوم فونت لود شده تنها حاوی کاراکترهای H-e-l-o هست و استفاده از آن برای دیگر کاراکترها نتیجه ای نخواهد داد.

محدود کردن زبان یک فونت

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

xwebfonts-subsetting.png.pagespeed.ic.eVRaX3Vckc

بطور مثال در بالا فونت Open Sans را که بیش از 20 زبان را پشتیبانی می کند مشاهده می کنید. حجم کامل آن برابر با 217 کیلوبایت و حجم کاراکترهای انگلیسی آن برابر با 36 کیلوبایت است.

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

توجه داشته باشید که استفاده از سرویس هایی همچون گوگل فونت که بسیار محبوب هستند می توانند با کش کردن فونت ها در مرورگر کاربر سرعت لود را حتی به مراتب بیشتر از این کنند. بطور مثال فونت Open Sans در هفته گذشته بیش از 7,877,412,212 بار توسط گوگل بازخوانی شده است و این یعنی اگر کاربری قبل از ورود به سایت شما وارد سایت دیگری که از همین فونت در همین سرویس استفاده کرده بوده است، شده باشد، دیگر نیازی به بارگذاری فونت نمی باشد و این یعنی حجم صفر.

3 دیدگاه

  1. درود مجدد.
    در پاراگراف آخر فکر می کنم یک نکته رو اشتباه بیان کردید. یک درخواست با یک آدرس ثابت وقی از یک سایت به سایت دیگه میریم کش نمی‌شه. در واقع گوگل فونت اگر یک CDN باشه. باعث پاسخگویی سریعتر (به خاطر کش شدن دی ان اس) و عدم تکرار درخواست در همون دامین میشه.
    و با تغییر دامین یا سایت. مجدد درخواست ارسال میشه.حداقل برای یکبار.

    • ممنون صالح جان بابت نظرت. تا جایی که من می دونم یک فایل از یک آدرس می تونه در دومین های مختلف کش بشه.

      The font files themselves are cached for one year, which is long enough that the entire web gets substantially faster: When millions of websites all link to the same fonts, they are cached after visiting the first website and appear instantly on all other subsequently visited sites.

      https://developers.google.com/fonts/faq

      • حق با شماست . تست کردم مجدد. اگر در هدر کوکی نیاز نباشه این مورد امکان پذیر هست. من تو تست هام همیشه کوکی داشتم. بقیه سرویس ها رو چک کردم. همین وضعیت رو داشتن. ممنون باعث شدی کمی بازنگری کنم روی این اتفاق.

دیدگاه ها بسته شده است.