perfScan - Секреты быстрых сайтов
1.53K subscribers
53 photos
56 links
Делюсь секретами как создавать быстрые сайты и ускорять существующие.

По всем вопросам: @fenixru - помогаю ускорять сайты.

При использовании материалов канала обязательно указание авторства.

Поддержать автора: https://pay.cloudtips.ru/p/4ad68fa9
Download Telegram
⚡️ Сегодня ночью 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?


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

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

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

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

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

👍 Палец вверх, если вы уже подключаете свою версию метрики в основной бандл.
🔥18🤯53👍3🎉3🤩1
👋 Многие из вас просили меня сделать слайдер, который не будет менять DOM и вызывать перерисовку при инициализации. Я и сам давно обещал вам такой слайдер, очень давно, даже стыдно, но все никак не мог добраться до него. Поэтому я решил попросить помощи у (внезапно) Bing, который работает на GPT-4, и… получилось нечто невероятное!

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

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

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

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

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

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

Есть два поста: про безболезненный defer всего js в старом legacy проекте, и про сервис для получения исторических данных Core Web Vitals из Chrome UX Report. Какой опубликовать в понедельник?
Anonymous Poll
65%
Про defer всего js
35%
Про исторический Core Web Vitals
👍12🔥6🤯2🤩2🕊1
Дорогие топовые фронтендеры, сегодня пост не для вас. Так как вы используете системы сборки и с такой проблемой почти никогда не сталкиваетесь, а в опросе вы выбрали вариант про 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 и ничего не сломать на сайте.

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

🔥 Дайте огня, если было полезно, или 👍 палец вверх, если уже использовал данный метод.
💬 Коммент, если хотите поддержать автора и улучшить его код.
🔥49👍8🤩3👏1🤯1🎉1
Привет всем. Сегодня буду разбирать скорость сайтов на канале Михаила Шакина и давать общие рекомендации по ним.

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

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

Если понравятся разборы, можно будет повторить.
👍22🔥9🎉3🤯2🤩1
Привет. В комментариях просили заранее анонсировать подобные эфиры. В пятницу, 6 октября, я вновь приглашен на прямой эфир к Михаилу Шакину, где буду разбирать скорость загрузки сайтов и давать рекомендации по ним.

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

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

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

Пишите в комменты к этому посту, кто хотел бы тут видеть не только мега полезные посты но и рассуждения/истории по теме канала.
🔥25👍14🎉3🙏21
Привет. Завтра 10 ноября снова буду в эфире на канале у Михаила Шакина, где буду анализировать сайты и давать советы по улучшению.

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

Приходите, кто хочет получить бесплатный разбор своего сайта. Главное - отправьте ссылку на сайт заранее через форму https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии пишите, что вы с канала @perfScan
👍17🔥5🙏211🎉1🤩1
Привет всем. Завтра в 15-00 по МСК я проведу разбор скорости сайтов подписчиков на канале Михаила Шакина. Дам советы по улучшению и конечно подведу итоги года, и отвечу на все ваши вопросы. Да, и расскажу кое-что про новогодние украшения сайтов.

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

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

https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии пометьте, что вы с телеграм канала @perfscan
1🔥24👍4🎉31😁1🤩1🤗1
Всем привет. С Новым годом! 🎄

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

▶️ https://www.youtube.com/watch?v=mvTi4JzcF5M

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

Чтобы отправить ваш сайт на разбор в прямом эфире оставьте заявку в форме https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии укажите, что вы с телеграм канала @perfScan.
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍15🔥7🤩311🎉1💯1🏆1🍾1👻1
Всем привет!

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

📺 https://www.youtube.com/watch?v=IxshIqTFhm4

Чтобы отправить ваш сайт на разбор в прямом эфире оставьте заявку в форме https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии укажите, что вы с телеграм канала @perfScan. Также в комментарии можете указать на конкретную проблему на которую хотите обратить моё внимание.
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥24👍12🤩62🤝1
Всем привет!

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

📺 https://www.youtube.com/watch?v=ztQl0eTw4qw

Чтобы отправить ваш сайт на разбор, оставьте заявку в форме https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии укажите, что вы с канала @perfScan. Также в комментарии можете указать на конкретную проблему на которую хотите обратить моё внимание.

Приходите на прямой эфир, отвечу на любые ваши вопросы по ускорению и улучшению производительности ваших сайтов.
Please open Telegram to view this post
VIEW IN TELEGRAM
9🔥24👍86👌2🤩1🤝1
Если вы смотрели мои эфиры, то наверняка видели мой сервис, который выводит исторические данные Web Vitals из базы Chrome UX Report.
Если что - ➡️он здесь⬅️

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

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

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

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

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

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

💬 Очень жду ваших советов и мнений относительно вышесказанного.
🔥 И дайте огня, если сервис полезный!
1🔥27👍83🎉21🤩1💯1👨‍💻1
Привет всем!

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

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

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

Зарегистрируйтесь через чатбот, чтобы вовремя получить напоминание, ссылку на трансляцию, материалы и записи.
1🔥14👍6👌311🎉1
Всем привет! С Новым годом! Завтра в 15:00 по МСК я проведу разбор ваших сайтов на вебинаре у Михаила Шакина.

Я дам вам советы по улучшению ваших сайтов в обмен на лайки и реакции.

📱 https://www.youtube.com/watch?v=uNXL1xjoDUU

