Content Marketing

Как да заредите Adobe Fonts (Typekit) по-бързо с JavaScript

Тъй като се стремях да подобря ефективността на моя сайт, една област, която ме притеснява, е зареждането на персонализираните шрифтове, които използвам чрез Adobe Fonts от Adobe Creative Cloud (известен също като TypeKit). Ако искате да заредите шрифтове, има няколко начина:

  • Безопасни за браузъра шрифтове: Като избягвате използването на персонализирани шрифтове и вместо това използвате шрифтовете по подразбиране, поддържани от браузъра, можете драстично да увеличите скоростта на сайта. Въпреки че това може да изглежда като опция, цялостната естетика би била ужасна. Това не е реалистичен вариант за повечето компании, тъй като сте ограничени до Arial, Helvetica, Times New Roman, Georgia и Courier New.
  • Шрифтове за самостоятелно хостване: Можете да закупите лиценз за шрифтовете и да ги заредите на вашия сървър. Има и допълнителна разработка, която може да се направи, за да се зареждат по-бързо... но изглежда като доста малко работа.
  • Хоствани шрифтове: Повечето уеб дизайнери използват хоствани библиотеки, където можете да изградите пакет от шрифтове и да внедрите код, за да ги препращате и показвате на вашия сайт с бърз кодов фрагмент. Двамата ключови играчи на този пазар са Adobe и Google Fonts. Много CMS платформите включват функционалността за включване на тези.

Adobe шрифтове

С Adobe Fonts вие избирате шрифтовете, които искате да показвате на вашия сайт, и след това създавате проект с тях. Един критичен аспект тук е да заредите само шрифтовете, които искате да използвате във вашия сайт и не повече... колкото повече шрифтове и стилове изберете, толкова по-бавен ще бъде вашият сайт.

проект на Adobe Fonts martech zone

Обърнете внимание как ID на проекта (XXXXXX) се използва във всеки от примерите за код. Ако искате да използвате този код, просто не забравяйте да замените ИД на проекта с вашия ИД на проекта или в противен случай няма да работи. Както можете да видите, скриптът по подразбиране, предоставен за зареждане на шрифтовете, е:

<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 е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.