❗️ Для того, чтобы сделать пометку в браузере пользователя, например о том, что он согласился с тем, что на сайте используются Cookie часто ставят cookie. Странно, не правда ли? Сегодня расскажу почему это плохо, и чем лучше заменить.

Начнем с того, что каждая кука отправляется на сервер с каждым запросом. В нашем примере пусть это будет "cookies-popup-close=1; " и в каждый запрос на сервер, даже при загрузке картинки будет отправлена эта самая кука. Казалось бы, всего 22 символа, но при 50 запросах на странице это уже 1 килобайт информации, если глубина просмотра сайта в среднем 3 страницы на посетителя и суточной посещаемости в 5000 человек это уже 16 мб ненужной информации которую получил сервер и обработал. А если посещаемость больше? А если кука не одна? Посчитайте сами, сколько лишней информации обрабатывает ваш сервер ежемесячно.

Для очень грубых посчетов можно использовать такую формулу:

document.cookie.length * performance.getEntries().filter(e => e?.name.indexOf('http') === 0 && location.host === new URL(e?.name).host).length

Выполните этот код в консоли браузера на своем сайте прямо сейчас. На сайте одного из клиентов вышло примерно 170 кб cookies на каждую страницу. Это конечно приблизительно, данные сжимаются, и часть этих данных нужна, но 99% случаев это лишняя информация которая передается с каждым запросом.

Раньше выносили статику на отдельный поддомен, куки на него не распространялись и не передавались, но это +1 соединение, а как мы помним соединение самая ресурсоёмкая операция.

⚠️ Как предлагаю делать я: используйте localStorage для данных, которые устанавливаются и считываются только в JS. Если данные используются на backend, то тогда запрещайте к ним доступ из JS. Еще увеличите безопасность.

localStorage.setItem('cookies-close','1');
localStorage.getItem('cookies-close');

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

💬 А как вы относитесь к Cookies? Используете localStorage?

👍 Лайк, если было полезно

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

✅ Ссылка на codepen

💬 Пишите, используете ли вы подобные элементы на сайте.

👍 Лайк, если полезно. 🔥 Огонь если хотите больше постов с примерами кода.

❗️ В 101 версии Google Chrome появилась новая возможность управлять приоритетами, причем более понятная, чем раньше. Представьте, что у любого загружаемого ресурса: картинки, стилей скриптов, или даже iframe, можно указать приоритет загрузки и тем самым более гибко управлять всем процессом загрузки. Даже в preload можно управлять пориоритетами. Интересно?

Имя этому свойству fetchpriority. Пока поддержка крайне мала, и надеяться только на него нельзя, но это уже большой шаг в сторону нативного управления приоритетами. Для того, чтобы использовать его, просто добавляете у нужного html-элемента fetchpriority="low|high|auto" и загрузка ресурсов будет выстроена исходя из этих приоритетов. Поддерка пока небольшая, ждем обновления браузеров у пользователей.

<img src="photo.avif" fetchpriority="low" alt="не очень важная картинка">
<img src="lcp-element.avif" fetchpriority="high" alt="картинка, которая является LCP-элементом">

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

⚠️ Самое главное - не ставить всем ресурсам маскимальный приоритет, это не ускорит загрузку.

💬 Пишите в комменты, слышали вы про этот способ управления приоритетом раньше, и будете ли использовать его в своем проекте?

👍 Лайк, если было полезно.

👋 Всем привет!

Телеграм бот прислал статистику канала, и мне стало так стыдно, что ничего не писал последние месяцы. Спасибо, что верили в меня и канал, спасибо что не отписались. Вы крутые, а я не могу выкроить полчаса на пост. Но это все конечно опрадания. Скорее это какой-то страх исписаться. И привет, моему синдрому самозванца.

🙈 Минус 500 человек, но огромное спасибо всем, кто остался. Обещаю уже в январе выпустить два бомбезных поста.

🎄 Ну и по традиции: год был сложный, будет еще сложнее, не разбегайтесь далеко.

🎉 С Наступающим 2023 годом! Берегите себя!

⚡️ Сегодня ночью Lighthouse был обновлен до 10 версии.

‼️ Важные изменения:

1. Time To Interactive (TTI) больше не учитывается при общей оценке производительности. В восьмой версии его влияние уже было снижено до 10%, а теперь он и вовсе не участвует в формировании оценки. Показатель все равно рассчитывается и можно его получить в json отчете.

