Подобряване на зареждането на шрифтове с localStorage и WOFF2

В последната си статия (превод) показах метод, по който можете да заредите уеб шрифтове, без да блокирате изобразяването на страници и докато премахвате досадното трептене на текст за потребителите. Този път ще демонстрирам оптимизирана версия на скрипта и ще ви покажа как да свържете WOFF2 за най-новите браузъри.

  1. Потребителите трябва да виждат текста възможно най-бързо.
  2. Докато шрифтът се зарежда, текстът трябва да се изобрази с резервен шрифт, така че потребителите да могат да го виждат и четат.
  3. Избягвайте досадни потребители, като мигате текст при всяко зареждане на страница.
  4. Съвременните браузъри, които поддържат формата WOFF2, трябва да получават файлове в WOFF2, които са с около 30% по-малки.

Как да го направя

  • Зареждането на шрифтове като CSS асинхронно решава проблеми №1 и №2. Но за съжаление причинява трептене при всяко зареждане на страница. Браузърите вече са изобразили текста с резервен шрифт към момента на зареждане на уеб шрифта. Така те заместват текстовете, което причинява трептене.
  • Идеята е да изтеглите шрифта от сървъра само веднъж. След това запазваме данните в localStorage и при следващи заявки ще зареждаме шрифта директно от там. Това ще премахне трептенето при многократно изтегляне, ще остане само при първото отваряне на страницата. Така се решава и задача номер 3.
  • Доста трудно е да разпознаем поддръжката на WOFF2 в браузър, ако не искаме да разчитаме на разпознаване на потребителски агент. Най-доброто, което намерих, беше много внимателен скрипт от Filament Group, който използва API за изтегляне на шрифтове. Това не решава проблема на 100%, но не дава неправилни резултати, което е приемливо в нашия случай.

Преглед на скрипта

  1. За по-старите браузъри ще спрем незабавното зареждане. Проверка на window.addEventListener или някой добре познат потребителски агент (стар браузър за Android, Opera Mini и др.) Ще бъде достатъчен.
  2. Понякога localStorage може да не е налице въпреки поддръжката на браузъра за шрифтове WOFF. В този случай правя резервен резерв.
  3. След това проверяваме дали шрифтът е запазен в localStorage. Ако е така, заредете го веднага.
  4. Ако шрифтът не е бил зареден по-рано, получаваме го със заявка на Ajax. Но преди това проверяваме поддръжката на WOFF2.
  5. След това записваме данните в localStorage и добавяме CSS кода към елемента .