От автора: недавно я имел честь поучаствовать в качестве приглашенного эксперта в работе Рабочей группы W3C по веб-шрифтам. Ранее группа отвечала за предоставление нам стандартов форматов шрифтов WOFF и WOFF2, и ее устав был расширен для работы над чем-то новым: решение проблемы производительности при загрузке шрифтов на сайт. Это действительно важная задача, особенно в связи с появлением переменных шрифтов. Я сейчас объясню, о чем пойдет речь, но сначала немного истории.
Преимущество и недостаток
Производительность загрузки всегда была препятствием для принятия — или, по крайней мере, яблоком раздора — в отношении использования веб-шрифтов на сайтах на западных языках, даже с размерами файлов шрифтов 20-50КБ. На арабском и некоторых азиатских сайтах часто приходится отказываться от использования веб-шрифтов вообще, поскольку файлы могут иметь размер 2,5 МБ для арабского шрифта и до 16 МБ или более для стандартного китайского / японского / корейского (или CJK) из-за сложности и количества символов в наборах символов.
В течение ряда лет Monotype, Adobe и Google имели возможность динамически подбирать файлы шрифтов для каждой страницы. Это позволяет им обслуживать файлы шрифтов только с глифами, необходимыми для отображения данной страницы. К сожалению, из-за некоторых технических ограничений эти решения использовались только для CJK и некоторых других незападных шрифтов. Google экспериментировал и с другими решениями, в том числе разрешением запросам шрифтов включать подмножества диапазонов, но у них есть свои проблемы с размерами диапазонов и потерями функций OpenType в подмножествах.
Основная задача
В прошлом году в TYPO Labs в Берлине состоялось заседание рабочей группы W3C CSS, на котором обсуждались, в частности, новые стандарты и спецификации для поддержки переменных шрифтов. В ходе обсуждения рассматривались вопросы сотрудничества Adobe, Apple, Google, Monotype и Mozilla с W3C с целью разработки лучшего, более универсального решения для обслуживания веб-шрифтов, особенно очень крупных, которое будет лучше работать, а также станет более устойчивым и пригодным для повторного использования. Ряд других разработчиков шрифтов и поставщиков программного обеспечения также вносят свой вклад — это действительно всеобъемлющее сотрудничество.
Упрощенно это можно описать, как что-то вроде «потоковой передачи шрифтов», но на самом деле это не решит проблему: пользователи все равно будут постоянно загружать файлы шрифтов целиком, даже если им потребуется лишь небольшая часть для отображения одной или двух страниц, которые они могут просматривать на данном сайте. Проблема с существующими решениями подмножеств заключается в том, что либо подмножество вводится при каждом просмотре страницы, либо решение требует собственного ресурса сервера, что значительно снижает полезность подмножества при одновременном повышении сложности и требований к ресурсам на сервере.
Идеальное решение сочетало бы преимущества обоих этих подходов: адаптировать запрос шрифта к тому, что необходимо для данной страницы, и добавить к исходному ресурсу шрифта при последующих запросах контента, тем самым обеспечивая прогрессивное улучшение файла шрифта. Adobe уже некоторое время делает что-то подобное с собственной пользовательской реализацией, которая показывает, что можно сохранить кэшируемость улучшенного шрифта и значительно повышает жизнеспособность использования веб-шрифтов с очень большими наборами символов, такими как арабский и CJK. Вот что мы пытаемся сделать.
(И, честно говоря, когда я говорю «мы», я на самом деле имею в виду всех удивительно умных инженеров, участвующих во всех вовлеченных организациях)
Это все во имя
Концепция, которую мы пытаемся воплотить в жизнь, уже окрестили «прогрессивное улучшение шрифтов» — и по этому вы можете понять, что в рабочей группе нет ребят из маркетинга. Но это точно описывает то, что, как мы считаем, должно выполнять решение: предоставить возможность для загрузки только необходимой части шрифта на любой странице, а для последующих запросов этого шрифта динамически «корректировать» исходную загрузку дополнительными наборами глифов в соответствии с требованиями для последовательных просмотров страниц, даже если они происходят на отдельных сайтах.
Несмотря на то, что ряд идей все еще исследуется, команда Google создала демонстрацию, которая достаточно хорошо иллюстрирует концепцию и потенциал. В группе мы вносили предложения, и это, вероятно, продолжится, но, поскольку за последние несколько недель уже было проведено несколько мероприятий, мы почувствовали, что пришло время представить немного больше контекста вместе со ссылкой на саму демонстрацию.
Концепция, доказанная
Команда Google Fonts разместила здесь демо-версию, и она общедоступна. Существует множество вариантов, которые оцениваются и исследуются, поэтому я подумал, что было бы неплохо немного аннотировать интерфейс, чтобы вы могли увидеть, чего мы хотим достичь.
Ниже вы можете увидеть интерфейс, каким вы, вероятно, найдете его (по крайней мере, как он выглядит сегодня, 24 апреля 2019 года). Доступно краткое пояснение, некоторые параметры для настройки, место для предоставления некоторого текста, а затем вывод, показывающий, сколько информации о шрифтах обслуживается и отображается. Теперь давайте рассмотрим процесс.
Пользовательский интерфейс для настройки конфигурации и добавления образца текстового содержимого
Для целей этой демонстрации я установил следующие параметры:
Playfair Display из выпадающего шрифта
Brotli Shared Dictionary (качество 9)
FontTools — для подмножества
Yes — для Retaining Glyph IDs
Я выбрал шрифт, который мне нравится, выбрал один из наиболее многообещающих форматов патчей, выбрал подмножество, которое, похоже, прекрасно работает с сохранением идентификаторов глифов (что, по-видимому, дает полезную комбинацию результатов). Наконец, я добавил абзац текста.
Спасибо, текст
Пример вывода, показывающий переданные данные шрифта и образец текста
Когда я нажимаю кнопку «Добавить текст», мы видим итоговое сравнение полученных данных шрифта и демонстрационный текст, представленный ниже. На гистограммах верхняя строка представляет текущий файл шрифта, который в данный момент обслуживается. Строка, которая нас больше всего интересует, это подмножество «файла патча» в 3-й строке. В этом случае он показывает, что полный файл составляет 18,1 КБ, а установленный патч — только 8,5 КБ. Это менее половины полного файла, и общая экономия на больших файлах шрифтов может быть еще более существенной.
Теперь мы можем добавить больше текста и посмотреть, каким будет улучшаемая передача.
Еще один пример текста
Я очистил текстовую область и вставил другой абзац текста, и еще раз нажал кнопку «Добавить текст».
Отображение улучшаемой передачи дополнительных данных шрифта
Теперь это становится интересным
Пример загрузки нескольких дополнительных патчей
Вот где все становится очень интересно. Добавление еще одного абзаца текста вызывает загрузку дополнительного патча размером всего 1 Кб! Я пробовал различные варианты, и даже добавление еще трех длинных абзацев привело к загрузке всего 3,7 КБ, а затем еще 1,7 КБ. Хотя еще явно очень рано что-то обещать, но то, куда мы движемся, является обнадеживающим. Я надеюсь, что вскоре мы увидим обновленную демонстрацию, которая также будет включать в переменный шрифт для тестирования.
На данный момент единственные примеры, которые я могу показать — это шрифты западного языка. Где это будет давать действительно блестящий результат, так это для таких языков, как китайский, японский, арабский, вьетнамский и другие, более сложные, с гораздо большим набором глифов. Подумайте о возможности уменьшить шрифт размером 20 МБ до подмножества в несколько сотен КБ или менее, особенно при последующих загрузках страницы. Это будет существенная разница.
Объедините эту функцию с переменными шрифтами, и комбинация может быть просто революционной для возможностей разработки сайтов, использующих эти языки. После многих лет обещаний, связанных с ограничениями производительности, это будет не что иное, как революция. Как только мы это сможем сделать.
Оставайтесь в курсе! Существует огромная поддержка со стороны множества организаций, в которых супер-талантливые инженеры и дизайнеры сосредоточились на этой задаче. Я уверен, что удивительные вещи появятся уже очень скоро. Как только будет определена возможность создать форум для обсуждения от акаунта W3C на Github, я обязательно сообщу вам об этом. Веб предназначен для нас, для всех нас. Ваш вклад будет очень нужен, и он приветствуется!
Автор: Jason Pamental
Источник: https://rwt.io
Редакция: Команда webformyself.