2. Влияние Cumulative Layout Shift (CLS) усилено c 15% до 25%. Именно он получил те самые 10% от TTI.

3. Добавлен новый аудит bfcache, это проверка как браузер обрабатывает навигацию вперед/назад, такие страницы должны быть показаны моментально. Но этот аудит не будет отображаться в Google PageSpeed Insights. Доступ к нему можно получить через JSON.

Также был переработан механизм сборки, изменены названия аудитов в JSON, некоторые аудиты вообще удалены. Подробнее можно ознакомиться на Github проекта и в нашем любимом калькуляторе общей оценки.

⚠️ Из идентификации User-Agent убрали "Chrome-Lighthouse", теперь не получится по этому параметру скрывать часть контента или отдавать облегченную версию.

💬 Давайте обсудим в комментариях.
Что вы думаете о текущих изменениях?
Обращали ли вы последнее время внимание на TTI?
Не считаете ли завышенным влияние CLS?

🔥 Дайте огня за оперативность.

⚡️ Хорошая новость для всех, кто заботится о скорости работы своего сайта, и для всех, кто не может отказаться от счетчика Яндекс-Метрики, но проблемы с производительностью возникают именно в нем. Код подключаемого бандла теперь opensource.

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

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

⚠️ Обратите внимание, запросы отправляются к яндексу, поэтому еще одно соединение никуда не денется. Чтобы от него избавиться на клиенте, рекомендую использовать проксирование, о котором я писал ранее.

💬 Что думаете по этому поводу? Будете ли использовать собсвтенную сборку или останетесь на стандартном бандле, подключаемом с серверов Яндекса?

👍 Палец вверх, если вы уже подключаете свою версию метрики в основной бандл.

👋 Многие из вас просили меня сделать слайдер, который не будет менять DOM и вызывать перерисовку при инициализации. Я и сам давно обещал вам такой слайдер, очень давно, даже стыдно, но все никак не мог добраться до него. Поэтому я решил попросить помощи у (внезапно) Bing, который работает на GPT-4, и… получилось нечто невероятное!

Благодаря множеству уточнений и итераций, Bing написал за меня почти весь код, который работает как мне хотелось и выглядит вполне прилично. Это не готовая библиотека, конечно, но для одного слайдера на странице вполне подходит, и его можно адаптировать под свои нужды. Я намеренно не стал приводить стилистику кода к единому формату, чтобы можно было видеть еще и результат работы нейросети.

Я лишь немного подправил оформление точек под слайдером, общий layout, прописал url для картинок и добавил заголовок и футер. Все остальное - заслуга нейросети. Я уже пробовал ранее использовать Bing и ChatGPT для написания кода, но такого успеха еще не было. Я потратил 10 минут, писал только запросы с телефона, при этом сам не писал код, а говорил что и как улучшить. Почти как в повседневной жизни, где я консультирую команды и даю рекомендации по улучшению быстродействия сайтов.

В итоге мы имеем слайдер, который полностью соответствует моим требованиям, не меняет DOM и не вызывает перерисовку при инициализации, и даже частично работает без JS. Это ли не чудо? )

✅ Ссылка на код слайдера.

Если кто-то захочет - можете улучшить его и упаковать в универсальную библиотеку, если пришлете ее мне - я с радостью расскажу о ней.

🔥 Зажгите огонь для Bing, или 👍 палец вверх за мои запросы и уточнения )
💬 Напишите в комментариях, что вы думаете об этом слайдере и о Bing конечно же.

Дорогие топовые фронтендеры, сегодня пост не для вас. Так как вы используете системы сборки и с такой проблемой почти никогда не сталкиваетесь, а в опросе вы выбрали вариант про defer для inline скриптов.

Иногда критически важно ускорить существующий сайт, например на Битрикс, но с выводом скриптов там вечная путаница, потому что тему использовали готовую, и затем долго дорабатывали её. Поэтому нет возможности прописать всем скриптам defer, так как на inline скрипты он не работает, а в коде много вызовов, которые используют тот же jquery или другие библиотеки и плагины.

Например, вот такой фрагмент скрипта

<script>jQuery(document).ready(function(){alert('ok')});</script>

требует наличия загруженного jQuery, и вызовет ошибку, если у подключения jQuery написать defer.

