Перейти к содержимому
Технологии IT обновлён 24.06.2022

perfScan - секреты быстрых сайтов

PerfScan: ускоряем ваши сайты!

Мы — команда экспертов по web performance. Делимся секретами создания быстрых сайтов и оптимизации уже существующих. Поможем ускорить работу вашего ресурса.

Публикации канала

Готовь сани сайт летом! 🚨 3 сайта на аудит скорости. Потом - всё, я в горах. - Предложение действует до 4.07 - Только 3 проекта - Только для тех, кто реально хочет разогнать свой сайт 📊 Что будет в аудите: - Вы получите готовую инструкцию для разработчиков - с примерами, приоритетами и конкретным кодом для внедрения - Детальный и подробный аудит работы сайта - Обязательная проверка внедрения рекомендаций из аудита 💸 Цена: 63 000₽ (-30%) (Обычно 90к, но лето, жара, коплю на отпуск) 📅 Кто не успел - идёт в очередь на осень. Пишите в ЛС или оставляйте заявку на персональную проверку

Открыть в Telegram

Осталось 2 места и 4 часа до конца скидки на консультацию. Навязчиво напоминаю. Записаться тут: @fenixru UPD: На консультацию записались 4/5. Акция закрыта.

Открыть в Telegram

Всем привет! Хотите горячей летней новости? Держите: скидка 30% на личную консультацию! Подготовь свой сайт к окончанию сезона отпусков. До пятницы готов взять ПЯТЬ счастливчиков на консультацию по ускорению сайтов. 💵 Стоимость - 3 500 рублей/час, минимум два часа. Вся консультация обойдётся в 7 000 рублей (вместо 10 тысяч): Как это будет: 1 час: я сажусь, гоняю ваш проект в браузере с троттлингом, профайлингом и ручным дебагом, разбираюсь, что нужно улучшить; 1 час: видеосозвон, где чётко и без воды объясняю: - что тормозит - почему тормозит - как исправить - куда копать дальше 🔥 Подхожу к задаче как к своему проекту. Цель - чтобы вы реально увидели рост по Web Vitals, а не очередную абстракцию из PageSpeed. 🚫 Не беру сайты на конструкторах: Tilda, Wix и прочие - неинтересно. Только там, где можно залезть и переписать код. 📆 Успеть можно только до пятницы. Потом ныряю обратно в большие проекты. 📬 Кому нужно - пишите в личку: @fenixru

Открыть в Telegram

История одной печеньки или как GDPR отправил LCP в космос Мы используем Cookie. Та самая плашка на полэкрана с вечным посланием: «Мы тут собираем данные, но вы держитесь». Казалось бы, чем она может навредить скорости сайта? Обратился ко мне маркетолог одного довольно крупного сайта. Жалуется: «LCP чудовищный, сайт «по метрикам» грузится медленно, хотя по ощущениям вроде всё шустро». Ну, классика. Окей, думаю, сейчас найдём какую-нибудь отложенную картинку на первом экране или видео - ну то, что браузер назначил LCP-элементом. Но не тут-то было. LCP-элементом оказался... 🥁 cookie-баннер. И не просто <div> в коде, а целый адский завод: вставка идёт через сторонний сервис - такой, знаете, «всё по фэншую GDPR», с пикселями, метриками, галочками и ритуальными жертвоприношениями, которые активируются только после согласия пользователя. А теперь внимание: - Скрипт подключён через defer (то есть «когда-нибудь потом запустится»), - Грузится со стороннего домена (привет, +1 установка соединения), - Под нагрузкой отдаётся 2+ секунды (если сервер в настроении), - Исполняется секунды через полторы, когда браузеру уже скучно. И что делает браузер? Он говорит: «О, новый большой элемент! Будешь LCP!». И LCP (улетает в космос): 12 секунд. Хотя весь остальной контент давно отрисован. Что делаем: - Грузим скрипт только по первому действию пользователя: хоть скролл, хоть клик по экрану, хоть удар головой по клавиатуре, - Постепенно переезжаем на локальное решение. Контроль - это скорость. Итог: Прямо во время консультации даю пример отложенной загрузки js по первому действию пользователя. Разработчику ставят задачу, он делает загрузку скрипта по ивенту - и LCP падает с 12 до 3 секунд. Прямо во время созвона. Почти магия, только без шляпы, кролика и вне стен Хогвартса. Вот такие вот печеньки. 💬 А какой самый необычный LCP элемент вы видели на сайте? 👍 Лайк, если пошел проверять свой сайт и конкурентов. ✍️ Запишись на консультацию 🚀 Поддержи канал донатом

Открыть в Telegram

🚀 Друзья! На канале perfScan давно не было новых публикаций. Причина простая и очень банальная: на качественный контент нужны время и ресурсы. Я могу в ChatGPT писать посты каждый день, как делают 90% каналов, но хочется все делать с максимальной пользой и через призму моего опыта - вы и сами знаете, что я сильно задрал планку качества публикаций. Я хочу вернуть регулярные разборы, гайды и обновления, мне совершенно точно есть что сказать, но для этого мне нужна ваша поддержка, и что самое главное - уверенность, что это кому-то нужно. ⚠️ Если вам важна тема ускорения сайтов и вы хотите видеть развитие канала - поддержите проект донатом. ➡️ Поддержать можно здесь: https://pay.cloudtips.ru/p/4ad68fa9 Ваша помощь даст возможность выпускать больше контента и сделать этот канал снова активным и полезным пространством для всех, кто ценит скорость. 👍 - если перечитывал посты и плакал, как и я

Открыть в Telegram

Всем привет! С Новым годом! Завтра в 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 году. YouTube Аудит скорости загрузки ваших сайтов - часть 8 Как ускорить скорость загрузки своего сайта? Что влияет? На что нужно обратить внимание в первую очередь, а что вторично? Смотрите вебинар Антона Белогородцева. ✍️ Форма для сбора сайтов для аудита: https://docs.google.com/forms/d/e/1FAIpQLSeHUo…

Открыть в Telegram

Привет всем! Завтра в 13:00 я буду выступать на АспроSearch — SEO-конференции от компании Аспро. В своем докладе я расскажу о том, как работает PageSpeed, как интерпретировать его данные и почему пейджскор вашего сайта именно такой. Кроме меня на конференции выступят и другие докладчики, но в другие дни. Приходите, это будет полезно. Подробнее про АспроSearch можно узнать на сайте. Зарегистрируйтесь через чатбот, чтобы вовремя получить напоминание, ссылку на трансляцию, материалы и записи. aspro.ru АспроSearch интенсив Аспро оказывает услуги по созданию сайта, корпоративные порталы, продвижение сайта в Челябинске

Открыть в Telegram

Если вы смотрели мои эфиры, то наверняка видели мой сервис, который выводит исторические данные Web Vitals из базы Chrome UX Report. Если что - ➡️он здесь⬅️ Так вот, совсем недавно я его сильно обновил, добавил общие рекомендации по каждому параметру, вывел общую оценку производительности, чтобы с первого экрана было все ясно, и теперь польза этого сервиса, как мне кажется, повысилась на порядок. В рекомендации попали все советы, про которые я много раз писал здесь и говорил на каждом из своих эфиров. Если я что-то упустил, давайте вместе добавим и доработаем сервис, чтобы он стал еще полезнее. Также добавил максимум ссылок на этот канал (если перебор — тоже пишите, удалю лишнее, может и правда переборщил). Так вот, на сегодня есть несколько проблем у этого сервиса: 1. У молодых сайтов и сайтов с небольшим трафиком нет данных в Chrome UX Report и многие получают заглушку, мол, нет данных, и уходят. Как думаете, что с этим можно сделать? 2. Для Chrome UX Report сайты с www и без www являются разными, ровно как и http/https. Таким образом, необходимо, чтобы пользователь правильно вводил данные. Так как бэкенда тут как такового нет, а все запросы летят напрямую в Chrome UX Report, то на лету сложно преобразовывать, следовать редиректам и проверять сертификаты. Как думаете, писать ли свой бэкенд, или и так норм? 💬 Очень жду ваших советов и мнений относительно вышесказанного. 🔥 И дайте огня, если сервис полезный!

Открыть в Telegram

Всем привет! Завтра в 15:00 по МСК я снова проведу разбор ваших сайтов на канале Михаила Шакина. С меня советы по улучшению быстродействия и загрузки, с вас реакции. 📺 https://www.youtube.com/watch?v=ztQl0eTw4qw Чтобы отправить ваш сайт на разбор, оставьте заявку в форме https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии укажите, что вы с канала @perfScan. Также в комментарии можете указать на конкретную проблему на которую хотите обратить моё внимание. Приходите на прямой эфир, отвечу на любые ваши вопросы по ускорению и улучшению производительности ваших сайтов. YouTube Аудит скорости загрузки ваших сайтов - часть 7 Что сделать для ускорения скорости загрузки сайта? Как правильно оптимизировать картинки и видео? Что делать со скриптами? Cмотрите мастер-класс Антона Белогородцева. ✍️ Форма для сбора сайтов для аудита: https://docs.google.com/forms/d/e/1FAIpQ…

Открыть в Telegram

