All streams
Search
Write a publication
Pull to refresh
1
1
Павел @Axenic

User

Send message

Аанализатор использования кода в хромиуме предназначен больше для отладки и перфоманс аналитики. А наш сервис поможет легко, просто, машинально, рутинно и последовательно вычищать неиспользуемый JavaScript. Просто тестируйте сайт, если что-то сломалось в консоль об этом появится маяк (строчка текста вида "QSU_462"). Находите этот маяк в коде проекта и раскомменируйте код рядом с ним. Потом продолжаете тестирование и так по кругу.

В итоге пришёл к тому, что нужен оптимизирующий компилятор

Такие инструменты, как правило имеют высокий порог входа и используются в каких-нибудь крупных корпорациях, где объёмы кода проекта настолько огромны, что такие средства - производственная необходимость.

Наш сервис может освоить и студент только изучающий JavaScript. И применять его можно рутино, без предварительной подготовки. А конечный эффект будет лучше, чем от компилятора. Так как удаление кода ещё и сокращает его объём, что ускоряет чтение кода.

Последние лет 5 или больше даже не задумывался над такой проблеммой.

Проблема замусоренного JavaScript кода ситуативная, нежели повсеместная. Чем более проект легаси, тем больше в нём мусорного кода. Особенно от этого страдают компании, чей профиль не связан с IT (ритейл, производство). Им программисты достаются по остаточному принципу и текучка специалистов достаточно высокая. Код быстро замусоривается.

Если удалишь что-то используемое - то Typescript тут же ругнется.

В том то и дело что сервис помогает быстро вернуть то, что удалил и маякует об это в консоли браузера. Преимущество в том, что восстановление зря удалённых кусков кода происходит машинально, без погружения в код. Просто увидел маяк, нашёл его в коде, раскоментировал. И так сотню раз.

Если конечно вы стандартные import/export юзаете. Вы же их юзаете?

Там используется стандартный хромиум браузер. Страницы открываются в нём и JavaScript код исполняется в нём. И браузер возвращает информацию, какие куски кода отработали, а какие нет.

Verdana есть только на виндовс. На андройд и iOS его нет. Более того, вы не можете установить его на свой сайт для пользователей других ОС без лицензии. То есть, Verdana - платный шрифт (если лицензия ещё продаётся).

Serif - это не шрифт, а семейство шрифтов.

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

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

Просто при генерации файла перечислите нужный алфавит. Сервис для каждого файла составит параметр `unicode-range`. Если на странице присутствуют символы, перечисленные в `unicode-range`, то загрузится именно этот `@font-face`. Вот как этот выглядит для русского языка и всех знаков препинания.

@font-face {
    font-family: 'roboto-regular';
    font-style: normal;
    font-weight: 400;
    src: url('roboto-regular-russian.woff2') format('woff2'),
        url('roboto-regular-russian.woff') format('woff'),
        url('roboto-regular-russian.ttf') format('truetype');
    unicode-range: U+21-23,U+25-40,U+5B-5F,U+7B-7E,U+AB,U+BB,U+401,U+410-44F,U+451,U+2013,U+2014,U+2018,U+2019,U+201C-201E,U+2026,U+20BD;
}

Да, наблюдались кое какие проблемы. Но сейчас всё работает. Вы можете писать о таких проблемах в техподдержку.

Спасибо, что обратили внимание. Поправил.

Верно. Но остаётся следующий вопрос, зачем гугл добавляет непонятные глифы "ӹ, Ӂ, Ӑ" в файл по такому url с хешем? Вот версия ссылки с убранным текстом после хеша. Откуда там символы Ў, Ӭ и т.д.?

Так же не понятно, почему при удалении символа хеша генерируется файл на 4.6КБ где остаются буквально несколько символов? Вот идетичная ссылка с удалённым хеш символом. Куда 150+ символов подевалось? Скорее всего дело в том, что я как-то не правильно кодирую символы в параметре URL. То есть, тут требуется поплясать пол денёчка-денёчек с бубном, чтобы разобраться.

И даже если я сгенерирую верный URL, то гугл CDN всё равно проигрывает по ряду факторов:

  1. Как вы подтверждали, потребуется дополнительное время на установление 2 соединений с CDN серверами гугла.

  2. Запросов будет на 1 больше. Так как CSS код подключения шрифта всегда добавляется в сквозной CSS файл сайта вида common.css, main.css или template.css. А при использовании гугла потребуется загружать код CSS подключения шрифтов отдельным запросом.

  3. Тонкая настройка у гугла попросту сложная. Выполнимая, но сложная. Заказчик/работодатель врят ли заплатят за 8-12 человеко часов за настройку шрифтов от гугл. Скажут, есть задачи поважнее. А вот заплатить за часик работы, чтобы оптимизировать шрифты в нашем сервисе - легко. То есть, конечная стоимость внедрения при использовании технологий от гугла - кошмарная.

  4. Гугл сервис явно имеет баги и работает нестабильно. Примеры я предоставил.

