Сегодня 20 сентября, пятница ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7275
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
Хабрахабр: Web-разработка / Блог / Захабренные
Хабрахабр: Web-разработка / Блог / Захабренные
Голосов: 1
Адрес блога: http://habrahabr.ru/blog/webdev/
Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL
 

[Перевод] Производительность фронтенда. Часть 3 — оптимизация шрифтов

2013-10-13 21:44:24 (читать в оригинале)

От переводчика: Это восьмая статья из цикла о Node.js от команды Mozilla Identity, которая занимается проектом Persona.

Предыдущие статьи:
  1. "Охотимся за утечками памяти в Node.js"
  2. "Нагружаем Node под завязку"
  3. "Храним сессии на клиенте, чтобы упростить масштабирование приложения"
  4. "Производительность фронтэнда. Часть 1 — конкатенация, компрессия, кэширование"
  5. "Пишем сервер, который не падает под нагрузкой"
  6. "Производительность фронтэнда. Часть 2 — кешируем динамический контент с помощью etagify"
  7. "Приручаем конфигурации веб-приложений с помощью node-convict"





Мы смогли уменьшить объем шрифтов для Persona на 85%, с 300 до 45 килобайт, используя подмножества шрифтов. Эта статья рассказывает о том, как именно мы это сделали, и какие мы использовали инструменты.

Представляем connect-fonts


Connect-fonts — это middleware для Connect, которое улучшает производительность @font-face, раздавая клиентам подобранные специально для их языка подмножества шрифтов, уменьшая тем самым их размер. Connect-fonts также генерирует специфические для локали и браузера стили @font-face и CORS-заголовки для Firefox и IE9+. Для раздачи подмножеств шрифтов создаются так называемые font packs — поддиректории с подмножествами шрифтов плюс простой конфигурационный файл JSON. Некоторые наборы распространённых open source-шрифтов доступны в готовом виде в пакете npm, впрочем, создавать свои пакеты совсем нетрудно.

Если вы не слишком хорошо ориентируетесь в работе со шрифтами в интернете, мы собрали небольшую коллекцию ссылок по теме @font-face. [От переводчика: а на Хабре очень кстати статья, посвящённая производительности веб-шрифтов]
Читать дальше →

Тэги: @font-face, connect-fonts, holiday, mozilla, node.js, persona, season, блог, веб-разработка, веб-шрифты, компании, нордавинд, подмножества, шрифтов

 


Самый-самый блог
Блогер Рыбалка
Рыбалка
по среднему баллу (5.00) в категории «Спорт»


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.