Всем привет! Я жив, почти здоров, и завтра в 15:00 по МСК на канале Михаила Шакина я разберу ваши сайты и отвечу на вопросы по ускорению сайтов. Кстати, если хотите пригласить меня к себе, делайте как Михаил - просто пишите мне ) 📺 https://www.youtube.com/watch?v=IxshIqTFhm4 Чтобы отправить ваш сайт на разбор в прямом эфире оставьте заявку в форме https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии укажите, что вы с телеграм канала @perfScan. Также в комментарии можете указать на конкретную проблему на которую хотите обратить моё внимание. YouTube Аудит скорости загрузки ваших сайтов - часть 6 Как ускорить скорость загрузки сайта? Что ее замедляет? На что нужно обратить внимание в первую очередь, а что вторично? Смотрите вебинар Антона Белогородцева. Telegram канал Антона: https://t.me/perfScan Антон в Telegram: https://t.me/fenixru Сервис…

Открыть в Telegram

Всем привет. С Новым годом! 🎄 Как проходят ваши праздники? Давайте завтра в 15-00 по МСК проведем время с пользой для ваших сайтов. Михаил Шакин пригласил меня к себе на канал, чтобы разобрать сайты подписчиков на предмет скорости загрузки и быстродействия. ▶️ https://www.youtube.com/watch?v=mvTi4JzcF5M Разберем, что можно улучшить на ваших сайтах, дадим советы, которые вы сможете внедрить на своем сайте, и сделать его быстрее. Чтобы отправить ваш сайт на разбор в прямом эфире оставьте заявку в форме https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии укажите, что вы с телеграм канала @perfScan. YouTube Аудит скорости загрузки ваших сайтов - часть 5 Что сделать, чтобы сайт быстро загружался? Что может замедлять скорость его загрузки? Как правильно оптимизировать скрипты и картинки? Смотрите вебинар Антона Белогородцева. Telegram канал Антона: https://t.me/perfScan Антон в Telegram: https://t.me/fenixru…

Открыть в Telegram

Привет всем. Завтра в 15-00 по МСК я проведу разбор скорости сайтов подписчиков на канале Михаила Шакина. Дам советы по улучшению и конечно подведу итоги года, и отвечу на все ваши вопросы. Да, и расскажу кое-что про новогодние украшения сайтов. https://www.youtube.com/live/Ku6r1XWQTdU Приходите, будет интересно, а если хотите, чтобы я разобрал ваш сайт, оставляйте заявку в форме https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии пометьте, что вы с телеграм канала @perfscan YouTube Аудит скорости загрузки ваших сайтов - выпуск 4 Как ускорить скорость загрузки сайта? На что надо в первую очередь обратить внимание? Как правильно оптимизировать картинки и скрипты? Как улучшить Core Web Vitals? Смотрите вебинар Антона Белогородцева. ✍️ Форма для сбора сайтов для аудита: https:…

Открыть в Telegram

Привет. Завтра 10 ноября снова буду в эфире на канале у Михаила Шакина, где буду анализировать сайты и давать советы по улучшению. https://www.youtube.com/watch?v=klG1LDhlNU0 Приходите, кто хочет получить бесплатный разбор своего сайта. Главное - отправьте ссылку на сайт заранее через форму https://docs.google.com/forms/d/1pGnpcZaqMJhOYhhue3pITh1vFBoXyZOrYZPI_9S_oPY/edit в комментарии пишите, что вы с канала @perfScan YouTube Аудит скорости загрузки сайтов - часть 3 Как эффективно ускорить скорость загрузки сайта? Что надо улучшить в первую очередь? Как узнать, что замедляет скорость загрузки страниц? Смотрите вебинар Антона Белогородцева. 👉 Предыдущие вебинары с Антоном по аудиту скорости загрузки сайтов: ht…

Открыть в Telegram

Привет. В комментариях просили заранее анонсировать подобные эфиры. В пятницу, 6 октября, я вновь приглашен на прямой эфир к Михаилу Шакину, где буду разбирать скорость загрузки сайтов и давать рекомендации по ним. https://www.youtube.com/watch?v=zyu19xiJRqA Кто хочет — приходите, разборы бесплатные, только заранее отправьте свой сайт по ссылке: https://docs.google.com/forms/d/e/1FAIpQLSeHUoQwRsGvJut5HxIOM0YCu-QExtKO82mfv0dViP6BFJ3icA/viewform Отправляя, напишите, что вы с этого канала в комментарии. Кстати, можно и вопросы во время эфира задавать. P.S. Эх, как же хочется продолжить писать на канал. Пишите в комменты к этому посту, кто хотел бы тут видеть не только мега полезные посты но и рассуждения/истории по теме канала. YouTube Анализ скорости загрузки сайтов - часть 2 Что замедляет скорость загрузки сайта? Что нужно оптимизировать в первую очередь, чтобы страницы быстро загружались? Какие еще есть ошибки в плане скорости? Смотрите вебинар Антона Белогородцева. Смотрите предыдущий вебинар с Антоном: https://www.…

Открыть в Telegram

Привет всем. Сегодня буду разбирать скорость сайтов на канале Михаила Шакина и давать общие рекомендации по ним. https://www.youtube.com/watch?v=FYAS6Al8oFI Кому интересно - приходите, все бесплатно и можно никуда не подписываться. Свой сайт на разбор можно отправить по ссылке: https://docs.google.com/forms/d/e/1FAIpQLSeHUoQwRsGvJut5HxIOM0YCu-QExtKO82mfv0dViP6BFJ3icA/viewform Если понравятся разборы, можно будет повторить.

Открыть в Telegram

Дорогие топовые фронтендеры, сегодня пост не для вас. Так как вы используете системы сборки и с такой проблемой почти никогда не сталкиваетесь, а в опросе вы выбрали вариант про 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 и ничего не сломать на сайте. Да, поддерживать такой код невозможно, поэтому нужно сделать так, чтобы вся работа происходила на бакенд и разгрузить фронт, улучшив первую отрисовку. 🔥 Дайте огня, если было полезно, или 👍 палец вверх, если уже использовал данный метод. 💬 Коммент, если хотите поддержать автора и улучшить его код.

Открыть в Telegram

Привет!Есть два поста: про безболезненный defer всего js в старом legacy проекте, и про сервис для получения исторических данных Core Web Vitals из Chrome UX Report. Какой опубликовать в понедельник? Anonymous Poll 65% - Про defer всего js 35% - Про исторический Core Web Vitals

Открыть в Telegram

👋 Многие из вас просили меня сделать слайдер, который не будет менять DOM и вызывать перерисовку при инициализации. Я и сам давно обещал вам такой слайдер, очень давно, даже стыдно, но все никак не мог добраться до него. Поэтому я решил попросить помощи у (внезапно) Bing, который работает на GPT-4, и… получилось нечто невероятное! Благодаря множеству уточнений и итераций, Bing написал за меня почти весь код, который работает как мне хотелось и выглядит вполне прилично. Это не готовая библиотека, конечно, но для одного слайдера на странице вполне подходит, и его можно адаптировать под свои нужды. Я намеренно не стал приводить стилистику кода к единому формату, чтобы можно было видеть еще и результат работы нейросети. Я лишь немного подправил оформление точек под слайдером, общий layout, прописал url для картинок и добавил заголовок и футер. Все остальное - заслуга нейросети. Я уже пробовал ранее использовать Bing и ChatGPT для написания кода, но такого успеха еще не было. Я потратил 10 минут, писал только запросы с телефона, при этом сам не писал код, а говорил что и как улучшить. Почти как в повседневной жизни, где я консультирую команды и даю рекомендации по улучшению быстродействия сайтов. В итоге мы имеем слайдер, который полностью соответствует моим требованиям, не меняет DOM и не вызывает перерисовку при инициализации, и даже частично работает без JS. Это ли не чудо? ) ✅ Ссылка на код слайдера. Если кто-то захочет - можете улучшить его и упаковать в универсальную библиотеку, если пришлете ее мне - я с радостью расскажу о ней. 🔥 Зажгите огонь для Bing, или 👍 палец вверх за мои запросы и уточнения ) 💬 Напишите в комментариях, что вы думаете об этом слайдере и о Bing конечно же.

Открыть в Telegram

⚡️ Хорошая новость для всех, кто заботится о скорости работы своего сайта, и для всех, кто не может отказаться от счетчика Яндекс-Метрики, но проблемы с производительностью возникают именно в нем. Код подключаемого бандла теперь opensource. Что это значит? По ссылке доступен исходных код и правила для сборки кода бандла Яндекс-Метрики. Даже просто отключив поддержку очень старых браузеров и разместив его у себя, мы получим улучшение быстродействия. Дерзайте, я тоже проведу эксперименты со своей стороны. Подробнее в статье на хабре, там описано как работает код, что можно менять, и как отключить ненужные функции. ⚠️ Обратите внимание, запросы отправляются к яндексу, поэтому еще одно соединение никуда не денется. Чтобы от него избавиться на клиенте, рекомендую использовать проксирование, о котором я писал ранее. 💬 Что думаете по этому поводу? Будете ли использовать собсвтенную сборку или останетесь на стандартном бандле, подключаемом с серверов Яндекса? 👍 Палец вверх, если вы уже подключаете свою версию метрики в основной бандл.

Открыть в 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? 🔥 Дайте огня за оперативность.

Открыть в Telegram

Комментарии

0

Комментарии пишут вошедшие — так видно, кто автор.

Войти

Комментариев пока нет

Будьте первым, кто расскажет о канале другим.

Пожаловаться на канал

Расскажите, что не так: модератор проверит канал и примет решение. Подпись не нужна, но почту можно оставить — тогда ответим.

Причина Что не так (необязательно) Почта для ответа (необязательно)
Открыть в Telegram