Скоростное обучение или поход на YAC2013

2 октября прошла конференция Yet another Conference 2013 от Яндекса. Было много интересного, но самое яркое впечатление оставил конкурс по ускорению отрисовки страницы.

Задание было забористое, с подковырками. На выполнение около суток. Помимо совершенно очевидных вещей в нём было несколько хорошо спрятанных секретов. Некоторые из них заставили поломать голову в процессе решения задачи, некоторые не отпускали и на следующий день : )

Одно из таких — оптимизация шрифтов.

Клонируем себе проект, открываем папочку со шрифтами и видим там слонов:

Это шрифт PT Sans, который можно скачать бесплатно, например, прямо с сайта производителя: paratype.ru/public/. Там же предлагается вместо скачивания шрифта подключить его через google.com/fonts.

Простейшая оптимизация заключается в отключении неиспользуемого шрифта. В файле подключается 4 шрифта, и один из них не используется (PT Sans Narrow Bold).

А вот дальше начинается самое интересное. На paratype.ru написано, что:

ПТ Санс, ПТ Сериф и ПТ Моно поддерживают обширный список языков Евразии на латинской и кириллической основе. <...>

Важной особенностью шрифтов является поддержка всех официальных и большинства титульных языков народов и народностей РФ, которые приведены ниже.

И ниже список из 54-х языков. Таким образом, просто подключая шрифт как есть, мы за компанию получаем кучу символов, которые врядли нам когда-нибудь потребуются.

И вот теперь самое время воспользоваться google.com/fonts.

Находим там PT Sans, выбираем обычный и жирный шрифт (наклонный в задании не используется), выбираем кириллицу, получаем код и скачиваем файлы по ссылкам, чтобы оценить вес.

На выходе два файла названные абракадаброй и весом 127 и 137кб (против 224 и 238кб). Уже лучше, но и это не предел.

В разделе выбора языков есть ссылка Read more on how to use subsets. На странице по ссылке содержится ценный совет: чтобы использовать только нужный набор символов, его можно задать в URL через параметр text:

http://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Параметр subset в этом случае задавать не нужно.

Результат: PT Sans Bold весит всего 7.6kb. Он используется только в заголовке, и символов для него нужно совсем немного. 7.6 против 238 килобайт!

Аналогично делаем для нежирного начертания, в параметр text вводим все кириллические символы, латиницу и цифры. В итоге получаем файл весом около 15-ти килобайт. 15 вместо 224kb!

Отличный выигрыш в производительности и весе страницы дает этот простой как лом способ, жаль, что я не смогла им воспользоваться на конкурсе.

Если бы шрифта не было на гугле, пришлось бы воспользоваться редактором шрифта, а это уже совсем другая история.

Спасибо Яндексу за интересный конкурс, благодаря ему мы за очень короткое время узнали много нового, не только про шрифты. Надеемся, что будут другие, не менее увлекательные и полезные, и, желательно, не по ночам : )

Ссылки по теме: habrahabr.ru/post/130172/

Видео по теме: отличный ролик про оптимизацию шрифта на белке-шрифтелке. Для конкурса этот способ не подошел, потому что сайт не захотел закачивать PT Sans, аргументируя это просьбой правообладателей. При этом сам шрифт можно свободно скачать с сайта, а вот модифицировать его — нет.