Один из самых простых способов: использовать base64 и тот же defer для всех скриптов. Давайте превратим этот инлайн скрипт в base64 и подключим как через data, на которые этот defer распространяется

<script src="data:text/javascript;base64, alF1ZXJ5KGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbigpe2FsZXJ0KCdvaycpfSk7" defer></script>

Да, браузеру придется декодировать base64, однако вам не придется следить за порядком выполнения, это сделает сам браузер. Да, это не самый оптимальный вариант - самый оптимальный переписать все нормально. Но если вы ограничены во времени/бюджете, то это неплохой вариант снять блокировку на первую отрисовку, улучшить #FCP, возможно #LCP и ничего не сломать на сайте.

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

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

Привет всем. Сегодня буду разбирать скорость сайтов на канале Михаила Шакина и давать общие рекомендации по ним.

https://www.youtube.com/watch?v=FYAS6Al8oFI

Кому интересно - приходите, все бесплатно и можно никуда не подписываться. Свой сайт на разбор можно отправить по ссылке: https://docs.google.com/forms/d/e/1FAIpQLSeHUoQwRsGvJut5HxIOM0YCu-QExtKO82mfv0dViP6BFJ3icA/viewform

Если понравятся разборы, можно будет повторить.

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

https://www.youtube.com/watch?v=zyu19xiJRqA

Кто хочет — приходите, разборы бесплатные, только заранее отправьте свой сайт по ссылке: https://docs.google.com/forms/d/e/1FAIpQLSeHUoQwRsGvJut5HxIOM0YCu-QExtKO82mfv0dViP6BFJ3icA/viewform Отправляя, напишите, что вы с этого канала в комментарии. Кстати, можно и вопросы во время эфира задавать.

P.S.
Эх, как же хочется продолжить писать на канал.

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

Привет. Завтра 10 ноября снова буду в эфире на канале у Михаила Шакина, где буду анализировать сайты и давать советы по улучшению.

https://www.youtube.com/watch?v=klG1LDhlNU0

Приходите, кто хочет получить бесплатный разбор своего сайта. Главное - отправьте ссылку на сайт заранее через форму https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии пишите, что вы с канала @perfScan

Привет всем. Завтра в 15-00 по МСК я проведу разбор скорости сайтов подписчиков на канале Михаила Шакина. Дам советы по улучшению и конечно подведу итоги года, и отвечу на все ваши вопросы. Да, и расскажу кое-что про новогодние украшения сайтов.

https://www.youtube.com/live/Ku6r1XWQTdU

Приходите, будет интересно, а если хотите, чтобы я разобрал ваш сайт, оставляйте заявку в форме

https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии пометьте, что вы с телеграм канала @perfscan

Если вы смотрели мои эфиры, то наверняка видели мой сервис, который выводит исторические данные Web Vitals из базы Chrome UX Report.
Если что - ➡️он здесь⬅️

Так вот, совсем недавно я его сильно обновил, добавил общие рекомендации по каждому параметру, вывел общую оценку производительности, чтобы с первого экрана было все ясно, и теперь польза этого сервиса, как мне кажется, повысилась на порядок.

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

Также добавил максимум ссылок на этот канал (если перебор — тоже пишите, удалю лишнее, может и правда переборщил).

Так вот, на сегодня есть несколько проблем у этого сервиса:

1. У молодых сайтов и сайтов с небольшим трафиком нет данных в Chrome UX Report и многие получают заглушку, мол, нет данных, и уходят. Как думаете, что с этим можно сделать?

2. Для Chrome UX Report сайты с www и без www являются разными, ровно как и http/https. Таким образом, необходимо, чтобы пользователь правильно вводил данные. Так как бэкенда тут как такового нет, а все запросы летят напрямую в Chrome UX Report, то на лету сложно преобразовывать, следовать редиректам и проверять сертификаты. Как думаете, писать ли свой бэкенд, или и так норм?

💬 Очень жду ваших советов и мнений относительно вышесказанного.
🔥 И дайте огня, если сервис полезный!

Привет всем!

Завтра в 13:00 я буду выступать на АспроSearch — SEO-конференции от компании Аспро. В своем докладе я расскажу о том, как работает PageSpeed, как интерпретировать его данные и почему пейджскор вашего сайта именно такой.

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

Приходите, это будет полезно. Подробнее про АспроSearch можно узнать на сайте.

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