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

    Wednesday، ۱۳ Esfand ۱۳۹۹

    به طور کلی پیش بارگیری یا pre load چیست؟

    ما پیش بارگیری را با جزئیات در این پست ارائه خواهیم کرد .

    به طور پیش فرض ، مرورگرها بر اساس ترتیب اعلام شده در HTML موجود درسایت شما تصمیم می گیرند که چگونه این منابع را بارگیری کنند.

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

    چرا پیش بارگذاری قلم مهم است؟

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

    اساساً ، با رفتار پیش فرض ، یک مرورگر منتظر می ماند تا پرونده قلم را بارگیری کند تا اینکه پس از آن "نقاشی" محتوای قابل مشاهده را روی صفحه کاربر آغاز می کند. در واقع ، مرورگر تنبل است که پرونده های قلم را بارگیری می کند به طوری که فقط هنگامی که مرورگر می داند که به قلم نیاز است ، بارگیری یک قلم خاص را شروع می کند (می داند که قلم مورد نیاز است زیرا از قبل برای "رنگ آمیزی" متن به آن نیاز دارد صفحه نمایش) با این حال ، این روش بارگیری تنبل می تواند منجر به شرایطی شود که مرورگر آماده شروع به نمایش متن است ، اما چون هنوز فونت را بارگیری نکرده است ، مرورگر باید نقاشی متن را به تأخیر بیندازد تا قلم را بارگیری کند. FOIT یا Flash of Invisible Texl نامیده می شود یا همچنین می تواند منجر به FOUT یا Flash متنی از سبک نشده شود.

    FOIT – متن بارگیری نمی شود تا زمانی که پرونده قلم بارگیری شود. FOUT – متن قابل مشاهده است ، اما با استفاده از قلم سیستم. پس از بارگیری پرونده قلم ، متن به سبک قلم جدید تغییر حالت می دهد ، که می تواند تجربه نامطلوبی برای بازدید کنندگان شما ایجاد کند زیرا متن "پرش" و "تغییر شکل" می دهد.

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

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

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

    نحوه بارگیری فونت ها در وردپرس

    در حالی که برخی از پلاگین ها وجود دارد که می تواند به شما کمک کند انواع خاصی از قلم ها را از قبل بارگیری کنید (مانند Google Fonts) ، روش دستی بارگیری فونت ها شامل افزودن برخی از کدها به بخش <head> سایت وردپرس شماست.

    شما چند گزینه برای درج کد در بخش <head> سایت وردپرس خود دارید.

    شما میتوانید:

    · از یک افزونه رایگان استفاده کنید.

    خود کدی که استفاده خواهید کرد به شرح زیر است:

    <link rel = "preload href =" fonts / cicle_fina-webfont.woff2 "as =" font "type =" font / woff2 "crossorigin =" ناشناس>

    Rel – این به مرورگر می گوید که فایل قلم را از قبل بارگیری کند.

    Href – این پیوند به پرونده قلم واقعی است. شما باید آن را ویرایش کنید تا قلم مورد نظر برای بارگیری مجدد را منعکس کند.

    As – این به مرورگر می گوید که در حال بارگیری مجدد یک فایل قلم است.

    Type – این نوع پرونده قلم را مشخص می کند. اگر می خواهید نوع پرونده دیگری را از قبل بارگیری کنید ، باید آن را تغییر دهید.

    Crossorigin – این مورد برای برآوردن یک جابجایی پیش بارگذاری فونت لازم است ، که در بخشهای بعدی بیشتر به آن اشاره می کنم.

    بهترین روشهای بارگیری و بهینه سازی قلم

    · تعداد قلم ها و قالب هایی را که بارگیری می کنید را محدود کنید.

    · اگر از چند قلم استفاده می کنید ، بارگیری مجدد هر قلم که در هر قالب استفاده می کنید وسوسه انگیز است.

    با این حال ، استفاده از پیش بارگذاری فونت با معاملات عملیاتی مواجه است.

    با پیش بارگیری ، اساساً شما مرورگرها را مجبور می کنید که درخواست اولویت بالایی را برای URL فونت درخواست کنند یا نکنند. اگر قلم های غیرضروری را بارگیری کنید ، مرورگر بازدید کننده را از بارگیری بقیه سایت خود بی جهت به تأخیر می اندازید.

    برای ایجاد تعادل در این مبادلات ، باید تعداد قلم هایی را که بارگیری می کنید ، فقط به مواردی که برای بارگیری اولیه صفحه کاملاً ضروری هستند محدود کنید (یعنی آن قلم هایی که بیش از حد لازم هستند).

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

    علاوه بر این ، می خواهید قالب هایی را که بارگیری می کنید نیز محدود کنید. به عنوان مثال ، فقط قالب عادی را از قبل بارگیری کنید ، اما نه قالب های ایتالیک یا پررنگ.

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

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

    اطمینان حاصل کنید که قلم هایی که بارگیری می کنید با CSS شما مطابقت دارد

    اگر قلم ها را از سرویس CDN خارجی بارگیری می کنید (مانند Google Fonts یا Adobe Fonts) ، مراقب باشید که پرونده هایی که از قبل بارگیری می کنید با قلم های درخواست شده در CSS شما مطابقت داشته باشد. قلم موجود در CDN ممکن است به روز شده باشد ، که می تواند منجر به وضعیتی شود که در پایان شما نسخه دیگری از قلم را از آنچه در CSS خود فراخوانی می شود ، بارگیری مجدد کنید ، این می تواند به یک وضعیت غیربهینه منجر شود که در آن بازدیدکنندگان را مجبور به بارگیری دو نسخه از همان قلم کنید.

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

    اطمینان حاصل کنید که از ویژگی crossorigin استفاده می کنید

    هنگام بارگیری مجدد قلم ها ، تعیین ویژگی crossorigin مهم است حتی اگر واکشی از مبدا متقابل نباشد. این را می توانید در مثال کد قبلی مشاهده کنید:

    <link rel = "preload" href = "fonts / cicle_fina-webfont.woff2" as = "font" type = "font / woff2" crossorigin = "anonymous">

    امروز با بارگیری پیش فرض وردپرس شروع کنید

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

    · برای بارگیری یک قلم ، باید برخی از کدها را به بخش <head> سایت خود اضافه کنید.

    اگرچه بارگیری قلم می تواند عملکرد سایت شما را بهبود بخشد ، شما می خواهید:

    · قلم ها و قالب هایی را که بارگیری می کنید فقط به قلم های ضروری بالاتر از حد مجاز محدود کنید.

    · اگر از CDN قلم مانند Google Fonts استفاده می کنید مطمئن شوید که قلم های شما با CSS مطابقت دارد.

    · همیشه ویژگی crossorigin را مشخص کنید تا از پرونده های قلم دو بارگیری نکنید.