Интересное API, не знал о нём. Но, видимо они его немного недоработали. Я нашёл баг.

Вот файл для русскоязычных символов генерируемым гуглом. В нём указан вот такой woff2 файл. Любопытно, что оптимизированный под определённый набор символов файл гугл шрифта весит 11.4КБ, а аналогичный в нашем сервисе весит 15.1КБ.

Я стал разбираться, как так, и проанализировал оба файла в https://fontdrop.info/. Оказалось, что гугл просто удалил часть запрашиваемых глифов из своего файла напрмиер ₽"#%&'()*+,-./ и т.д. Но при этом добавил ӹ, Ӂ, Ӑ и т.д.

Вот какой шрифт сгенерировало API CDN сервиса гугла.
Вот какой шрифт сгенерировало API CDN сервиса гугла.
Вот символы знаков препинания в нашем шрифте.
Вот символы знаков препинания в нашем шрифте.
А вот что гугл выдал. "Забыл" несколько десятков глифов.
А вот что гугл выдал. "Забыл" несколько десятков глифов.

Я было подумал, что это из-за хеша в URL. И попробовал вот такую ссылку, убрав только хеш символ. И мне выдали вот такой файл шрифта весом 4.6КБ, который содержит только буквы кириллицы. Во общем, как-то странно это функция работает, проще и надёжней сгенерировать шрифты самому. К тому же, 99.9% пользователей не знает о существовании этой фичи и поэтому наверняка её не используют. То есть, сложность использование этой фичи и тот факт, что о ней крайне сложно узнать - серьёзнейшие отсекающие факторы. Сгенерировать и загрузить шрифт, используя наш сервис, может любой джун. А вот с гуглом, как вы убедились выше, надо с бубном плясать даже опытному специалисту.

Что касается предоставления разных форматов в зависимости от браузера, то тут тоже баг есть. Открывал шрифт Roboto Mono с UserAgent современного бразера и с UserAgent Internet Expore 10. Действительно, во втором случае мне предоставили формат файлов woff вместо woff2. Один нюанс, что там был только один набор символов, вместо 6. Файл woff для IE 10 весит 15.3КБ и в нём отсутствует кириллица.

В целом, я отношусь к гуглу, как к создателям бесплатных, качественных плагинов для WordPress. Да, ребята молодцы, старались, сделали приятную вещь, но чтобы соответствовать стандартам отрасли надо допиливать задачу самому.

Для скачивания доступен именно крупный файл в формате ttf со всеми глифами. Да и большинство платных шрифтов именно в таком формате в архиве лежат. То есть, мы прям скачали с fonts.google.com архив со шрифтом, взяли и загрузили в сервис файл "Roboto-Regular.ttf", а затем оптимизировали. То есть, в этом абзаце говориться именно о том, что скачиваемые шрифты обязательны к оптимизации.

Чуть ниже, есть вторая таблица, где сравниваются оптимизированные шрифты с CDN сервисом гугла. И выигрыш опять же в пользу первых.

Не потому ли, что в этом случае разницы практически не будет (для Roboto: 15.4Кб латиница, 9.4Кб кириллица, и т.д.)?

Можно добавить сноску/оговорку/лирическое отступление, чтобы акцентировать внимание читателя, что мы именно про скачиваемые шрифты говорим. Это сделает текст честнее, но раздует объём статьи, уведёт внимание читателя от основной темы и снизит мотивацию специалиста заниматься проблемой оптимизации шрифтов. К тому же, вычитывание статьи и исправление таких деталей может занять столько же времени, сколько написание самой статьи. Лучше потратить это время и силы на написание следующей статьи.

С другой - такая оптимизация походит на суету на ровном месте

Добавление шрифтов - работа всего на пол часика - часик. И можно выиграть от 0.1 до 0.2 секунд при загрузке страницы. Что крайне приятно.

Если сравнивать выигрыш с объемом голой страницы, то вроде как он есть. Но я вот слабо представляю юзера, который будет интерактивничать с макетом, где не видны картинки.

На компьютере с быстрым интернетом, пользователь действительно предпочтёт подождать ещё 0.2-0.4 секунды пока не загрузятся картинки. Но, если интернет медленный, как например на мобильных устройствах, где до появления картинок может иногда пройти 3-5 секунды, то пользователь старается себя чем-то занять в это время. Например начинает читать названия товаров, изучать и сравнивать цены, может даже сразу начать фильтровать товары.

