استفاده از فونت‌های سفارشی در طراحی سایت و سرعت سایت

استفاده از فونت‌های سفارشی با استفاده از قانون ‎@font-face بسیار متداول است. تقریبا می‌توان گفت در طراحی سایت‌های جدید دیگر نمی‌توان به فونت‌های پیش‌فرض مرورگرها اطمینان داشت.

سرعت سایت

با وجود اینکه این کار باعث بهبود شکل ظاهری سایت و بهبود تجربه کاربری می‌شود، ولی معایبی نیز به همراه دارد:

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

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

تاخیر نمایش اطلاعات به چه معناست ؟

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

فونت جایگزین به صورت زیر تعریف می‌شود:

در قطعه کد بالا فونت اصلی Example و فونت جایگزین sans-serif است که یک خانواده فونت و قابل تفسیر توسط مرورگرهای مختلف است.

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

راه حل تاخیر نمایش محتوا چیست ؟

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

بسته به اینکه نمایش متن به کاربر مهم‌تر است یا شکل گرافیکی حروف فونت، گزینه‌های مختلفی با استفاده از دستور font-display قابل تعریف است:

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

گزینه‌های موجود برای font-display:

  • در حالت block که معمولا معادل auto است، مرورگر حدود ۳ ثانیه متنظر می‌ماند و اگر فونت اصلی بارگزاری نشود، از فونت جایگزین استفاده می‌کند. سپس هر زمان که فونت اصلی بارگزاری شد آن را جایگزین می‌کند.
  • در حالت swap  زمان نمایش فونت جایگزین بسیار کوتاه‌تر از ۳ ثانیه خواهد بود. فونت اصلی هر زمان که در دسترس باشد، جایگزین می‌شود.
  • در حالت fallback فونت اصلی ممکن است هیچ وقت بارگزاری نشود. این گزینه هنگامی که اهمیت فونت کم باشد استفاده می‌شود و مرورگر ممکن است به دلایل مختلف از جمله کندی سرعت اینترنت، از بارگزاری فونت اصلی چشم‌پوشی کند.
  • در حالت optional اهمیت فونت در کمترین مقدار خود قرار دارد و احتمال اینکه به دلایل مختلف فونت در بیشتر مواقع توسط مرورگر بارگزاری نشود وجود دارد.

پشتیبانی در مرورگرهای مختلف

این ویژگی در مرورگرهای مدرن مثل فایرفاکس و کروم پشتیبانی می‌شود. در حال حاضر مرورگرهای Edge و IE از font-display پشتیبانی نمی‌کنند. البته تا زمان نهایی شدن این قانون در نگارش چهارم CSS پشتیبانی از آن توسعه بیشتری خواهد یافت.

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

چند توصیه و نکته

  1. در هنگام استفاده از فونت‌های سفارشی، بهتر است از گزینه Local هم استفاده کنید تا اگر کاربر قبلا آن فونت را روی سیستم خود نصب شده دارد، فونت مجددا دانلود نشود.
  2. تنظیمات Cache مربوط به فونت‌ها را به درستی انجام دهید تا دفعات دانلود فونت از سرور شما به حداقل برسد.
  3. تا جایی که ممکن است از فونت‌های موجود در CDNهای عمومی استفاده کنید، تا احتمال موجود بودن فونت روی سیستم کاربران به حداکثر برسد.
  4. تعداد فونت‌های موجود در صفحات را به حداقل مورد نیاز برسانید و آن‌ها را به خوبی فشرده کنید.
  5. فونت‌هایی که در دید اول سایت استفاده شده‌اند را طوری انتخاب و تنظیم نمایید که هنگام باز شدن سایت، کاربران هر چه زودتر متن‌ها را مشاهده کنند.
  6. برای فونت‌های آیکون از گزینه font-display: block استفاده کنید تا مطمئن شوید که مرورگر بیشترین تلاش را برای بارگزاری فونت به کار می‌گیرد.

منبع:

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