[Перевод] Производительность фронтенда. Часть 3 — оптимизация шрифтов
От переводчика: Это восьмая статья из цикла о Node.js от команды Mozilla Identity, которая занимается проектом Persona. Предыдущие статьи: «Охотимся за утечками памяти в Node.js»
«Нагружаем Node под завязку»
«Храним сессии на клиенте, чтобы упростить масштабирование приложения»
«Производительность фронтэнда. Часть 1 — конкатенация, компрессия, кэширование»
«Пишем сервер, который не падает под нагрузкой»
«Производительность фронтэнда. Часть 2 — кешируем динамический контент с помощью etagify»
«Приручаем конфигурации веб-приложений с помощью node-convict»
Мы смогли уменьшить объем шрифтов для Persona на 85%, с 300 до 45 килобайт, используя подмножества шрифтов. Эта статья рассказывает о том, как именно мы это сделали, и какие мы использовали инструменты.Представляем connect-fontsConnect-fonts — это middleware для Connect, которое улучшает производительность @font-face, раздавая клиентам подобранные специально для их языка подмножества шрифтов, уменьшая тем самым их размер. Connect-fonts также генерирует специфические для локали и браузера стили @font-face и CORS-заголовки для Firefox и IE9+. Для раздачи подмножеств шрифтов создаются так называемые font packs — поддиректории с подмножествами шрифтов плюс простой конфигурационный файл JSON. Некоторые наборы распространённых open source-шрифтов доступны в готовом виде в пакете npm, впрочем, создавать свои пакеты совсем нетрудно.
Если вы не слишком хорошо ориентируетесь в работе со шрифтами в интернете, мы собрали небольшую коллекцию ссылок по теме @font-face. [От переводчика:, а на Хабре очень кстати статья, посвящённая производительности веб-шрифтов]Читать дальше →