Учитывая, что пользователь принимает решение о том, остаться на странице или уйти за 15 секунд, то за счёт оптимизации шрифтов вы выигрываете дополнительно 1 секунду. То есть, логика такая: после клика по ссылке в поисковой системе пользователь за 15 секунд решает, останется ли он на сайте. Если страница грузится 5 секунд, то на изучение контента остаётся 10 секунд. Но если страница грузится за 4 секунды, то пользователь поизучает ассортимент сайта уже 11 секунд. А там, глядишь, глаз за что-то зацепится, и он останется на сайте.

Ну, замечу, что именно шрифтов (font-family) в хорошей типографической верстке рекомендуется два - один для текста, другой для заголовков.

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

Ещё хочется обратить внимание на такую вещь: для веб дизайна шрифты с засечками по сути не нужны. Шрифт с засечками нужен для того, чтобы при чтение не путать строку. Вы наверняка замечали, как при чтении книги легко потерять строку и начать читать не следующую строку, а эту же или через одну. В книгах применяют шрифты с засечками, чтобы читатель реже терял строку. В веб дизайне это проблема решается увеличением междустрочного интервала (интерлиньяж). В книге увеличить междустрочный интервал нельзя, так как тогда на странице будет помещаться меньше текста и возрастут затраты на бумагу.

При этом шрифты с засечками замедляют скорость чтения на 10-30%. Переводя на язык веба это означает, что пользователь будет медленней изучать содержимое страницы. Значит за отведённое время посмотрит меньше товаров, прочитает меньше статей/новостей.

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

Рядовой разработчик, не имеющий экспертизы в этом узком вопросе, накосячит почти наверняка.

Именно для этого в своём интерфейсе мы прям перечислили все символы. Например, для русского языка это 118 символов. Чтобы управлять набором символов достаточно просто отредактировать 1 поле формы.

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

Ну или можно попросить производителей браузеров сделать это.

Вообще, нужна какая-нибудь организация, объединяющая разработчиков сайтов, чтобы такие прикладные инициативы продвигать. Существующие организации вроде w3c занимаются больше стандартизацией.

Урезать знаковый состав нужно о-очень осторожно.

Тут нет ничего срашного. Удалённые символы всегда можно вернуть обратно, просто перезапустив сервис.

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

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

Google Fonts хорош тем, что умеет разбивать шрифты на несколько файлов с разными сабсетами

У него эти сабсеты предопределены. У нас же вы можете свой сабсет подготовить. Мы прям исследование провели. В статье в разделе "Оставляем только используемые символы" есть таблица о том, что лучше: CDN гугла или файлы, сгенерированные в нашем сервисе. В итоге, используя наш сервис, удалось сократить размер файлов на 15% и делать не 2 запроса, а 1.

Например: у вас сайт по продаже корейской косметики. Названия товаров у вас на корейском и английском языках, а сам сайт на русском. Google предлагает вам загрузить 3 отдельных файла, а с помощью нашего сервиса вы сгенериурете 1 файл сразу для 3 языков. Более того, в нашем файле отсутствуют заведомо не используемые символы вроде ½, ±, § и т.д.

А ещё не знаю как сейчас, а раньше было, что Google Fonts даже мог отдавать разные версии шрифтовых файлов в зависимости от ОС и браузера пользователя

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

Заканчивается 2023 год, поэтому форматы woff и ttf не нужны, только если вы не поддерживаете браузеры типа IE9.

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

Нагло скопированный с https://yoksel.github.io/url-encoder/

Да, действительно. Причём сходство настолько близкое, что, скорее всего, код этого проекта и используется. Но в поисковых системах ищется именно страница https://bloggerpilot.com/en/tools/svg-to-css/, так как на ней есть текст, картинки, ссылки. То есть, авторы позаботились о продвижении.

Понимаю, что рекламируете свой сервис, но transfonter удобнее.

У нас интерфейс более наглядный и простой. Так же у нас можно точно перечислить символы которые попадут в итоговый файл шрифта. Точное управление набором символов - ключевая функция, которая помогает сократить размер файлов шрифтов. У transfonter необходимо самому указывать список символов в полях "Characters" или "Unicode ranges", что крайне неудобно. Так же интерфейс transfonter содержит множество редко используемых опций, которые отпугивают пользователей. Всё это приводит к тому, что весомое количество пользователей бросают задачу по оптимизации шрифтов на сайте, ещё на этапе выбора онлайн сервиса.

Внутри @font-face не нужно указывать text-rendering. Это делается на уровне селекторов, например, :root { text-rendering: optimizeLegibility; } .

Согласен.

Information

Rating
1,547-th
Location
Россия
Registered
Activity