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

[@zabolotnov]

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

[@demimurych1]

Вот кто мне все время подымает настроение, так это видео с этим докладчиком. А тут есть чему порадоваться. Судите сами: У докладчика задача: тест оценивающий скорость формирования первой области отображения, дает низкую оценку. Тест сообщает ему причины этой оценки - код который используется на этапе формирования, оказывает фатальное влияние на этапы того самого формирования. Нужно что то делать с этим кодом говорит ему тест. Докладчик, руководствуясь отчетом, *вместо исправления кода и его проблем* доблестно вырезает из сайта проблемный код и рапортует - я сделал. Это простите как лечить головную боль ампутацией головы. Товарищу доблестному оптимизатору невдомек, что те же 90+ балов можно получить не трогая и грамма функциональности исходного проекта. Но только же это очень сложно, голову лечить. Нужно уметь профилировать код, знать особенности работы современных jit машин, знать что умеют современные браузеры...Проще всего этого не знать и вырезать код, то есть голову. Товарищ доблестный оптимизатор не знает ни что preconnect ни dns-prefetch ничем ему не помогут в таких ситуациях, потому что браузер не успеет их сделать раньше чем код который доблестный оптимизатор доблестно преконектит уже начнет выполняться. Товарищ доблестный оптимизатор не знает, что аналитика с таг менеджером (уродливые продукты тут не поспоришь) могут выполнять свои функции так же хорошо если использовать их апи, а не подобно человеку который впервые видит код, вставлять предлагаемый аналитикой сниппет в страницу. А апофеозом всего стало возмущение товарища оптимизатора, что Google не использовал бротли, чем потерял 100 килобайт трафика. Это же безумие какое то. Только товарищ оптимизатор стыдливо спрятал вкладку img на которой изображения весят на порядок больше этих 100 килобайт. Но с ними же возиться надо, гораздо проще рассказать про включение бротли. Спасибо словом за видео. Это из раздела юмор.

[@iamanangel9178]

Здавствуйте! Вы можете, пожалуйста, поделиться своей библеотекой по работе с Yandex метрикой? Метрика руинит всю производительность, создает дикую нагрузку на CPU, а заказчик не хочет ее убирать(это конечно его проблема, у всех свои приоритеты). Пока не вижу других вариантов, кроме как. Мой telegram @frankmono

[@demimurych1]

@@iamanangel9178 По некоторым причинам я перестал распространять этот код. В принципе его еще можно найти при усердном гуглении, НО прежде чем его использовать попробуйте следующее: *1* Никто, ни яндекс ни гугл не говорил, что для работы их метрик нужно запускать их скрипты так быстро как это возможно. Это можно делать с отсрочкой хоть в месяц (большой превед мифотворцам о поведенческих факторах) . Представляете? Все что нужно это отослать запрос с собранной статистикой согласно определенному инструментом протоколу. _Преимущества_ способа очевидны: ненужно активировать их скрипты, не нужно думать о оптимизации _Недостатком_ способа является тот обьем ручной работы, который придется проделать в случае, если менеджеры через административную часть напридумывают очень много карйне нужных им правил, которые придется реализовать руками. *2* можно сделать ход конем, и сделать обертку воркуг их же скрипта. Суть идеи заключается в том, что условно при первом запуске их скрипта, через какоето время когда он отработает, код страницы будет иметь все необходимые маркеры от их скрипта, которые и формируют статистику. И снять эти маркеры не такая уж и сложная задача. После чего, при втором запуске страницы, уже не стартовать их скрипт, но стартовать неокоторый собственный кеш, который собрал все необходимые маркеры. *3* если подходить к оптимизации совсем совсем серьзено, и при этом приоритет задач метрики поставлен выше всего остального, то - очевидно что вы должны будете убрать всю нагрузку какую только возможно, чтобы формирование первой области отображения было как можно быстрее. Это и загрузка лишних ресурсов: изображений, шрифтов, скриптов, css кода, бэкграундов и т.д. Справившись с этой задачей, вы обнаружите что получили очень большой запас по времени, и что стортавав метрику в этот момент, она начнет получать данные даже точнее чем это было ранее. Очевидным недостатком этого метода является глубокое понимание процесса, которое может потребоваться для особо запущенных случаев.

[@xxFursiKxx]

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

