Google Fonts یکی از پرکاربردترین منابع شخص ثالث (third-party) در بسیاری از وب سایت ها است. این فونت ها یکپارچه سازی و ارائه بهتر مطالب را برای وب سایت ها آسان می کنند. با داشتن بیش از 999 فونت رایگان و منحصر به فرد، کاربران بیش از 40 تریلیون بار در (ژوئیه 2020) Google Fonts را مشاهده کرده اند. فونت های میزبانی شده خارجی مانند Google Fonts نیز یکی از سنگین ترین منابع شخص ثالث برای بارگیری است. آنها نه تنها به حجم صفحه اضافه می شوند، بلکه وب سایت ها برای واکشی آنها مجبور به ارسال درخواستهای HTTP اضافی هستند. بنابراین، به نظر می رسد یک روش مناسب، میزبانی Google Fonts به صورت محلی و استفاده از آنها در سرور خود سایت شما است.
از لحاظ تئوری، این راهکار باعث بارگیری سریعتر وب سایت های شما می شود. اما به نظر می رسد که فونت ها به طور عجیبی پیچیده هستند و میزبانی از آنها در سرور خود، ممکن است بهینه سازی عملکرد وب سایت شما را کمی پیچیده تر کند. در این مقاله، اصول فونت های وب، از جمله Google Fonts و نحوه میزبانی محلی آنها توضیح داده می شود. سپس متوجه خواهید شد که آیا در عملکرد یک وب سایت تفاوتی ایجاد می کند یا خیر.
فونت های وب چیست؟
فونت های وب به فونتهایی اشاره دارد که می توانید از آنها برای نمایش متن در سایتهای خود استفاده کنید. آنها مجموعه ای از حروف glyph هستند، glyph یک بردار است که می تواند یک حرف، عدد یا نماد را نشان دهد. در روزهای ابتدایی وب، توسعه دهندگان، فونت های وب محدودیت هایی برای انتخاب داشتند. سیستم عامل های اصلی فونت هایی همچون Arial ،Georgia ،Times New Roman را به همراه دارند. بنابراین این فونت ها به عنوان فونت های ایمن وب شناخته می شوند.
تصویر(1)
CSS3 قانون @ font-face را معرفی کرد که به توسعه دهندگان وب امکان استفاده از فونت های سفارشی را می دهد. آنها مرورگر را مجبور به بارگیری آنان به همراه سایر منابع وب سایت می کنند. این ویژگی راه های جدید هیجان انگیزی را برای طراحی وب سایت ها باز می کند. برخی از محبوب ترین فونت های وب که امروزه استفاده می شوند Open Sans ،Roboto و Lato هستند. این فونت ها جزو فونت های Google نیز هستند.
تصویر(2)
Google Fonts چیست؟
Google Fonts کاتالوگ عظیمی از فونتهای منبع باز رایگان است. آنها ایجاد وب سایت های زیبا با تایپوگرافی عالی را برای طراحان و توسعه دهندگان وب آسان می کنند. هم اکنون، Google Fonts شامل فونت های وب برای بیش از 135 زبان است.
تصویر(3)
Google Fonts توسط بیش از 10 میلیون وب سایت استفاده می شود (منبع: SimilarTech)
Google Fonts نه تنها دارای شرایط ویژه برای صدور مجوز برای همه فونتهای وب است، بلکه میزبانی و تحویل آنها را نیز بر عهده دارد. حتی می توانید آن را به عنوان CDN برای فونت ها در نظر بگیرید. از این رو، هر کس می تواند با اضافه کردن یک خط در هدرهای صفحه وب سایت خود، هر زمان که بخواهد از آنها بهره ببرد.
Google Fonts و عملکرد وب سایت
Google Fonts ادعا می کند با کش کردن فونت در سایت های مختلف، صفحات وب را سریعتر بارگیری می کند تا هر فونت برای همه وب سایت ها فقط یک بار بارگیری شود. مرورگر می تواند برای هر وب سایت دیگری که همان Google Font را درخواست می کند از همان فونت ذخیره شده استفاده کند. همچنین این سرویس مرورگر کاربر را شناسایی کرده و کوچکترین فایل فونت را براساس جدیدترین فناوری هایی که مرورگر از آنها پشتیبانی می کند، برای وی ارسال می نماید. به عنوان مثال، فونت های کاربر با فرمت WOFF 2.0 را هر زمان که قابل استفاده باشد در اختیار شما قرار می دهد زیرا از فشرده سازی بالاتری نسبت به سایر قالب های فونت وب برخوردار است. با این حال، هنگامی که از Google Fonts در وب سایت خود استفاده می کنید، صفحه استایل اصلی وب سایت درخواست HTTP را برای واکشی صفحه Google Fonts stylesheet (یک پرونده CSS) ارسال می کند. سپس این درخواست به دامنه fonts.googleapis.com ارسال می گردد. به طور معمول، برای هر فونتی که استفاده می کنید، یک درخواست ایجاد می شود.
صفحه شیوه نامه (stylesheet) گوگل فونت درخواست دیگری برای بارگیری پرونده فونت (به عنوان مثال یک پرونده WOFF یا WOFF 2.0) ارائه می دهد. شیوه نامه این درخواست ها را به دامنه fonts.gstatic.com كه همه فونت های Google در آن میزبانی شده اند هدایت می كند. ایجاد درخواستهای اضافی HTTP در وب سایتهای شما زمان بر است. با بررسی نمودار آبشاری تولید شده توسط ابزار WebPageTest می توانید این موضوع را تأیید کنید.
تصویر(4)
با استفاده از Google Fonts حداقل دو درخواست اضافی HTTP اضافه می شود.
Google Fonts API مدت زمان انقضا کمتر از 1 روز را برای کش کردن فونت ها تعیین می کند. شما نمی توانید این زمان را تغییر دهید زیرا Google بر اساس فاکتورهای مختلف فایل CSS را به طور خودکار تولید می کند. برخی از ابزارهای تست سرعت وب سایت این مسئله را به عنوان یک مشکل عملکردی نشان می دهند و میزبانی فونت ها را به صورت محلی پیشنهاد می کنند. به این ترتیب می توانید زمان انقضا فونت ها را به صورت دستی افزایش داده و آنها را برای مدت طولانی تری کش کنید. بخش زیر شامل چگونگی انجام دقیق این کار در سایت وردپرسی شما است.
چگونه می توان فونت های GOOGLE را از سرور خود اجرا کرد؟
ساده ترین راه برای میزبانی خودکار Google Fonts به صورت محلی در سایت وردپرسی، استفاده از افزونه رایگان وردپرس OMGF است. این افزونه از Google Fonts Helper API برای بارگیری فونت ها در سرور وب شما استفاده می کند. پس از آن، OMGF یک صفحه استایل برای فونت های بارگیری شده تولید می کند و آن را به هدر سایت شما اضافه می کند.
تصویر(5)
جستجوی هر خانواده ای از Google Font که تمایل به استفاده از آن را دارید با OMFG آسان است. همچنین می توانید بر روی دکمه تشخیص خودکار کلیک کنید تا به شما اجازه دهد تا از فونت های Google در وب سایت استفاده کنید.
تصویر(6)
بعد از اینکه به خانواده خاصی از فونت رسیدید، می توانید زیر مجموعه ها و استایل های فونت را بارگیری کنید. اینکار می تواند به شما کمک کند تا اندازه فونت هایی که ارائه می شوند را به میزان قابل توجهی کاهش دهید. استفاده از Google Fonts به صورت محلی باید بارگذاری صفحه را با کم کردن درخواست DNS و استفاده از حافظه کش مرورگر کاهش دهد. اما آیا این فرض واقعاً درست است؟
تست عملکرد وب سایت با فونت های GOOGLE که در هاست شما آپلود شده اند
جهت تست یک وب سایت ساختگی ایجاد شد که از Google Fonts استفاده می کند. این سایت فقط از یک خانواده فونت استفاده کرده است. بررسی تست عملکرد سایت هم با افزونه WP Rocket و هم در زمانیکه این افزونه غیرفعال بود انجام شد. سپس وب سایت به گونه ای تنظیم شد که از Google Fonts به صورت محلی استفاده کند و دوباره آزمایش فوق با افزونه راکت انجام شد.
توجه: از GTMetrix برای انجام تست عملکرد وب سایت استفاده گردید. از افزونه OMGF WordPress برای میزبانی خودکار Google Fonts استفاده شد.
تصویر(7)
نتایج ارائه Google Fonts از Google CDN در مقابل میزبانی از آنها به صورت محلی
نتایج آزمایش سرعت نشان می دهد که میزبانی Google Fonts به صورت محلی هیچ مزیت عملکردی خاصی ندارد. تقریباً یکسان به نظر می رسند. برای تأیید این نظریه، قبل از آزمایش مجدد، تعداد زیادی فونت دیگر به وب سایت اضافه شد. نتایج زیر تصویر واضح تری را ترسیم می کند.
تصویر(8)
تست سرعت بالا با اضافه کردن تعداد زیادی فونت تکرار شد
با فعال کردن WP Rocket، سرعت لود سایت که از Google CDN استفاده می کند سریعتر شد. در غیر این صورت، هیچ مزایای عملکرد خاصی مانند قبل در اینجا دیده نمی شود. در زیر برخی از صفحه های گزارش تست سرعت که در بالا انجام شده، آورده شده است. به زمان بارگیری فونت ها بین آزمایش های مختلف توجه کنید.
تصویر(9)
Google Fonts از Google CDN و WP Rocket فعال است
در آزمون، پرونده فونت modules.ttf به عنوان یک گروه کنترل عمل می کند و در این مورد در همان سرور وب سایت آزمون میزبانی می شود.
تصویر(10)
Google Fonts میزبانی شده در هاست شما، WP Rocket است
نتایج نشان می دهد که فونت های Google به طور قابل توجهی سریعتر از Google CDN بارگیری می شوند. حتی فونت modules.tff که از هاست بارگذاری می شد در مورد اول نسبت به مورد دوم سریعتر بارگیری می شود. افزودن تعداد زیادی از فونت های Google فقط باعث کاهش عمکلرد سایت می شود.
تصویر(11)
Google Fonts که از Google CDN بارگذاری می شود
تصویر(12)
فونت ها زمانیکه از هاست بارگذاری می شوند
حتی با درخواستهای اضافی HTTP که توسط Google Fonts اضافه شده است، سرعت آنها از Google CDN بسیار سریعتر از زمانی است که به صورت محلی میزبانی می شوند. بنابراین، چه چیزی می تواند این تفاوت را توضیح دهد؟ بخش زیر توضیح مختصری را ارائه می دهد.
چرا فونت های GOOGLE بهتر هستند؟
گوگل در مورد نحوه ارائه فونت برای هر کاربر هوشمندانه عمل می کند. CSS یکسان را به همه تحویل نمی دهد، اما بر اساس دستگاه کاربر، مرورگر و فاکتورهای مختلف تصمیم می گیرد که چه شیوه نامه ای ارائه دهد. به عنوان مثال ، این فونت ها با ویژگی های سنگین مانند WOFF ،Kerning و Hints فقط برای آن دسته از سیستم هایی که آنها را پشتیبانی می کنند، ارائه می شوند. گوگل در همه موارد از استاندارد فشرده سازی WOFF 2.0 استفاده می کند. این فشرده سازی می تواند به کاهش اندازه فونت های تحویل شده کمک کند تا بارگیری آنها با سرعت بیشتری انجام شود. اسکریپت Google Font API بر اساس فاکتورهای مختلف، فونتها را به ازای هر صفحه بارگیری می کند. اگر یک صفحه وب از فونت های مشخص شده استفاده نکند، Google Fonts آن را بارگیری نمی کند. اگر از فونت ها به صورت محلی میزبانی می کنید، فعال کردن این قابلیت دشوار است.
در حالی که کاهش تعداد درخواستهای HTTP راهی عالی برای سرعت بخشیدن به عملکرد وب سایت شما در اکثر موارد است، نتایج آزمایش فوق نشان می دهد که این خاصیت در مورد Google Fonts وجود ندارد. اگر از Google Fonts به صورت محلی میزبانی کنید، زمان بارگذاری واقعی وب سایت شما کاهش می یابد.
Google برای ارائه فونت از بهترین فن آوری ها استفاده می کند. حتی اگر اطلاعات کمی در مورد فونت های وب و نحوه استفاده از آنها داشته باشید، Google Fonts اجرای آنها را در وب سایت شما بسیار آسان می کند، بدون اینکه افت عملکرد قابل توجهی داشته باشد. با ورود فناوری جدید فونت های وب (به عنوان مثال فونت های متغیر، غنی سازی تدریجی فونت، فشرده سازی بهتر)، Google Fonts API بلافاصله آن را به میلیون ها وب سایت منتقل می کند. برای فعال کردن آن لازم نیست کار زیادی انجام دهید.
خلاصه ای از مقاله
به نظر می رسد فونت های میزبانی شده در هاست راهی خوب برای سرعت بخشیدن به وب سایت شما هستند. اما همانطور که در بالا بررسی شد، Google Fonts نه تنها یک مخزن گسترده از فونت های رایگان است، بلکه یک روش هوشمند برای ارائه فونت ها با جدیدترین تکنیک های عملکرد وب است. توضیح داده شد که میزبانی فونت ها در هاست خود کمی پیچیده تر از بارگیری و میزبانی آنها توسط گوگل است. بهینه سازی فونت ها توسط خود شما چندان ساده نیست، مگر اینکه شما دانش فنی و مهارت لازم برای اجرای کامل آن را داشته باشید. خوشبختانه Google Fonts همه این موارد را برای شما مدیریت می کند. در نهایت، هرچه تعداد بیشتری از فونت ها را در وب سایت خود استفاده کنید، بارگیری آن بیشتر طول می کشد.