Комментарии 65
единственным аргументом в пользу Google Fonts была быстрая и надёжная сеть доставки контента (CDN) с кэшированием.
Как по мне единственный аргумент это простота подключения. А если попытаться скачать с сайта fonts.google, то там предоставляется только ttf (хотя возможно зависит от ОС с которой качаешь), то есть с woff и woff2 уже надо как-то выкручиться, поэтому за эту ссылку отдельное спасибо
Владельцы сетей серверов как раз решат использовать и будут юзера идентифицироввть.
Есть условный CDN. Есть десяток сайтов которые грузят с него шрифты в общий кэш…
Ускорен будет только процесс загрузки шрифтов из CDN и идентифицировать получится только то, что пользователь ранее загружал с этого CDN. Владельцы конечных сайтов могли бы запрещать общий кэш (им он не нужен, они не CDN) и отследить их будет нельзя (но сами они своего юзера и так узнают, поэтому включать им пользы нет).
Для владельца CDN ничего не поменяется. Или как это должно работать?
Моё понимание проблемы:
шрифты — частный случай загружаемых ресурсов. Картинка — вполне себе ресурс.
Итак, ситуация:
Вы заходите на мой сайт. Я скриптом в невидимой части страницы пытаюсь загрузить и отрисовать некую картинку с порнхаба. Если она загрузилась чересчур быстро — значит, браузер взял её из локального кэша; следовательно, вы были на порнхабе.
1. По-умолчанию включаем схему описанную в статье — раздельный кэш для всех сайтов.
2. Добавляем кастомный HTTP-заголовок разрешающий совместное кэширование.
Разработчики сайтов ничего не меняют. Владельцы CDN добавляют кастомный заголовок.
Таким образом картинки с вашего сайта будут грузиться в отдельный кэш, что не позволит вычислить что вы посещали сайт. Шрифты из CDN будут грузиться из общего кэша, что позволит только узнать что вы раньше загружали эти шрифты…
Я владелец сети сайтов, поднимаю свой CDN или "CDN" (просто сайт с расшаренным для сети ресурсами), включаю общий кэш, юзер заходит на один из моих сайтов и если фонт, картинка или ещё что, скачивается слишком быстро, то понимаю, что он не в первый раз посещает мои сайты. Можно, например, показать ему коммерческую рекламу, а если в первый раз, то рекламу остальных моих сайтов
Пользователь заходит на твой сайт. У тебя стоит трекер, который ставит куки на домен трекера (так работает та же гугл аналитика, например — нет проблемы сделать свой трекер). Всё, ты его узнал и выбираешь какую рекламу показать.
Обновление не защищает от этого.
Проще-то оно проще, но палевно… А тут просто шрифты загрузились.
Загружаем mycdn.local/fonts/tahoma.ttf?random
CDN узнаёт пользователя и связывает random с пользователем, возвращает данные на исходный сервер.
random для удобства, можно без него — браузер отправляет достаточно уникальные заголовки с одного IP-адреса.
«Что можно сделать пользователю, чтобы не скачивать шрифты каждый раз с каждого сайта?
— Отключить загрузку сторонних шрифтов в uBlock Origin.»
Правильный ответ: не страдать фигнёй.
Хотя для начала надо будет ещё найти того пользователя, которого загрузка шрифтов напрягает. (именно пользователя — того, кто смотрит сайт, а не коммерческую компанию, борющуюся за конверсии оптимизацией своего сайта на доли процентов).
Можно пример со шрифтами «из-за ссылки на тормозной внешний сервер страница не догружается минуту, а потом ещё, обрабатывая скрипт, смещает страницу»?
===
Мой тезис: из-за всяких игр с отключением шрифтов, простой домашний пользователь поимеет некоторое количество потенциальных проблем, и не поимеет никакой реальной выгоды. Это как с популярными лет 10-20 назад (может, и сейчас — не слежу) программами «для супер-оптимизации Windows, потому что в MS (идиоты|злонамеренные капиталисты) сделали неоптимальные настройки, (наш супер-оптимизатор|вот эта запись в реестре) ускорит вашу систему на 300%!». Достаточно много случалось в те времена помогать пользователям, которые доприменялись подобных советов по оптимизации и теперь «а чо у меня теперь всё глючит и не работает?».
В целом мне не всегда понятно категорическое нежелание многих веб-дизайнеров использовать стандартные шрифты. Одно дело — благородный замысел сделать красивым и оригинальным определённый сайт с соответствующим профилем. Совсем другое дело — тулить десяток шрифтов с призрачными отличиями в начертании пары глифов по сравнению со стандартными в каждый шаблонный магазин.
Так в итоге, если скачать и установить локально всё 300 МБ гугловских шрифтов, а потом отключить их загрузку через настройки браузера или блокировщика рекламы — с каким шрифтом будет показан сайт? С абстрактным Arial/Verdana? Или всё-таки подхватится нужный гугловский, раз он есть в системе?
такой вариант больше не работает из-за изменений @font-face. Если сайт использует Google Fonts, шрифты всё равно будут загружаться каждый раз заново. Локальная установка не поможет.
Теперь не поможет, так как секции local(<Имя шрифта>) теперь при подключении css шрифтов нет
Но правда, на практике это всё равно не всегда будет работать, поскольку имя шрифта в системе иногда может неочевидно трансформироваться. Например, шрифт Somefont начертание Medium может восприниматься Виндой как «Somefont Medium», а начертание Regular.
Во-первых, разбиение по unicode-диапазонам — это позволяет загружать только те куски, которые реально использованы на странице. Был довольно длинный период, когда это поддерживал только Хром — он получал свою версию CSS, все остальные свою.
Во-вторых, хинтинг. Не секрет, что браузеры рендерят шрифты по разному. Подобрать универсальные настройки конвертера на условном FontSquirrel практически невозможно — где-то будет выглядеть нормально, а где-то хуже. А вот GF может держать несколько по-разному оптимизированных версий одного и того же шрифта.
Сейчас вся эта машинерия тоже менее актуальна, но в прежние времена (IE, старая Опера, старый ФФ и пр.) — очень выручала.
Вот тоже хотел добавить — google fonts умеет это делать оптимально. Unicode-ranges для различных языков очень позитивно сказываются на скорости загрузки. Одно дело грузить 300-400 KiB на каждое начертание или срезать все не латинские\кириллические символы. И совсем другое дело автоматически подгружать нужный subset символов по 15 KiB.
Благо есть готовые утилиты под это дело и можно сделать всё это локально. Или с google fonts и взять. Но если нужно поддерживать старые браузеры, то вариативность этого дела может сильно огорчить.
Загружаю ttf, получаю woff и woff2, и при этом если выбрать Custom Subsetting можно указать только нужные символы.
Вес — сверхлёгкий, качество — не знаю, не эксперт.
Веб-шрифты не нужны, это зло. Они замедляют показ страницы, так как текст не отображается до загрузки огромного, тяжелого шрифта. Зачем их использовать и замедлять сайт, я понять не могу. Наверно, разработчики сайтов неквалифицированные и не понимают последствия использования веб-шрифтов.
В самых популярных ОС вроде Windows достаточное количество качественных встроенных шрифтов, можно выбирать из них. Чем Roboto или Open Sans лучше, чем Arial или Calibri, я не понимаю. Для непрофессионала в мелком размере они вообще все выглядят одинаково. Вдобавок, встроенные шрифты в Windows оптимизированы под пиксельную сетку и выглядят в среднем лучше, чем "размытые" веб-шрифты без оптимизаций.
Про кроссплатформенность можно не думать, пока 90% пользуются windows. Указываем стандартный шрифт Windows, получаем быстрый сайт. Для других платформ можно либо указать шрифт-альтернативу, либо на худой конец веб-шрифт.
Есть конечно проблема, что на мобильных может не быть нужных шрифтов. Ну что же, для них тогда можно указать веб-шрифт — пусть у них страница медленно грузится. Хотя я бы лучше указал шрифт-альтернативу вроде "sans".
Как-то вы очень смело обошли стороной Android, который вообще-то популярнее чем Windows (55% по данным liveinternet)
Почему пользователи Android должны подстраиваться под Windows?
Ну вон статистика 55% — андроид трафик. Речь не о первичности и вторичности, а о количестве людей, которым упрощаем жизнь. Ну и если нужна поддержка Гугл, то куда проще её получить на встраивание или пакетирование его щрифтов, а не из Windows
P.S. Не дождётесь, пока основным UI остаётся GUI
Идите уж до конца. Зачем останавливаться на шрифтах. Нафиг CSS, и так в браузере нормальные стили по умолчанию. Чем модные кнопки лучше, чем подчёркнутые синие ссылки. (Помнится, за это Артемий Лебедев топил, что ссылка должны быть только такой, но последнее время, что-то он поутих на эту тему.)
Edge: вероятно, в ближайшее время
Opera: вероятно, в ближайшее время
Brave: вероятно, в ближайшее время
Vivaldi: вероятно, в ближайшее время
Очень вероятно, поскольку все chrome based
А все почему, что какие то озабоченные в Евросоюзе решили, что надо пользователей предупреждать, что их действия могут отследить злые рекламщики. Нет, настроек в браузере недостаточно, режима инкогнито недостаточно, шапочка из фольги не греет голову.
Теперь вот доказана теоретическая возможность замерить скорость загрузки шрифтов, все, шпион спалился, коварный империализм торжествует и теперь даже в игкогнито режиме я вижу рекламу месяц назад купленного холодильника. Есть новый повод усложнить жизнь 99% балбесам которых все это вообще никак не интересует.
Это какая то нафиг дурацкая забота о шпионах, которые не знают где отключить в браузере куки и кэш. Эту проблему надо обязательно переложить на сайтосоздателей и пользователей которым абсолютно до лампочки, будет ли в рекламе показываться купленный неделю назад холодильник или в конце концов стиральная машинка.
А в u8g2 нет такого?
Достаточно наивно было бы ожидать шрифта 19 — с русскими буквами — который не используется в панелях. Тем не менее, посмотрел u8g2 — спасибо — но не нашел требуемого.
Собственно, он мне для русификации БИОС нужен. В дефолтных глифах edk2 только английский 8х19. Проблема в том, что и в (известных мне) TTF шрифтах нет требуемых пропорций 8х19. Если бы были — все элементарно: выводим на экран алфавит на TTF требуемого размера, скриншотим, парсим BMP участками 8х19 и вуаля (если забыть об авторском праве). Я так делал со шрифтом 8x16, но получается визуально, прямо скажем, не очень: шрифт нормальный, но эти три лишних (точнее, недостающих) пикселя в строке очень заметны.
Понятно. Вот тут я еще искал шрифты однажды: https://int10h.org/oldschool-pc-fonts/fontlist/font?ast_premiumexec Кириллицы там мало, но что-то подходящее точно можно найти
Ну кстати для тех же PWA не так уж критично — сервис воркер это всё кеширует и в итоге файлы не грузятся (во второй и далее разы) даже с родного хостинга, не то что с серверов гугла.
О шрифтах и кешировании
Теперь шрифты Google Fonts больше не кэшируются!
Шрифты как кешировались так и кешируются. Вероятно Вы хотели сказать сказать, что
Изменилась механика идентификация любого ресурса в кеше, а не только шрифтов.
Сильно упрощая — теперь кеш проекта A это только кеш проекта A, вне зависимости от того что в нем лежит. И ни один другой проект не может ничего получить из этого кеша. Раньше кеш был общим для всех.
Возможность эта была чрезвычайно полезной в то время, когда люди получали доступ к сети благодаря модемам 14400, то есть каждый лишний килобайт был причиной продолжительного ожидания.
С тех пор, как ситуация с доступом изменилась, издержки на соединение с хостом стали намного значимей, чем лишние загруженные килобайты. Именно потому, как Вы верно заметили, уже очень давно, в среде оптимизаторов, существует базовая рекомендация:
все ресурсы которые нужны вашему проекту должны загружаться от туда, куда пришел запрос
Разбор прочих несуразностей материала
О local
Но в последнее время Google удалила фунцию local() из @font-face в Google Fonts! То есть шрифты Google Fonts теперь не могут считываться локально, если использовать API.
Убран он был абсолютно правильно и убран был по простой причине — шрифт загружаемый извне, далеко не всегда бывает ровно тем, что лежит у пользователя локально.
Сейчас стало далеко не редкостью ситуация, когда локально можно обнаружить и Material Icons в трех версиях и Roboto и Noto, версии которых безнадежно устарели, но браузер то этого не знает. Он послушно берет локальную копию и отображает кашу на экране, которую, в рамках Google Fonts никак нельзя проконтролировать.
О справочнике Марио Ранфтль
Марио Ранфтль создал очень полезный справочник google-webfonts-helper.
Этот справочник не делает НИЧЕГО кроме того, что уже делает тот же Google Fonts. И по возможностям отличается разве что интерфейсом. При этом обладая ровно теми же проблемами что и оригинал. Первая из которых — список предлагаемого не отвечает действительности и просто является точной копией того что показывает сам Google Fonts.
Между тем Google Fonts это намного больше чем то что там отображено. Например вы до сих пор не найдете там Material Icons который там есть в 5 вариантах. И так далее и тому подобное.
О оптимизации
Это делается через подсказку preload.
Я немножко вас старше, а потому имею маломальские основания вам советовать. Никогда не подписывайтесь под документом смысла которого вы не понимаете.
Худшее что сейчас можно сделать при оптимизации проекта, это влепить неконтролируемый preload шрифтов на стадии загрузки проекта. Как впрочем и любого другого ресурса.
Вообще забудьте навсегда о существовании таких вещей как async defer pereload preconect
Если они Вам помогают, значит у проекта серьезные архитектурные проблемы. И решать их при помощи этих волшебных механизмов это тоже самое что использование подорожника для лечение гемороя.
О причинах изменения спецификации
Однако в последнее время появились идеи, как его эксплуатировать во вред людям.
Эти идеи появились и использовались ровно с того момента, как появилась спецификация на кеш. Люди работавшие над спецификацией, не были патологическими идиотами. И суть самой идеи, как раз и лежит в общем кеше. Google оттягивал свой конец так долго как мог.
Основная проблема подобных решений заключается в том, что сейчас существуют десятки других возможностей проделать тоже самое. И убивать ради закрытия одной из них, механизм, который обладал крайне полезными качествами в областях далеко за рамками загрузки шрифтов, это предел непродуманности.
Оказалось, что по отклику браузера можно определить
Никого в рамках этой задачи не волнует отклик браузера. Какое то чудо в перьях не подумав ляпнуло, все стали тиражировать.
А волнует тут прежде всего возможность благодаря отсутствию запроса вообще однозначным 100% образом идентифицировать поведение пользователя в рамках подконтрольных злоумышленнику ресурсов.
Например: я Цукер Маркенберг. И у меня есть ну очень популярный сайт МордоКнига. Поскольку я не просто Цукер, но еще и денег хочу, я начинаю монетизировать трафик подсовывая людям рекламу. В том числе и перед выборами. Эффективность моей работы напрямую зависит от того, что я знаю о поведении посетителя. Но вот незадача, отовсюду полезли разного рода припоны подобной идентификации. Как мне быть? Ведь это же несправедливо, когда я в рамках своей мордокниги не могу просто так выяснить такие мелочи. В результате мне приходит в голову решение, когда я каждому посетителю на его мордокнигу, кладу картинку 0x0 пикселей. Только название картинки является хешем, с закодированной информацией. Дальше, уже дело техники сверить при посещении чувствительного к статистике ресурса, логи запросов таких изображений, с логами посетителей. И однозначным образом идентифицировать каждого из них.
В сильно упрощенной схеме это работает именно так. А не мифические замеры скорсоти ответа. Тем более что латенси может возникать по десятками причин, совсем не связанным с кешем.
Что делать
Печально, что из-за приватности приходится жертвовать производительностью и делать лишние сетевые запросы.
Не писать чепухи, а подтянуть свой уровень в этой области. Уже давно проблемы производительности в том числе с загрузкой шрифтов, решаются иными способами. Слава богу браузеры давно дали нам в распоряжение массу механизмов, о которых ранее мы могли только мечтать. Из которых возможность контролирования любого сетевого запроса на уровне woirkera первейший механизм с которым я рекомендую ознакомиться.
Возможность эта была чрезвычайно полезной в то время, когда люди получали доступ к сети благодаря модемам 14400, то есть каждый лишний килобайт был причиной продолжительного ожидания.»
Если бы шрифты загружались всегда асинхронно, то их изобилие возможно и не влияло бы на время загрузки страницы. К сожалению, это обычно не так — загрузка шрифта на многих страницах тормозит остальные загрузки, довольно заметно, к примеру — 0,7 с. Гугл раздаёт шрифты всем желающим бесплатно, но он не обещал делать это мгновенно. В результате на странице сайта безымянным веб-дизайнером накорябаны 1,5 символа прямо незаменимым шрифтом, загрузка которого тормозит отображение страницы на 0,7 с (мои 0,7 с!), и он там далеко не один. Хорошо, если не забыли указать преконнект днс.
Кстати, отрисовывать страницы pdf и ms документов бесплатно Гугл стал тоже очень медленно.
До свидания, Google Fonts. Последний аргумент