Як швидше завантажувати шрифти Adobe (Typekit) за допомогою JavaScript
Оскільки я прагнув покращити продуктивність свого сайту, однією з проблем є завантаження спеціальних шрифтів, які я використовую через Adobe Fonts з Adobe Creative Cloud (також відомий як TypeKit). Якщо ви хочете завантажити шрифти, є кілька способів:
- Шрифти, безпечні для браузера: Уникаючи використання будь-яких користувацьких шрифтів і замість цього використовуючи типові шрифти, які підтримуються браузером, ви можете значно збільшити швидкість сайту. Хоча це може здатися варіантом, загальна естетика буде жахливою. Це нереалістичний варіант для більшості компаній, оскільки ви обмежені Arial, Helvetica, Times New Roman, Georgia та Courier New.
- Самостійне розміщення шрифтів: Ви можете придбати ліцензію на шрифти та завантажити їх на свій сервер. Існує також додаткова розробка, яку можна зробити, щоб вони завантажувалися швидше… але, здається, це досить багато роботи.
- Розміщені шрифти: Більшість веб-дизайнерів використовують розміщені бібліотеки, де можна створити пакет шрифтів і розгорнути код для посилань і відображення їх на своєму сайті за допомогою швидкого фрагмента коду. Двома ключовими гравцями на цьому ринку є Adobe і Google шрифти. Багато CMS платформи включають функціональні можливості для їх включення.
Шрифти Adobe
За допомогою Adobe Fonts ви вибираєте шрифти, які хочете відображати на своєму сайті, а потім створюєте з ними проект. Важливим аспектом тут є завантаження лише тих шрифтів, які ви хочете використовувати на своєму сайті, і не більше… чим більше шрифтів і стилів ви виберете, тим повільнішим буде ваш сайт.
Зверніть увагу, як ідентифікатор проекту (хххххх) використовується в кожному прикладі коду. Якщо ви хочете використати цей код, просто не забудьте замінити ідентифікатор проекту на свій ідентифікатор проекту, інакше він не працюватиме. Як бачите, типовим сценарієм для завантаження шрифтів є:
<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">
На жаль, Adobe Fonts не пропонує кращого варіанта для завантаження ваших шрифтів... навіть якщо він існує. Наведений нижче застарілий код JavaScript, наданий Adobe, працює швидше, ніж завантаження шрифтів CSS з кількох причин:
- Код JavaScript використовує асинхронний завантаження, що означає, що браузер може продовжувати завантажувати сторінку, поки виконується вибірка сценарію. Навпаки, коли ви завантажуєте шрифти через CSS, браузер повинен дочекатися завантаження та аналізу файлу CSS, перш ніж він зможе почати завантаження шрифтів. Це може призвести до затримки завантаження шрифту та сповільнення часу завантаження сторінки.
- Код JavaScript використовує Завантажувач веб-шрифтів Typekit, який надає додаткові функції для завантаження шрифтів. Наприклад, веб-завантажувач шрифтів може визначити, чи підтримує браузер
@font-face
і може уникнути непотрібного завантаження шрифтів у браузерах, які не підтримуються@font-face
. Він також може забезпечити кращу продуктивність завантаження шрифтів і покращене відтворення шрифтів. - Метод CSS вимагає додаткового HTTP запит на отримання файлу CSS, тоді як код JavaScript є самодостатнім і не потребує додаткових файлів бути принесеним. Це може призвести до трохи швидшого часу завантаження коду JavaScript.
Загалом використання цього застарілого методу JavaScript для завантаження шрифтів Typekit може призвести до швидшого та надійнішого завантаження шрифтів, ніж використання методу CSS.
<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
Якщо ви використовуєте сайт WordPress, ви також можете оновити файл functions.php, щоб завантажити свій проект:
add_action( 'wp_head', 'theme_typekit_inline' );
function theme_typekit() {
wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxx.js', '', false);
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );
function theme_typekit_inline() {
if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<?php }
}
Кожна дрібниця має значення, коли ви намагаєтеся покращити швидкість свого сайту. Adobe Fonts — не надто швидка служба, тому допомога в скороченні часу під час кожного завантаження сторінки може змінити ситуацію!