[@NickLavlinsky]

Это ролик не про оптимизацию сайта, а получение баллов в GPSI - это разные вещи.

[@xxFursiKxx]

@@NickLavlinsky оптимизация скорости загрузки сайта подразумевается, ну понятно же

[@NickLavlinsky]

@@xxFursiKxx Нет, вы невнимательно смотрите ролики. Наше отношение к GPSI подробно рассмотрено в нескольких видео, смотрите и всё поймёте.

[@xxFursiKxx]

@@NickLavlinsky не принимайте близко к сердцу) просто такая мысль при просмотре возникла. Не всегда есть возможность отключить тот или иной скрипт в угоду показателям

[@admil7]

Суть не в слове оптимизировать, а в слове Удалить

[@РегулусБлек]

Рассказываю что делать с метрикой: 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) и инлайнировать его, хотя бы для мобильных устройств - будет пушка-гонка)

[@NickLavlinsky]

И тем самым вы ломаете половину функционала Метрики. Не проще ли вообще её выкинуть?

[@РегулусБлек]

справедливо будет сказать, что метрика все-таки некоторым нужна карты скроллинга, кликов, записи вебвизора, отчет по страницам входа - все работает в качестве пруфов вот сайт, где я делал почти все, о чем говорю: piter.limberi.by

[@NickLavlinsky]

@@РегулусБлек Если метрика важна, то безусловно её нужно оставлять и не мешать её работе (не откладывать запуск). Если не важна и важны метрики типа TTI - срываем. Если вы откладываете инициализацию виджета, она всё равно произойдёт, нагрузка на CPU клиента придёт. Вы просто обманываете конкретный алгоритм вычисления TTI в GPSI. Зачем?

[@РегулусБлек]

Ну, подумаешь схитрил чутка, зато и цифры зеленые и метрика есть. Вы-то вообще не предложили альтернативы)

[@NickLavlinsky]

@@РегулусБлек Предложил - оставить как есть. Смысл ускорения состоит не в зелёных цифрах, а повышении удобства пользования сайтом.

[@autogrape-3256]

как что делать, ничего не показал.

[@NickLavlinsky]

Что именно интересует?

[@Grigoren_com]

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

[@NickLavlinsky]

Посмотрите в настройках DevTools

[@blademan-5]

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

[@NickLavlinsky]

Отказываться от GPSI. Скрипты и так отложенные (запускаются в асинхронном режиме). Проблема в том, что они слишком активно грузят CPU в процессе работы.

[@AndrewMarsin]

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

[@Алексей-псевдоним]

@@NickLavlinsky эта метрика влияет на положение сайта в выдаче, для этого многие и задуряются как ни странно

[@NickLavlinsky]

@@Алексей-псевдоним Нет, вы заблуждаетесь. На ранжирование влияет реальная скорость сайта у пользователей, а не пузомерка GPSI, посмотрите наши ролики про GPSI, где мы читаем документацию. То же относится к рейтингу скорости в рекламе Google Ads.

[@КсенияБойкова-м5ь]

Информационная и техническая поддержка на высоком уровне здесь neoseo.com.ua/google-page-speed-opencart. Рекомендую!

[@dmitrir5529]

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

[@NickLavlinsky]

Да нет, по крайне мере не должно.

[@ИванИванченко-ъ8э]

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

[@NickLavlinsky]

И сайт удалить, домен разделегировать.

[@Slavec5]

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

[@NickLavlinsky]

Ваш личный опыт подтверждают основы работы JS в браузере.

[@tarnament1989]

Что такое приконект к хосту? 22:25

[@NickLavlinsky]

rel="preconnect", подробнее здесь: kzbin.info/www/bejne/aIewenmgjLZ0hMU

[@olegstogov1589]

Превосходный материал! Спасибо!

[@amoral3]

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

[@NickLavlinsky]

Не выпиливать.

[@super_snejinka]

@@NickLavlinsky :))

[@Dmitry-lq3bc]

Спасибо за полезный выпуск!

[@СергейПресняков-о4р]

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

[@NickLavlinsky]

Сочувствую

[@niktaDW]

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

[@NickLavlinsky]

Да, ты видимо не понял, что все твои метания не имеют смысла, кроме обмана клиентов.

[@niktaDW]

