00:50 Обзор сайта 01:42 Page Speed 03:30 Панель Network 05:04 Шрифты на сайте 07:56 Декодинг из Base64 09:17 Проверка WOFF 11:02 Кодирование в WOFF2 13:00 Остальные шрифты 14:37 Баннер со ссылкой 15:31 Сабсеттинг шрифта 17:55 Шрифты на главной 19:11 Проблемы с графикой 21:14 Выводы 23:43 Аутро
@artyom_ss
4 жыл бұрын
Мб хайпануть на Татьяныче www.artlebedev.ru/ ? Вечно спускающийся футер на странице с динамически подгружающимся элементами? Семантические теги?
@pepelsbey
4 жыл бұрын
Будет повод - зайду и к Лебедеву, а просто ради хайпа не интересно )
@artemz9054
4 жыл бұрын
Видео про то как правильно съесть эти мягкие французские булки, да выпить чаю.
@user-md5mw1tp3e
4 жыл бұрын
Каждый раз я узнаю, что ничего не знаю)) Столько всего нового узнал про шрифты!
@andyvi3116
4 жыл бұрын
Ух, не успели отвыкнуть от разбора сайтов, а тут Вадим подъехал со своим качественным, ответственным,детальным обзором. Спасибо тебе за этот выпуск. Лишний раз напомнил нам, что не модный стэк технологии разработки должен решать, а умение сделать базовые вещи для более лучшей оптимизации продукта
@andriiuvarov5130
3 жыл бұрын
Перешел на сайт type.today сегодня и кажется они прислушались в совету и убрали бегущую строку, вы делаете мир веба лучше)
@pepelsbey
3 жыл бұрын
Да, ребята большие молодцы и услышали критику :)
@user-cq8xy3rt5e
3 жыл бұрын
Вау... век живи - век учись
@dedlive51
4 жыл бұрын
Очень приятно смотреть за работой профессионала. Спасибо.
@fldbots
3 жыл бұрын
Я совсем с другой области, но Ваш взгляд на оптимизацию меня вдохновляет. В сфере 3D, структура проекта и оптимизация - это главные принципы, которые отвечают за качество полученного контента. Не так много специалистов как Вы, которым свойственна грамотность и лаконичность. Многие работают на количество. А в фрилансеров жизненный цикл проекта вообще занимает пару дней. Нету когда поразмышлять и подумать на перспективу.
@ra44o
4 жыл бұрын
у меня уже отдельная папка сохраненных ссылок на инструменты, которые показывает Вадим)
@nikitasavanovich4346
4 жыл бұрын
Благодаря подобным видосам я начну писать семантически правильный код, спасибо!
@user-ei7qp6nu1f
4 жыл бұрын
Вадим, спасибо за Ваш труд, очень интересное видео, открыл для себя много новых утилит. С нетерпением жду новое видео!
@egoryurchenko7343
4 жыл бұрын
Только сегодня услышал про новый формат, кажется он добавлен в последнем обновление Chrome, отличный разбор! Спасибо, узнал новое для себя)
@MacKorOSX
4 жыл бұрын
Спасибо большое. Очень познавательно.
@user-ei9jd7pw4s
3 жыл бұрын
Вы супер!!! Спасибо за контент
@dimaburichin7726
4 жыл бұрын
Спасибо многое узнал об оптимазиции шрифтов!
@user-vk8is2fz8k
3 жыл бұрын
Спасибо, вы потрясающий рассказчик! Узнал много нового про шрифты. Единственное, я бы добавил ленивую загрузку: мы сможем сделать подгрузку новых по скроллу незаметно (или почти) для пользователя и в то же время сэкономим ценные мегабайты
@user-yo5mg3xn8k
3 жыл бұрын
Вадим, ты просто маг и волшебник. Превосходный анализ. Кстати баннера уже нет :)
@pepelsbey
3 жыл бұрын
Ура, работает!
@zapiski_verstalshika
4 жыл бұрын
Спасибо новые темы для размышления!) а Волгоградский скоростной билайн за минуту не справился с сайтом...
@igossmart
4 жыл бұрын
Теперь главное, чтобы Вадиму не прилетело по «шапке», что он показал, как «без СМС и регистрации» слямзить шрифт, который стоит ~30$. Шутка.
@EvgenyKoloskov
4 жыл бұрын
Ну эти шрифты если не все, то процентов 90 и так гуляют по просторам интернета. Фактически продают лицензии на использование (можно сказать совесть и чистоту перед законом), а не сами шрифты… Основной заработок если не всех, то большинства шрифтовиков - шрифты на заказ, даже у таких именитых как эти ребята. Илья Рудерман, на сколько помню, только и делал что на заказ, кажется до открытия этого магазина.
@nickml5138
4 жыл бұрын
Лайк за ржать над семантикой)))
@drewmorama
4 жыл бұрын
Очень интересно
@dmitry.gashko
4 жыл бұрын
Из всех косяков семантики и доступности больше всего меня бесят как раз таки не ссылки. Особенно, когда это список из не ссылок. Я очень часто открываю в новой вкладке, а здесь не открыть ни с клавиатуры, ни с контекстного меню... Иногда из-за этого проще дублировать вкладку и там уже переходить... А когда это список из не ссылок, то и это не поможет.
@fayonthaarr
4 жыл бұрын
ППКС
@codisy
4 жыл бұрын
Вадим, не планируете сделать выпуск о WebP и AVIF? Мне вот WebP хочется, но тащить Modernizer ради 5-и бекграундов как-то не хочется( Для img есть конечно выход использовать picture и туда фоллбек с img, но те вещи которые реально являются бекграундом не хочется переделывать на img
@KonstantinKochh
4 жыл бұрын
А чего там тащить особо? Модернизр с одним лишь детектом webp весит 3 KB всего
@sheraabdurakhmanov9631
4 жыл бұрын
Урааа)))
@fayonthaarr
4 жыл бұрын
Особенно avif, который поддерживается только десктопным хромом)
@pepelsbey
4 жыл бұрын
Всего лишь 60% рынка, действительно, зачем )
@whatthepeople
4 жыл бұрын
@@pepelsbey немного забавляет, когда люди так пишут относительно новых фишек, форматов и прочего, что-де только в Chrome поддерживается, при этом они вообще не учитывают охват этого браузера. P.S. спасибо за видео, как всегда, очень круто. С выпиливанием отдельных знаков/букв из шрифта ещё большее спасибо.
@fayonthaarr
4 жыл бұрын
@@pepelsbey потому что есть еще 40%, для которых придется делать фоллбеки. Ознакомиться с новыми пока еще узкоспециализированными форматами это интересно и полезно, но выкатывать в прод я бы не стал.
@pepelsbey
4 жыл бұрын
Вы сейчас говорите про фолбэки с точки зрения постепенной деградации (graceful degradation), но есть ещё принцип прогрессивного улучшения (progressive enchancement) - его суть в том, что вы делаете основу, которую понимают все, а для лучших (в нашем - случае более массовых) улучшаете. Или если ближе к делу: вы спокойно живёте дальше с JPEG, просто встраиваете в сборку ещё и AVIF, а в разметку дополнительный - и у вас 60% пользователей экономят 30-50% трафика на картинках. Подумайте, попробуйте.
@pepelsbey
4 жыл бұрын
Да, они только начали выкатывать 85-ю версию, но скоро он займёт все те 60%, о которых я говорил.
@loremipsum353
4 жыл бұрын
base64, очевидно, потому что file-loader в вебпаке шрифты так инлайнит
@clatten9518
2 жыл бұрын
не совсем понимаю: зачем столько обёрток? ( шапка "tomorrow" ) и можно ли поменять эти обёртки на 1 див с миксами? (всё равно не понимаю..зачем СТОЛЬКО обёрток)
@rodigy
3 жыл бұрын
Как можно запустить glyphhanger из под ноды, чет она не видит его. Например child_process.exec( `glyphhanger --formats=woff2 --subset="My-font.ttf"`)
@pepelsbey
3 жыл бұрын
Это не просто npm-пакет, у него есть зависимости, см. www.sarasoueidan.com/blog/glyphhanger/
@AndreyMorkovin
4 жыл бұрын
Вадим, большое спасибо за видео. Это было очень интересно. Возникли вопросы =) 1. Есть ли какая-то утилита, которая позволяет оптимизировать изображения прямо на сервере? В моем случае - это jpg. И какой утилитой для оптимизации изображений вообще пользоваться (если не на сервере, а на компьютере, например). 2. В каком формате загружать шрифты на сайт? Нормально ли загружать woff2 и woff (для старых браузеров)?
@romanshamin535
4 жыл бұрын
Для оптимизации и ресайза изображений попробуйте imgproxy.net
@pepelsbey
4 жыл бұрын
…если разберётесь как его завести. Это всё-таки хорошая, но админская штука, а мы тут про фронтенд.
@romanshamin535
4 жыл бұрын
Vadim Makeev вопрос содержит условие «на сервере», выходит, не совсем про фронтенд
@AndreyMorkovin
4 жыл бұрын
@@romanshamin535 спасибо, попробую.
@pepelsbey
4 жыл бұрын
1. Если у вас есть этап сборки, то любой JPEG можно превратить в нужный формат. Дальше два пути: либо дополнительно модифицировать разметку, чтобы добавлять с переключением источников, либо уже на сервере сделать динамическую отдачу изображений по тому же адресу, если браузер их поддерживает. То есть: example.com/image.jpg может проапгрейдиться сервером до WebP или AVIF, если браузер при знакомстве с сервером скажет, что умеет эти форматы. Я планирую поэкспериментировать и записать видео на эту тему.
@user-xz8lf4se3l
4 жыл бұрын
Спасибо за видео! Вадим, что можно посмотреть о скорости работы сайта?
@pepelsbey
4 жыл бұрын
Почитайте про перфоманс на web.dev/learn/#performance
@MultiHumel
4 жыл бұрын
KiB это же кибибайты, а не килобайты (2:30)
@pepelsbey
4 жыл бұрын
Ок 😅
@romuelson
4 жыл бұрын
Даешь прогрессивную оптимизацию! Будет ли видео про супер-резиновый-адаптив minmax и все такое?
@pepelsbey
4 жыл бұрын
Я не любитель раскладок на minmax, они какие-то слишком магические. Мне нравится более явно задать все нужные места в медиавыражениях. Но это хороший повод, чтобы разобраться и рассказать о них. Спасибо за идею.
@rodigy
3 жыл бұрын
Работал с glyphcharger, была проблема. Как в whitelist записать символы типа '$%@-/>< , ни одна консоль не пропустила, и экранировать тож не особо получилось
@pepelsbey
3 жыл бұрын
Можно попробовать кавычки или положить это в текстовый файл и его передать: glyphhanger ./test.html --subset=*.ttf
@igoriugin1253
4 жыл бұрын
А не может получиться, что ты оптимизируешь уже оптимизированные фото, у них качество не падает? Хотя при маленьком разрешении это вряд ли было бы видно, но всё равно интересно. Спасибо большое за выпуск.
@pepelsbey
4 жыл бұрын
Качество у фото не сильно падает, плюс я оптимизировал большой исходник (1000px и больше), там при ресайзе теряются все артефакты сжатия.
@igoriugin1253
4 жыл бұрын
@@pepelsbey спасибо за ответ
@aurelianobuendia4203
4 жыл бұрын
Раунд🔥😅
@user-lp9pv4bu8h
3 жыл бұрын
Добрый день. Поверьте еще раз этот сайт) Все ли они исправили?)
@pepelsbey
3 жыл бұрын
Разработчики сайта посмотрели видео и кое-что улучшили, всё было не зря :)
@user-lp9pv4bu8h
3 жыл бұрын
@@pepelsbey Я прочитал их отзыв- они молодцы. Вообще это действительно прекрасный сайт (и студия)- но уж очень они (студия) дорогие. Если будет время- и решите вернуться к этому сайту- сделайте пожалуйста его разбор- как все это сделать красиво, доступно, без нелюбимых вами дивов, и на элевенти) и еще как прикрутить шрифт для дисклексиков, и сделать (как вообще то надо делать- по закону) возможность увеличивать-уменьшать шрифты, и менять контрастность.)
@capstanfearless
4 жыл бұрын
Вадим, привет! Спасибо за видео! Так получилось, что узнал я про Parcel, и при сборке он создает все файлы в одну папку "dist", добавляя хеши. А можно как-то разбивать по папкам и без хешей вроде app.6236f3.js, может где конфигурация начальная есть?
@pepelsbey
4 жыл бұрын
Это вам лучше в документацию Parcel, мне пока не доводилось с ним работать, кроме самых простых попыток.
@Andrey_4dev
4 жыл бұрын
А есть инструменты для автоматической конвертации в avif?
@pepelsbey
4 жыл бұрын
Формат сравнительно новый, мне пока не доводилось встраивать его в автоматическую сборку - только руками. Но буду проверять и обязательно запишу отдельное видео про AVIF :)
@Andrey_4dev
4 жыл бұрын
@@pepelsbey squoosh.app/ медленно, но работает ручная конвертация. Ждем инструментарий так, как для парочки изображений можно и через сервисы, а вот когда тысяча изображений, то уже сложнее
@antDgt
4 жыл бұрын
Значит, Вадим показал как хакнуть сайт со шрифтами?)))
@sapyor
4 жыл бұрын
Разве что новичкам :)
@iGotton
4 жыл бұрын
+
@MrCortc
4 жыл бұрын
Это специализированный сайт, т.е. не тот сайт на котором стоит заморачиваться с оптимизацией. На него будет заходить определенный пул людей с десктопов. Это ни какой-то новостной сайт с миллионными просмотрами на главной. А в Base64 чтобы аяксом забрать строку и прямо ее так ее и вставить, а не заморачиваться с конвертированием бинарников. Скорее всего изначально так было сделано для большей совместимости со старыми браузерами.
@pepelsbey
4 жыл бұрын
С интересом жду, что вы мне объясните и про графику, и про «ссылку» с баннера в том же стиле - мол, это специальный сайт, зачем заморачиваться.
@MrCortc
4 жыл бұрын
@@pepelsbey Сайт в первую очередь должен решать задачи бизнеса и приносить прибыль его владельцу. У вас же профессиональная деформация, вы смотрите на задачу с точки зрения фронтендера, а не с точки зрения бизнеса. Вам бесполезно что-то объяснять.
@pepelsbey
4 жыл бұрын
Записал видео с разбором фронтенда сайта, показал какие вещи сделаны плохо. А вы мне объясняете, что я должен думать про бизнес, а не фронтенд. Я может чего-то не понимаю, но я здесь про фронтенд. Про бизнес на других каналах - и мне не очень интересно. Так что аргумент «сайт решает задачу», каким бы он ни был верным, отскакивает и пролетает мимо - я здесь говорю про технологии. И да - держите себя в руках, можно было не хамить про бесполезные объяснения. Я вроде по-доброму.
Пікірлер: 80