📱 https://vkvideo.ru/video80770238_456240948

⚠️ Как отправить сайт на аудит:

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

Не пропусти, первый мой разбор сайтов в 2025 году.
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥9🎉64🤩2🏆2👍1👨‍💻1
🚀 Друзья!

На канале perfScan давно не было новых публикаций.
Причина простая и очень банальная: на качественный контент нужны время и ресурсы.
Я могу в ChatGPT писать посты каждый день, как делают 90% каналов, но хочется все делать с максимальной пользой и через призму моего опыта - вы и сами знаете, что я сильно задрал планку качества публикаций.

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

⚠️ Если вам важна тема ускорения сайтов и вы хотите видеть развитие канала - поддержите проект донатом.

➡️ Поддержать можно здесь: https://pay.cloudtips.ru/p/4ad68fa9

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

👍 - если перечитывал посты и плакал, как и я
Please open Telegram to view this post
VIEW IN TELEGRAM
13👍35🔥6🤝3🙏21🎉1
История одной печеньки
или как GDPR отправил LCP в космос

Мы используем Cookie. Та самая плашка на полэкрана с вечным посланием: «Мы тут собираем данные, но вы держитесь». Казалось бы, чем она может навредить скорости сайта?

Обратился ко мне маркетолог одного довольно крупного сайта. Жалуется: «LCP чудовищный, сайт «по метрикам» грузится медленно, хотя по ощущениям вроде всё шустро». Ну, классика.

Окей, думаю, сейчас найдём какую-нибудь отложенную картинку на первом экране или видео - ну то, что браузер назначил LCP-элементом.

Но не тут-то было.
LCP-элементом оказался... 🥁 cookie-баннер.

И не просто <div> в коде, а целый адский завод: вставка идёт через сторонний сервис - такой, знаете, «всё по фэншую GDPR», с пикселями, метриками, галочками и ритуальными жертвоприношениями, которые активируются только после согласия пользователя.

А теперь внимание:
- Скрипт подключён через defer (то есть «когда-нибудь потом запустится»),
- Грузится со стороннего домена (привет, +1 установка соединения),
- Под нагрузкой отдаётся 2+ секунды (если сервер в настроении),
- Исполняется секунды через полторы, когда браузеру уже скучно.

И что делает браузер?
Он говорит: «О, новый большой элемент! Будешь LCP!».
И LCP (улетает в космос): 12 секунд. Хотя весь остальной контент давно отрисован.

Что делаем:
- Грузим скрипт только по первому действию пользователя: хоть скролл, хоть клик по экрану, хоть удар головой по клавиатуре,
- Постепенно переезжаем на локальное решение. Контроль - это скорость.

Итог:
Прямо во время консультации даю пример отложенной загрузки js по первому действию пользователя. Разработчику ставят задачу, он делает загрузку скрипта по ивенту - и LCP падает с 12 до 3 секунд. Прямо во время созвона. Почти магия, только без шляпы, кролика и вне стен Хогвартса.

Вот такие вот печеньки.

💬 А какой самый необычный LCP элемент вы видели на сайте?

👍 Лайк, если пошел проверять свой сайт и конкурентов.

✍️ Запишись на консультацию

🚀 Поддержи канал донатом
Please open Telegram to view this post
VIEW IN TELEGRAM
11👍36🔥83🤯1🤩1🏆1🙈1
Всем привет!
Хотите горячей летней новости?

Держите: скидка 30% на личную консультацию!

Подготовь свой сайт к окончанию сезона отпусков.

До пятницы готов взять ПЯТЬ счастливчиков на консультацию по ускорению сайтов.

💵 Стоимость - 3 500 рублей/час, минимум два часа.
Вся консультация обойдётся в 7 000 рублей (вместо 10 тысяч):

Как это будет:

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

1 час: видеосозвон, где чётко и без воды объясняю:

- что тормозит
- почему тормозит
- как исправить
- куда копать дальше

🔥 Подхожу к задаче как к своему проекту. Цель - чтобы вы реально увидели рост по Web Vitals, а не очередную абстракцию из PageSpeed.

🚫 Не беру сайты на конструкторах: Tilda, Wix и прочие - неинтересно. Только там, где можно залезть и переписать код.

📆 Успеть можно только до пятницы. Потом ныряю обратно в большие проекты.

📬 Кому нужно - пишите в личку: @fenixru
10👍13🔥941👀1
Осталось 2 места и 4 часа до конца скидки на консультацию.

Навязчиво напоминаю.

Записаться тут: @fenixru

UPD: На консультацию записались 4/5. Акция закрыта.
1🔥104👍3🤣3🤔1
Готовь сани сайт летом!

🚨 3 сайта на аудит скорости. Потом - всё, я в горах.

- Предложение действует до 4.07
- Только 3 проекта
- Только для тех, кто реально хочет разогнать свой сайт

📊 Что будет в аудите:

- Вы получите готовую инструкцию для разработчиков - с примерами, приоритетами и конкретным кодом для внедрения
- Детальный и подробный аудит работы сайта
- Обязательная проверка внедрения рекомендаций из аудита

💸 Цена: 63 000₽ (-30%)
(Обычно 90к
, но лето, жара, коплю на отпуск)

📅 Кто не успел - идёт в очередь на осень.

Пишите в ЛС или оставляйте заявку на персональную проверку
1🔥93👍3🎉1🏆1