Font swap что это за программа
Стоит ли хранить Google Fonts на своём сервере?
В последние несколько недель, по стечению обстоятельств на работе и в сторонних проектах, я узнал много о веб-шрифтах, а также много нового о Google Fonts в частности. Благодаря этому я могу дать более развернутый ответ на вопрос, который в прошлом мне казался простым: стоит ли вам хранить Google Fonts на своём сервере?
Говоря объективно, признаю, шрифты — не моя сильная сторона. Я предпочитаю более практичный подход и не зацикливаюсь на дизайне (посмотрите на этот сайт и убедитесь, что так и есть) и прежде не чувствовал необходимости в использовании нестандартных шрифтов. Конечно, они выглядят немного приятнее и «брендируют» текст. Но для основного текста толку в них мало. Я никогда не оценивал статью (или иначе относился к её содержанию), только потому что для её подачи использовался красивый шрифт. Тем не менее, мне было полностью понятно негативное влияние дополнительных шрифтов на производительность и скорость загрузки страницы, так что, возможно, из-за этого я предвзят.
Тем не менее, многие со мной могут не согласится, да и шрифты, важны они лично для меня или нет, регулярно используются многими другими разработчиками, и часто у них просто нет выбора. Давайте посмотрим, что можно сделать, чтобы и в скорости сайта не потерять, и дизайнеров довольными оставить.
Self-Hosted vs Внешние ресурсы
Несколько лет назад считалось нормой использовать CDN для подключения общих ресурсов (например, jQuery с code.jquery.com — и да, им до сих пор очень даже пользуются). Чтобы внести ясность, под CDN здесь я имею в виду загрузку ресурсов с чужого домена, а не ваш собственный CDN.
Причиной было то, что браузеры якобы ограничивали количество соединений с каждым доменом (обычно до 6 соединений), поэтому использование другого домена давало вам ещё 6 соединений. Это могло быть правдой в прошлом (особенно когда ограничение было
CSS font display: будущее рендера шрифтов в вебе
Дата публикации: 2017-10-30
От автора: если шрифт отсутствует на мобильном устройстве, его необходимо скачать. Это один из минусов веб-шрифтов. Пока шрифт не станет доступным, браузеру нужно решить, как отобразить блок текста с этим шрифтом. И сделать это нужно так, чтобы смена шрифтов несильно повлияла на UX и восприятие производительности.
Со временем браузеры приняли различные стратегии, дабы минимизировать эту проблему. Но эти стратегии работают по-разному, и разработчики совсем не контролируют процесс. Разработчикам приходилось разрабатывать различные техники и обходные решения для этих проблем.
Встречайте дескриптор font display CSS для правила @font-face. Это CSS свойство представляет стандартизированный подход к данному поведению и позволяет разработчикам контролировать процесс.
Использование font-display
Прежде чем подробно разобрать различные функции font-display, давайте быстро взглянем, как использовать его в CSS. Прежде всего, font-display не является свойством CSS. Как было сказано в начале, это дескриптор правила @font-face. (пример):
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В этом коде я задаю значение swap для шрифта Saira Condensed. Все возможные значения: auto, block, swap, fallback, optional
Значение по умолчанию для font-display – auto.
В следующих разделах я подробно разберу все эти значения. Но сначала давайте обсудим временной период, с помощью которого браузер рендерит шрифт. В разборе значений я объясню различные аспекты таймлайна, а также как они ведут себя с каждым значением.
Таймлайн font-display
В основе этой функции лежит концепция таймлайна font-display. Время загрузки шрифта, которое начинается от его запроса и кончается либо успешной загрузкой, либо провалом, можно разделить на три последовательных периода, которые говорят браузеру, как рендерить текст. Три периода:
Блочный период. В этом периоде браузер рендерит текст невидимым фолбек шрифтом. Если запрошенный шрифт загружается, текст перерисовывается с этим шрифтом. Невидимый фолбек шрифт ведет себя, как пустой плейсхолдер для текста. Таким образом, минимизируются сдвиги макета при повторном рендеринге.
Период подмены: если необходимый шрифт еще не доступен, используется фолбек шрифт. Только в этот раз текст уже отображается. Шрифт будет задействован, как только он подгрузится.
Период отказа: если шрифт так и не стал доступным, браузер не ждет его, и текст отображается с фолбек шрифтом, пока страница не будет закрыта. Однако это не значит, что загрузка шрифта была прервана. Браузер может продолжить загрузку, и шрифт будет готов к отображению при посещении других страниц.
Настройка продолжительности таких периодов позволяет конфигурировать кастомную стратегию рендера текста. В частности, эти значения можно установить в 0 или в бесконечность, что я покажу в следующих разделах.
Тем не менее, разработчики не могут явно устанавливать эти задержки. Такую возможность рассматривали в спецификации на раннем этапе, но позже от нее отказались. Вместо этого, как было сказано в предыдущем разделе, у нас есть набор значений из ключевых слов, который покрывает большую часть случаев использования.
Давайте рассмотрим, как все эти значения управляют загрузкой и отображением шрифтов.
font-display: auto
После короткого блокового периода это значение увеличивает период подмены до бесконечности (в спецификации рекомендуют 3 секунды). В таком случае период отказа отсутствует.
Браузер короткое время ждет шрифт и рендерит текст невидимым шрифтом. Далее если шрифт не доступен, фолбек шрифт становится видимым. Как только завершается загрузка запрошенного шрифта, браузер повторно рендерит текст.
Описанное поведение показано в видео ниже, где используется простая тестовая страница со специальным шрифтом в заголовке:
В начале загрузки страницы заголовок невидим, но он присутствует в DOM. Примерно через 3 секунды если шрифт все еще не доступен, текста становится видимым с фолбек шрифтом. В демо видео я имитирую слабое соединение с помощью панели разработчика Chrome. Как только шрифт загружается, заголовок повторно рендерится.
font-display: swap
С этим значением блоковый период сжимается до 0, а период подмены достигает бесконечности. Здесь также отсутствует период отказа. Другими словами, браузер не ждет шрифт и сразу рендерит текст с фолбек шрифтом. Как только шрифт загружается, текст рендерится заново. Давайте проверим:
font-display: fallback
Это первое значение, в котором есть период отказа. После очень короткого блокового периода (рекомендуется 100ms) наступает короткий период подмены (рекомендуется 3s). Если к концу этого времени шрифт все еще не готов, текст будет отображаться с фолбек шрифтом на все время посещения страницы. Посетителей не раздражают сдвиги в макете, которые могут снизить UX. В первом видео ниже шрифт загружается после более чем 6 секунд, поэтому он никогда не будет применен:
В следующем видео шрифт загружается быстрее до таймаута, поэтому шрифт используется, как ожидалось:
font-display: optional
Когда я впервые прочитал спецификацию, я не очень понял имена, присвоенные стратегиям отображения шрифтов. Даже в самой спецификации это отмечается. В следующих версиях предлагают использовать имена, которые лучше иллюстрируют способ использования стратегии. Предлагаются следующие альтернативы:
requires для block
important для swap
preferable для fallback
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Значение optional, скорее всего, не будет меняться. Оно и так отлично описывает поведение. С этим значением шрифт считается необязательным для рендера страницы, что говорит браузеру: «если шрифт уже доступен, используй его. Если нет, не так важно, используй фолбек шрифт. Шрифт может загрузиться к посещению будущих страниц».
С этим значением таймлайн имеет короткий блоковый период (рекомендуется 100ms) и нулевой период подмены. Таким образом, после блокового периода сразу наступает период отказа. Если шрифт не доступен, он не будет использоваться на этой странице. Шрифт может загружаться в фоновом режиме, и будет немедленно отрендерен при посещении будущих страниц.
Должен отметить, что на плохом соединении браузер может прекратить или даже не начать загрузку шрифта. Это происходит, чтобы не влиять на качество сетевого подключения. Сайтом можно пользоваться, однако шрифт не будет сразу доступен при посещении следующих страниц.
В видео ниже тестовая страница загружается без имитации плохого соединения. Шрифт загружается быстро, но только после короткого блокового периода. Поэтому текст отображается с фолбек шрифтом на все время работы со страницей.
В следующем видео страница перезагружается с теми же настройками сети, но в этот раз включен кэш для имитации второго посещения:
И вот оно, теперь заголовок рендерится с ожидаемым шрифтом. Прежде чем продолжим, заметьте, что для блокового периода со значениями fallback и optional рекомендуется очень небольшая задержка в 100ms. Это позволяет кратковременно отображать быстро загруженный шрифт (или шрифт из кэша), прежде чем использовать фолбек шрифт. Таким образом, избегается эффект «мигания нестилизованного текста» или VYN/
Мне самому интересно, почему при font-display: swap блоковый период сжимается до 0, а не использует тот же короткий интервал, как для optional. Оказывается, в GitHub репозитории спецификации открыт баг, где сказано, что swap должен использовать небольшую задержку, как и остальные значения.
О фолбек шрифте
Выше я несколько раз упомянул фолбек шрифт. Но откуда он берется? Фолбек шрифт – первый доступный для представления шрифт в стеке шрифтов, который задается с помощью свойства font-family на элементе. Например, на тестовой странице значение font-family для заголовка:
Font swap что это за программа
Краткое описание:
Создать файл подкачки без ROOT.
Описание:
Создать файл подкачки без ROOT.
С помощью этого приложения вы сможете создать файл SWAP на вашем устройстве.
Требуется Android: 5.0 и выше
Русский интерфейс: Да
Скачать:
Версия: 3.1.11
SWAP No ROOT v3.1.11.apk ( 4.28 МБ )SWAP No ROOT v3.1.11 Rus by DenSE No Ads.apk ( 4.39 МБ )
SWAP No ROOT v3.1.10.apk ( 4.28 МБ )SWAP No ROOT v3.1.10 Rus by DenSE No Ads.apk ( 4.39 МБ )SWAP No ROOT v3.1.6.apk ( 3.71 МБ )
SWAP No ROOT 3.1.1 Rus by DenSE No Ads.apk ( 3.67 МБ )SWAP No ROOT 3.1.1.apk ( 3.55 МБ )SWAP No ROOT v3.0.1.apk ( 4.24 МБ )
BigBobson, значит метода без рут не существует. Ибо свап должен быть корневым, а он здесь идёт через sdcard/android/data/.
Если бы это так работало. Так что,смысла в ней ноль. Приложение не может сама загрузить процессы из озу в этот файл.
Она у меня не в качестве съёмного носителя активирована.
🔠 Разгоняем Google Fonts
furry.cat
Главным источником контента в вебе по-прежнему остается текст, значит разработчики должны уделять большое внимание его отображению на сайте. Сейчас многие проблемы веб-шрифтов остались в прошлом, и все силы брошены на увеличение их производительности и скорости рендеринга. Браузеры стандартизировали стратегии загрузки FOUT/FOIT, а новая спецификация font-display позволяет управлять ими.
Self-hosted vs Google Fonts
Самым быстрым вариантом остается хранение файлов шрифтов вместе с файлами самого сайта (self-hosted fonts).
Тем не менее многие разработчики предпочитают использовать Google Fonts для работы с веб-шрифтами – почему?
Действительно, удобство этого сервиса переоценить невозможно. Он предоставляет минимально необходимые настройки (а значит маленькие файлы) с учетом конкретных браузеров и платформ пользователей. Поддерживаются стратегии загрузки шрифта с помощью свойства font-display (параметр &display=swap в URL). К тому же это огромная библиотека шрифтов со свободным доступом.
Поэтому мы не спешим отказываться от Google Fonts, но можно ли улучшить их – и без того высокую – производительность?
Как разогнать Google Fonts?
font-display: swap – это уже огромный шаг вперед в деле производительности, но что, если мы можем сделать еще больше?
Harry Roberts, основатель csswizardry, решил поставить эксперимент и сравнить разные способы загрузки Google Fonts. В качестве плацдарма для испытаний выступили его сайты – harry.is и домашняя страница csswizardry.com.
Harry проверил 5 техник:
Каждая техника является аддитивной – включает в себя все предыдущие и вносит некоторые новые улучшения. Нет смысла пробовать, например, preload сам по себе, ведь комбинация в любом случае будет работать лучше.
Тестирование
Для каждого теста Harry измерял 5 показателей:
Все тесты были проведены с использованием приватного экземпляра WebPageTest на Samsung Galaxy S4 через 3G соеднинение. К сожалению, на момент тестирования сервис был недоступен, поэтому у нас нет публичных ссылок с результатами.
По старинке
Для первого теста Harry отбросил этот параметр, чтобы получить подходящую базу для сравнения.
Сниппет подключения шрифтов:
Здесь есть два ключевых момента:
Это одно синхронное действие поверх другого – очень плохое сочетание для производительности веб-страницы.
Результаты теста без font-display
Эти результаты можно принять за исходную точку.
На обоих сайтах файл Google Fonts был единственным блокирующим рендеринг ресурсом, поэтому показатель First Paint (FP) у них одинаковый.
Lighthouse выдал одну ошибку и одно предупреждение:
Первая ошибка вызвана отсутствием стратегии загрузки шрифтов (например, правила font-display). Второе предупреждение связано с синхронной загрузкой CSS-файла Google Fonts.
Отсюда начинаем двигаться дальше и вносить прогрессивные изменения.
font-display: swap
Теперь Harry вернул обратно параметр &display=swap. По сути это делает загрузку шрифтов асинхронной – браузер отображает резервный шрифт, так что пользователи не сталкиваются с мельканием невидимого текста (FOIT).
Эта стратегия становится еще лучше, если вы подберете подходящий резервный шрифт – в идеале он должен быть похожим на окончательный вариант. Ведь резкая смена Times New Roman на Open Sans вряд ли намного лучше FOIT. К счастью, есть удобный инструмент для подбора fallback-шрифтов: Font Style Matcher.
Сниппет подключения шрифтов:
Результаты теста с font-display: swap
Блокирующие рендеринг ресурсы никуда не делись, поэтому улучшений показателя First Paint (FP) ожидать не приходится. На самом деле он даже немного просел на CSS Wizardry. Однако сразу бросается в глаза резкое улучшение First Contentful Paint (FCP) – больше чем на секунду на harry.is. При этом время загрузки первого веб-шрифта (FWF) в одном случае немного улучшилось, а в другом – наоборот. Показатель Visually Complete (VS) увеличился на 200 мс.
Lighthouse теперь выдает только одно предупреждение:
Это ожидаемо, так как веб-шрифт по-прежнему определяется внутри синхронного CSS-файла. После того, как мы добились определенных улучшений, глупо останавливаться – давайте сделаем всю цепочку запросов асинхронной!
Асинхронный CSS
Асинхронная загрузка CSS-файла – это ключевой момент в улучшении производительности. Существует несколько способов этого добиться, но самый простой – это, пожалуй, трюк с media=»print» от Filament Group.
Атрибут media=»print» указывает браузеру, что файл стилей предназначен только для печати, поэтому его загрузка не должна блокировать рендеринг. Однако сразу после загрузки значение атрибута меняется на all – и стили применяются к самой странице.
Сниппет подключения шрифтов:
Этот трюк ужасно прост, но у него есть свои минусы.
Дело в том, что обычная синхронная таблица стилей блокирует рендеринг страницы, поэтому браузер назначает ей наивысший приоритет (Highest) при загрузке. А вот стилям для печати – самый низкий (Idle).
Таким образом наш асинхронный файл получает сильно заниженный приоритет загрузки (хотя приоритет скорее следует назвать правильным, но он в любом случае гораздо ниже, чем мы ожидаем).
Для примера возьмем сайт Vitamix с асинхронной загрузкой CSS файла:
Хотя Chrome может выполнять асинхронные DNS/TCP/TLS-запросы, при более медленных соединениях все некритичные запросы будут останавливаться
Браузер делает именно то, что мы ему сказали: запрашивает CSS-файлы с приоритетом стилей для печати. При 3G-соединении загрузка занимает более 9 секунд! Практически все остальные ресурсы грузятся раньше. Значит правильный шрифт появится только через 12,8 секунд после начала загрузки страницы!
Однако для обычных стилей подобные задержки неприемлемы. В том числе для стилей ниже первого экрана, ведь за 10 секунд пользователь почти наверняка прокрутит страницу.
Итак, что же с нашим тестом?
Результаты теста с асинхронной загрузкой CSS-файла
Улучшение показателей First Paint и First Contentful Paint просто ошеломляюще по сравнению с предыдущими тестами. Оценка Lighthouse достигла 100 баллов.
Если говорить о критическом пути рендеринга, то это большая победа оптимизации.
Однако – и это важно – из-за хака с атрибутом media на CSS Wizardry просело время загрузки первого веб-шрифта (FWF).
Итак, асинхронный CSS – это хорошая идея, но нужно как-то решить проблему снижения приоритета.
preload
Нам нужен асинхронный запрос с высоким приоритетом – обратимся к предварительной загрузке ( preload ), которая уже неплохо поддерживается практически во всех современных браузерах. Объединим ее с отлично поддерживаемым print-хаком и получим лучшее от обеих техник, одновременно обеспечив фоллбэк.
Сниппет подключения шрифтов:
Результаты теста с предварительной загрузкой CSS-файла (preload)
Показатели First Paint и First Contentful Paint почти не изменились, однако время загрузки первого веб-шрифта (FWF) на CSS Wizardry уменьшилось на 600 мс!
Показатели Harry.is остались прежними. Это можно объяснить тем, что на простой и маленькой странице нет большой конкуренции между сетевыми запросами и таблица стилей для печати и без увеличения приоритета грузилась достаточно быстро.
Что касается CSS Wizardry, то ухудшение времени First Paint на 200 мс больше похоже на аномалию, так как изменение приоритета асинхронного CSS файла не должно было оказать влияния на рендеринг. Остальные же показатели существенно улучшились.
preconnect
Последняя проблема, которую нужно решить на пути к идеальной производительности, заключается в том, что CSS-файл мы получаем с одного домена (fonts.googleapis.com), а файлы шрифтов лежат на другом (fonts.gstatic.com). В сочетании с плохой связью это может привести к большим задержкам.
Google Fonts использует HTTP-заголовок для установки предварительного соединения с доменом fonts.gstatic.com:
Однако выполнение этого заголовка связано с TTFB (Time to First Byte, время до первого байта) ответа, которое может быть очень большим. Среднее значение TTFB, включая очередь запросов, DNS, TCP, TLS и серверное время, для CSS-файла Google Fonts во всех тестах составило 1406 мс. При этом среднее время загрузки самого CSS-файла – около 9,5 мс – в 148 раз меньше!
Иначе говоря, несмотря на то, что Goggle пытается установить предварительное соединение с доменом fonts.gstatic.com, это дает лишь около 10 мс форы. Этот файл привязан к задержке, а не к пропускной способности.
Реализация предварительного подключения со стороны сайта может принести гораздо большие выгоды.
Сниппет подключения шрифтов:
Мы можем визуализировать эти изменения на WebpPageTest:
Результаты теста с предварительным подключением к домену fonts.gstatic.com
Показатели First Paint и First Contentful Paint не изменились – preconnect влияет только на ресурсы, загружаемые после критического пути.
Зато время загрузки первого веб-шрифта (FWF) и показатель визуальной завершенности (VC) существенно уменьшились!
Оценки Lighthouse тоже хороши – 99 и 100.
Бонус: font-display: optional
Этот параметр ограничивает время, в течение которого резервный шрифт может быть заменен на основной. Таким образом, если ваш веб-шрифт грузится слишком долго, то он просто не будет использован. Это позволит избежать эффекта FOUT, что обеспечивает лучший пользовательский опыт при взаимодействии с сайтом и хороший показатель Cumulative Layout Shift (сдвиг макета).
Однако эта техника плохо сочетается с асинхронной загрузкой CSS.
Когда значение атрибута media изменяется с print на all, браузер обновляет CSSOM и применяет его к DOM. В этот момент страница узнает, что ей нужны некоторые веб-шрифты, и начинается чрезвычайно малый период блокировки с мельканием невидимого текста (FOIT) на половине загрузки страницы. Еще хуже, если браузер заменит невидимый текст снова резервным, так что пользователь даже не получит преимуществ нового шрифта. В общем, это очень похоже на баг.
Выглядит это примерно вот так:
А вот видео, демонстрирующее проблему в DevTools:
Не следует использовать font-display: optional в сочетании с асинхронной загрузкой CSS-файлов. В целом лучше иметь неблокирующий CSS с FOUT, чем ненужный FOIT.
Сравнения и визуализации
На этих замедленный видео хорошо видна разница между разными техниками загрузки Google Fonts.
Таким образом, техника с preconnect оказалась самой быстрой.
Находки
Хотя self-hosted шрифты, кажется, остаются самым лучшим решением всех проблем производительности и доступности, Google Fonts имеет свои преимущества. К тому же мы можем со своей стороны улучшить работу этого сервиса.
Комбинация техник асинхронной загрузки CSS и шрифтов, предварительной загрузки файлов и преконнекта с доменом статики позволяет выиграть несколько секунд!
Если вы подключаете на странице другие блокирующие рендеринг ресурсы или нарушаете принципы быстрого CSS, то ваши показатели могут существенно отличаться от тестовых.
Особенно полезны будут эти оптимизации в проектах, в которых Google Fonts является одним из самых узких мест в обеспечении производительности.
Сниппет асинхронной загрузки Google Fonts
В этом фрагменте код содержится сразу несколько разных техник, но он все еще достаточно компактный и поддерживаемый: