24 августа 2016

Оптимизация шрифтов сайта

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

Форматы шрифтов

Приведем пример подключения шрифтов на сайте. Шрифт fontello.

"rub";
src: url('../fonts/fontello.eot');
src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontello.woff') format('woff'),
url('../fonts/fontello.woff2') format('woff'2),
url('../fonts/fontello.ttf') format('truetype');
При разборе записи видно несколько форматов: EOT, TTF, WOFF, WOFF2. Что за форма шрифтов?
EOT и TIF Устаревший формат шрифтов, \используются в IE и в андроидах до версии 4.2.
В связи с отказом поддержки Miscrosoft IE ниже 11, то смысл учитывать EOT нет, сейчас IE нормально принимает WOFF и WOFF2.
Формат TIF не особо нужен, по статистики им пользуются 25 % из всех версий Андроида. Наша компания не усматривает их, меняйте телефоны.
Формат WOFF и WOFF2 используются сейчас всеми современными браузерами, потому что они развиваются, вес файла меньше за счет сжатия. Если вскрыть любой шрифт от гуугла, увидим присоединение только формата WOFF2.
Не был учтен формат SVG — устарел, умер.

Оптимизация шрифтов

Получается формат WOFF и WOFF2 лучше за счет сжатия себя, а это уменьшение объемов загрузки страницы. Исключая форматы EOT и TTF мы не навредим никому.
Берем пример шрифта exo. Соберем все форматы шрифта и его стили: regular, light, medium, bold, semibold, italic. Вес папки составляет 4.5 мб. Получается 1 шрифт около 100-150кб. Присутствует даже формат SVG объемом в 300кб.
Разобрать все поэтапно.
EOT и TTF весят около 105 кб.
WOFF весит около 55-60 кб.
SVG свыше 350 кб.
WOFF2 вообще нет.
т.е использования 5 шрифтов создаст колапс загрузку у пользователя. Грузить 2 мб человеку с wi-fi на улице нельзя.

Скорость загрузки страниц

Необходимо сконвертировать шрифты в формат WOFF2. У вас получится объем одного файла 30-35 кб с учетом сжатия шрифта. Самый низкий показатель по сравнению с другими шрифтами.

У нас получилось уменьшение папки до 619 кб и уменьшение файлов в 4 раза. Получился показатель уменьшения в 10 раз. При заходе на сайт, подгрузка шрифта будет занимать не 1-2мб, а всего 100кб или 200кб. не забудьте учитывать того, что шрифт у пользователя есть и установлен на машине локально.

Шрифт Roboto проверяет 2 типа локального шрифта у пользователя, а потом подгружается файл.

'Roboto Condensed';
src: local('Roboto Condensed'), 
local('RobotoCondensed-Regular'), 
url(../wfonts/RobotoCondensed/font.woff2) format('woff2')

Скорость загрузки с гуугл

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

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

Техническая поддержка сайта

Если кому понравилась статья, ставим лайк. Будем писать больше.


Количество показов: