Вміст Маркетинг

Як швидше завантажувати шрифти Adobe (Typekit) за допомогою JavaScript

Оскільки я прагнув покращити продуктивність свого сайту, однією з проблем є завантаження спеціальних шрифтів, які я використовую через Adobe Fonts з Adobe Creative Cloud (також відомий як TypeKit). Якщо ви хочете завантажити шрифти, є кілька способів:

  • Шрифти, безпечні для браузера: Уникаючи використання будь-яких користувацьких шрифтів і замість цього використовуючи типові шрифти, які підтримуються браузером, ви можете значно збільшити швидкість сайту. Хоча це може здатися варіантом, загальна естетика буде жахливою. Це нереалістичний варіант для більшості компаній, оскільки ви обмежені Arial, Helvetica, Times New Roman, Georgia та Courier New.
  • Самостійне розміщення шрифтів: Ви можете придбати ліцензію на шрифти та завантажити їх на свій сервер. Існує також додаткова розробка, яку можна зробити, щоб вони завантажувалися швидше… але, здається, це досить багато роботи.
  • Розміщені шрифти: Більшість веб-дизайнерів використовують розміщені бібліотеки, де можна створити пакет шрифтів і розгорнути код для посилань і відображення їх на своєму сайті за допомогою швидкого фрагмента коду. Двома ключовими гравцями на цьому ринку є Adobe і Google шрифти. Багато CMS платформи включають функціональні можливості для їх включення.

Шрифти Adobe

За допомогою Adobe Fonts ви вибираєте шрифти, які хочете відображати на своєму сайті, а потім створюєте з ними проект. Важливим аспектом тут є завантаження лише тих шрифтів, які ви хочете використовувати на своєму сайті, і не більше… чим більше шрифтів і стилів ви виберете, тим повільнішим буде ваш сайт.

проект Adobe Fonts martech zone

Зверніть увагу, як ідентифікатор проекту (хххххх) використовується в кожному прикладі коду. Якщо ви хочете використати цей код, просто не забудьте замінити ідентифікатор проекту на свій ідентифікатор проекту, інакше він не працюватиме. Як бачите, типовим сценарієм для завантаження шрифтів є:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">

На жаль, Adobe Fonts не пропонує кращого варіанта для завантаження ваших шрифтів... навіть якщо він існує. Наведений нижче застарілий код JavaScript, наданий Adobe, працює швидше, ніж завантаження шрифтів CSS з кількох причин:

  1. Код JavaScript використовує асинхронний завантаження, що означає, що браузер може продовжувати завантажувати сторінку, поки виконується вибірка сценарію. Навпаки, коли ви завантажуєте шрифти через CSS, браузер повинен дочекатися завантаження та аналізу файлу CSS, перш ніж він зможе почати завантаження шрифтів. Це може призвести до затримки завантаження шрифту та сповільнення часу завантаження сторінки.
  2. Код JavaScript використовує Завантажувач веб-шрифтів Typekit, який надає додаткові функції для завантаження шрифтів. Наприклад, веб-завантажувач шрифтів може визначити, чи підтримує браузер @font-face і може уникнути непотрібного завантаження шрифтів у браузерах, які не підтримуються
    @font-face. Він також може забезпечити кращу продуктивність завантаження шрифтів і покращене відтворення шрифтів.
  3. Метод 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 — не надто швидка служба, тому допомога в скороченні часу під час кожного завантаження сторінки може змінити ситуацію!

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.