@@NickLavlinsky В чем обман? появился загрузочный экран, который хитрой манипуляцией имитирует голимому инструменту от гугла нужный результат, зеленка есть - есть, ниче не отрубал, никакие плагины не трогал не устанавливал, все как работало так и работает, страница живая, не все по нулям (всякие ксс, дом, джс и тд. есть), а давай ответим еще и себе честно, как тебе политика гугла, запилили нечто, которое ни черта по факту не меряет, а тупо работает по шаблону, если соответствует то ты в шоколаде, если нет иди гуляй, нормальный проект (сложный) в принципе честно не вывести в зеленку, потому как он просто сломается и это - ФАКТ, ну и где здесь честность, почему нет шкалы например сложности ресурса а? то есть им можно плевать а нам нет, так что ли? ведь по совести да и по математике это абсурд, но им можно, если слишком совестный вот тебе способ красивее: сделай страничку загрузчик, идеальную для аудита(логотип и еще ченить чтоб набить нужное(меню к примеру:)_), и добавь ее для показа ихнему агенту, в шапку пхпиндекс и все, ну есть у тебя такой загрузочный экран и что, имеешь право, а то что он не вызывается никогда кроме как для агента, так это просто твое желание, ты же имеешь право делать что хочешь на своем сайте, а теперь про обман - твое видео называется “Загоняем сайт в зелёную зону Google Page Speed Insights: ускорение сайта под 90+ баллов” и вот это обман, ибо НИЧЕГО ты не загнал и ничему не научил, показал как пользоваться панелью хрома и все, я вообще искал для своей группы ролик (учу молодежь помаленьку), чтобы разобрать способы, и что я могу показать на примере твоего видео? - как найти то что грузит и отрубить? вот это есть, а того что в названии нет, так что о честности и обмане надо начинать с себя.

[@NickLavlinsky]

@@niktaDW Обман здесь в нескольких вещах. Во-первых, вместо того, чтобы ускорить сайт ты делаешь его медленнее. Во-вторых, не объясняешь, что на самом деле эта оценка никак не влияет на SEO, скорость сайта оценивается другим способом. В результате тебе платят деньги за торможение сайта и ухудшение показателей. А инструмент вполне нормальный, нужно только уметь им пользоваться.

[@niktaDW]

@@NickLavlinsky делаю медленнее? для кого? для гугл инструмента? который в принципе оценивает не скорость), а что он оценивает то, вот тебе как? что он оценивает? как по мне то тупо соответствие шаблону который на их взгляд правильный и универсальный для все:) тебе не смешно? и что делает его медленнее, твое копание и компоновка того что в принципе лучше не трогать в нормальных проектах, когда после компоновки все отваливается и плывет, или - утрированно - фрейм оптимизированный для робота - который видит только робот? по твоему - бочка меда - делает сайт медленнее? не влияет на сео? да это я и ты понимаем, а заказчик нет, ибо есть вот от ГУГЛА блин и надо чтоб в зеленом мне, ХАЧУ и УМНЫЕ сказали НАДО, ты вообще о чем, загрузчики работали и работают уже не первый год, и ничерта с этим гугл не сделает, потому как там шаблон, и пока нормально не сделают так и будет, старый инструмент почему убрали? потому что топ-10 в 99/100 это загрузчики для роботов, и этот их спид начхать всем было, и сейчас так же, только (неопытных заказчиков разводить), и по поводу не влияет, ща как запилят статус, мол это медленный сайт, как анонсировали, вот тогда и взвоют:) а по поводу реально быстрее, то тут ничего общего с этой пузомеркой от гугла, я если про комфорт для пользователя, инструмент нормальный, я даже за это и похвалил, в первом сообщении в самом начале, мол мануал по инструменту норм, там реально все что нужно для 999 случаев из 1000 есть, я о сути, несоответствия названия ролика и его содержания, супер, пришел человек, посмотрел твой ролик, и сделал заказчику так: - убрал все виджеты джаберов; - убрал тегменеджер и обрезал аналитику в хлам; - собрал все в 1джс, по ходу сломав кучу всего (типа калькуляторов или динамики, мы ведь про нормальный проект, а не о статическом лендинге на чистом хтмл:)_) - ой а тут оказывается битрикс или пром или еще ченить что по твоему мануалу вообще не решить никак; - и ой, ой, ой, ой и тд. сам сколько такий ой насчитаешь? супер человек все сделал, ну и как оценишь его труды? или теперь мой вариант: - слепил простенький но грамотный хтмл; - закинул его в корень сайта; - прописал правило для роботов (типа бочки меда, утрированно) в индекспхп (+ добавил чутка в .htaccess если совсем уж делать правильно, может кто прочитает наш диспут да и поймет суть:)_); - получил зеленую зону; - все !!! ничего не трогал, не сломал, не добавил или убрал, не лез никуда в дебри, потратил час времени, что он уменьшил в скорости сайта и для кого? ps другое дело что таким не делятся, потому как учат дебрям и я так учу:), просто иногда находит

