Загоняем сайт в зелёную зону Google Page Speed Insights: ускорение сайта под 90+ баллов

В ролике делаем 90+ баллов рейтинга для всех версий сайта, заодно узнаем интересные подробности про работу Яндекс.Метрики, Jivosite, Google Analytics.

На этом канале мы создаём максимально полезные видео по вопросам ускорения сайтов, веб-производительности и клиентской, а также серверной оптимизации.
Профессионально занимаясь ускорением сайтов, мы накопили значительный опыт, которым готовы поделиться с нашими зрителями и подписчиками. Так что присоединяйтесь, будет интересно!

[zabolotnov]

Ждем видео "Как пробежать 100метровку в мешком картошки в два раза быстрее" (спойлер - оставить мешок картошки на старте)

[xxFursiKxx]

Как оптимизировать сайт? - Удалить все скрипты. ОК

[demimurych]

Вот кто мне все время подымает настроение, так это видео с этим докладчиком. А тут есть чему порадоваться.
Судите сами:
У докладчика задача: тест оценивающий скорость формирования первой области отображения, дает низкую оценку. Тест сообщает ему причины этой оценки - код который используется на этапе формирования, оказывает фатальное влияние на этапы того самого формирования. Нужно что то делать с этим кодом говорит ему тест.

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

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

Товарищу доблестному оптимизатору невдомек, что те же 90+ балов можно получить не трогая и грамма функциональности исходного проекта. Но только же это очень сложно, голову лечить. Нужно уметь профилировать код, знать особенности работы современных jit машин, знать что умеют современные браузеры...Проще всего этого не знать и вырезать код, то есть голову.

Товарищ доблестный оптимизатор не знает ни что preconnect ни dns-prefetch ничем ему не помогут в таких ситуациях, потому что браузер не успеет их сделать раньше чем код который доблестный оптимизатор доблестно преконектит уже начнет выполняться.

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

А апофеозом всего стало возмущение товарища оптимизатора, что Google не использовал бротли, чем потерял 100 килобайт трафика. Это же безумие какое то. Только товарищ оптимизатор стыдливо спрятал вкладку img на которой изображения весят на порядок больше этих 100 килобайт. Но с ними же возиться надо, гораздо проще рассказать про включение бротли.


Спасибо словом за видео. Это из раздела юмор.

[lwvobfr]

нужно еще было и содержимое страницы удалить, реально помогает)

[amoral]

Заебись способ - выпилить метрику и чат) Это я и сам мог сделать. А что если метрика и чат нужны???

[an.laskevych]

Спасибо за видео! А что делать с метриками и другими аналитиками, если клиент не готов отказываться от них? Может есть какие то хитрости для отложенной загрузки скриптов?

[dmitrir]

Спасибо. А отключение яндекс метрики не влечет уменьшение посещаемости из яндекс поиска?

[nqgvzcb]

Рассказываю что делать с метрикой:

1. функцию ее вызова function(m, e, t, r, i, k, a) копируете себе в код my-script.js
2. ставите setInterval, после события window.onload, например, 3 секунды и потом ее вызываете
3. то же самое делаете с живосайтом и любыми сторонними скриптами, которые вам нужны
3. PROFIT
4. один минус - в интерфейсе metrika.yandex.ru статус сайта будет красным кружком, но метрика все равно будет работать.

===
Еще полезные советы:
1. то что можно делать css делайте css. Старайтесь по-минимуму js-ом влиять на ваш сайт (DOM)
2. оставьте 1 js файл на сайте (в футере), остальные вызывайте из него, как из точки входа, webpack поможет
3. у этого одного js-файла обязательно ставьте атрибуты async defer
4. проинспектируйте его влияние на dom, ваш файл должен как можно меньше парситься браузером и отнимать время процессора

5. попробуйте выдернуть для каждого шаблона critical css (gulp-critical) и инлайнировать его, хотя бы для мобильных устройств - будет пушка-гонка)

[EvgenKrupa]

Интересная тема почему так мало просмотров ?

[Slavec]

Сугубо личный опыт работы позволяет заметить, что нельзя без разбора ставить скриптам async/defer, ибо можно запросто поломать функционал сайта.

[Grigoren_com]

подскажите пожалуйста, вкладка Audits отсутствует. что сделать чтобы она отображалась?

[niktaDW]

Аха-ха, ну на до же, взять и отрубить все что мешает))) прям гениально, а решение где собственно? )) подскажу вам супер способ, ставим "мыльный пузырь" в старт загрузку, если совсем топорно, то попап с сеттаймом ноль и все остальное с 3 000 миллисекунд пусть будет для теста, в попап кидаем джифку и тест типа "мы рады вам или лучший магазин)", туда же код дж нулевый (чтоб ниче не делал сложного(лучше всего типа посчитал и жду), но нужен обязательно) + ксс что то типа покрутить или помигать и все получаем 100% ВАЖНО - заказчику говорим вот, но только так иначе все переписывать, а это почти как новый сайт) ПРОФИТ - денежка, все пашет, ну и минимум кода(работы) который по сути шаблон с заменой картинки и фразы, видео конечно интересное, особенно новичкам, но сути названия совсем не соответствует, загнал в зеленку отрубив живосайт)) аха отрубил то за что платят) убрал тегменеджер, и че скажешь сеошникам, мол ищите шамана? а в остальном молодец, красиво рассказал, норм дикция - но тему знаешь плохо.

[corsairpro]

Ахренеть оптимизация, удалил все скрипты и виджеты и

[modx_pro]

самый дебильный метод - удалите все скрипты = сайт быстрый.
бл)))

[ddqigri]

Бесполезно потраченные 20 минут. Вы кстати не до конца оптимизировали, надо было еще все картинки удалить и текст

[i.am.rossalex]

1. Стоит ли закешировать счетчики на сервере и обновлять их 4-5 раз в день автономно?
2. Может подгрузить счетчики динамически после onLoad?
3. Посоветуйте Free CLI или PHP оптимизатор изображений под Lighthouse, чтобы не ставить себе Google Pagespeed модуль в Apache/Nginx?
4. Как меряется прорисовка первого экрана?
5. Как повлияет на производительность полное вложение скриптов и стилей в код перед /body?
6. Что делать с бэкграунд видео блоком (тег video), без preload, он все равно делает соединение с файлом MP4 и тратит на это 60мс.

Спасибо

У меня, в текущем подопытном сайте, "сетка" и стили первого экрана грузятся в head через defer и async, а остальное грузится в самом конце body. По большей степени, счетчики и всякие чаты и тормозят все.

[dvfkhds]

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

[mistertroll]

Николай, хорошие ролики. Вот и этот начал смотреть. Но, немного отвлекает выраженное косоглазие. У всех людей есть ракурсы с которых они выглядят лучше, в вашем случае это в 3/4, как во многих прошлых роликах — комфортней когда вы смотрите вбок. Либо можно попробовать носить декоративные оправы для очков, без диоптрий. Простите если мои предложения неуместны.

[whataboutism]

Зачем разрабатывать сайт, можно просто оставить пустой html и оптимизация будет 100%. инфа 100

[Slavec]

Ну и самым хорошим, что можно сделать для оптимизации - сократить время отклика сервера до минимума