Асинхронная загрузка Typekit ::стоит ли оно того или лучше вообще не использовать?

Question

Пытаюсь сократить время загрузки страницы.

Я последовал третьему примеру, изложенному здесь для асинхронной загрузки JavaScript TypeKit.

Чтобы это заработало, вам нужно добавить .wf-loading #some-element {visibility: hidden;} для каждого элемента, использующего этот шрифт, и после 1) его загрузки или 2) по истечении заданного времени (1 секунда) шрифт становится видимым.

Дело в том, что в CSS, с которым я работаю, шрифт назначен примерно 200 элементам, то есть 200 элементам .wf-loading{ } (примечание:Я не писал этот CSS).

Я считаю, что это замедлит время загрузки больше, чем просто регулярная загрузка, поскольку DOM проходит через такое большое количество вещей.В этом случае я просто откажусь от Typekit и перейду к обычному шрифту.

Есть ли какие-нибудь инструменты, которые я могу использовать для запуска тестов производительности такого рода?Или кто-нибудь проверял эти вещи?

Answer 1

При таком подходе вы фактически не изменяете более одного элемента DOM (корня).Это означает, что наши современные браузеры будут полагаться на свои супер быстрые движки CSS, поэтому количество задействованных элементов не окажет заметного влияния на загрузку страницы.

Что касается загрузки и мерцания страницы, задержка в сети обычно на порядок хуже, чем при манипуляциях с DOM.При самой первой (незаштрихованной) загрузке страницы всегда будет мерцание, пока браузер ожидает загрузки шрифта.Просто убедитесь, что ваш шрифт кэшируется для повторного использования, и постарайтесь сделать размер его файла как можно меньшим.

Я пошел по этому пути несколько лет назад с Cufon.В итоге я выбрал самый простой путь с приемлемой производительностью и на этом остановился.Легко увлечься оптимизацией загрузки страниц, но, вероятно, есть более многообещающие области для улучшения — функции, ошибки, рефакторинг и т. д.

Answer 2

Проблема в том, как они упоминают в блог, редкие случаи (но это определенно случается - для меня, конечно, не раз), когда CDN Typekit полностью выходит из строя, и пользователи видят просто пустую страницу.Это тот случай, когда вам захочется использовать асинхронную загрузку.