[@egorgorbachev]

о наконецто видео вышло

[@NickLavlinsky]

И это ещё не всё...

[@modx_pro]

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

[@ИгорьКаменев-и7м]

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

[@NickLavlinsky]

Таким мы не занимаемся, в отличие от некоторых...

[@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. По большей степени, счетчики и всякие чаты и тормозят все.

[@NickLavlinsky]

1. Думаю - нет, разработчики счетчиков это строго не рекомендуют. 2. Уже обсуждалось в комментах к этому видео, посмотрите. Кратко - нет. 3. Не знаю такого, есть куча сервисов, например, наш - fotorubka.ru. 4. Имеется в виду FMP? Есть в документации Google по метрикам LH. 5. Скриптов обычно хорошо, стилей - не надо. 6. Не понял, в чём вопрос.

[@corsairpro927]

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

[@NickLavlinsky]

Да, это самое эффективное - избавиться от лишнего кода.

[@whataboutism3387]

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

[@NickLavlinsky]

Да! Самый быстрый сайт: about:blank :-)

[@whataboutism3387]

@@NickLavlinsky Как говорил Сталин: "Нет кода - нет проблем" 😀

[@EvgenKrupa]

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

[@mistertroll0000]

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

[@NickLavlinsky]

Хорошо, постараемся учесть. Но вообще я не фотомодель, чтобы на меня смотреть. Больше смотрите на скринкаст и слушайте.

[@NickLavlinsky]

@@mistertroll0000 Если вас не беспокоит TTI, то можете не заморачиваться и оставить их на сайте. Здесь речь о конкретной реализации метрики конкретным инструментом и от чего она зависит. Не исключаю, что в ближайшее время выйдет новая версия LH и там методика измерения изменится. Никогда не стоит зацикливаться на одном инструменте или метрике. Нужно включать голову и всё будет хорошо.

[@mistertroll0000]

@@NickLavlinsky спасибо. Ещё в lh есть руководство включить шрифты так чтобы не блокировать рендеринг текста пока не загружены. Я какие настройки font-load не пробовал, всё равно ругается. Как правильно надо? И второй вопрос, в новых версиях хрома есть новый coverage tool, показывает неиспользованный css, js, в пределах страницы. Как бы собрать данные по всему сайту (хотя бы потыкать нужные страницы руками), чем вы пользуетесь?

[@NickLavlinsky]

@@mistertroll0000 Для шрифтов называется font-display (kzbin.info/www/bejne/ZpXVm3euf8aee7s). Даже если всё правильно, может ругаться. Ибо: kzbin.info/www/bejne/pYnWm56Ejtaig5o По coverage простых ответов нет. Потому что используемость кода нужно оценивать динамически (кликать, открывать слои и т.д.)

[@mistertroll0000]

@@NickLavlinsky пробовал и font-display: fallback;и auto. Ну видимо баг лх. Coverage, да, я хочу потыкать вручную несколько страниц с наведением мыши, аяксами и т.п, пока начал делать инструмент который постраничные отчёты суммирует в один. Но это не оптимально имхо. Почему хром сам не может, не понятно. В ff когда-то был плагин dust me selectors. Но канул в Лету и не умел аякс и ховер

[@Slavec5]

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

[@NickLavlinsky]

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

[@ЧёрныйВорон-у3ф]

это технический директор? ойойой

[@NickLavlinsky]

Ага!

[@Cofeboom]

Вы чё умничаете? По русски и по человечески простым языком можете? Дизлайк вам!!!

[@NickLavlinsky]

Спасибо! Пишите еще!