Алексей Махметхажиев

Хороший вопрос от автора.
Правильный ответ примерно такой:

Работать над оптимизацией внешних подключений важно. Асинхронность по умолчанию должна быть, но она не спасает от перегрузки основного потока.
У нас на проекте стоит не только Яндекс Метрика, Гугл Аналитика, пиксель ФБ, пиксель ВК, но и Hotjar и utmstat и они совершенно не мешают ничему. Подключать всё надо грамотно, откладывая по времени и по событиям. Если событие наступило, то счетчик времени отключается. Важно найти то время, на которое откладывать скрипт. Чтобы не поехали цели в метрике или в GA. Следите за приоритезацией загрузки, чтобы всё осталось в рабочем состоянии, но не влияло на скорость загрузки.

Подробно, как правильно подключать внешку, мы показывали с этой минуты: https://youtu.be/_3c0aPSkNdc?t=1480.
Там же есть пример скрипта обработчика.

Алексей из loading.express

Тут в меньшей степени влияют внешние скрипты.
DOM меняется при помощи JS. Это точно не идет в плюс скорости.

Нужно сделать так, чтобы внешнее отображение не зависело от выполнения скриптов.
Для улучшения LCP картинку первого экрана добавить в прелоад.
Для уменьшения CLS все объекты первого экрана отрисовывать сразу.

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

Мы тут изучали конструкторы сайтов, включая Тильду.
Замерили сайты самих конструкторов, смотрели сайты клиентов на конструкторах и пришли к мнению, что не все конструкторы одинаково полезны.
Несмотря на то, что Тильда так и творит эти супер медленные сайты, в то время как Флексби или Креатиум уже пилят быстрые лендинги на том же конструкторе, у Тильды можно сделать и быстрый сайт. Одноэкранник,))

https://vc.ru/services/106083-mogilnaya-versiya-sa...

Три года прошло, виджеты предложенные уже не работают.
Пока есть такой виджет для сайта: https://widget.loading.express.
Но работает он на сайте до кнопки проверить, потом перебегает на результаты проверки.
Мы зашили туда партнерскую программу и можно получать неплохие проценты.

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

Визуально сайт и правда загружается быстро. Это всё First Contentful Paint.
Дальше выполняются JS и тут уже показатели не такие уж и быстрые.
Замерял через сервисы его скорость. Взял три. Два из Европы и один из России замеряет.
Вот ссылки на отчеты, глянуть. Скриптов там офердофига, думаю можно с ними поработать для скорости еще выше.

GPSI (Европа) — https://developers.google.com/speed/pagespeed/insi...
loading.express (Россия) — https://loading.express/?test_id=5f3018233fb0282f7...

В целом — молодцы! Аудитория сайта должна получать быстрый и отзывчивый сайт.

Сайт на WordPress, поэтому все рекомендации будут относительно этой CMS.

1) Установите Autoptimize и включите группировку стилей и поставьте галочку все стили поместить inline в код страницы. Тоже самое с JS, если посыпятся ошибки, то JS можно будет отключить. В этом же плагине используйте отложенную загрузку изображений на самой последней вкладке.

2) GoogleMaps нужно отложить, и показывать только в момент, когда пользователь доскроллит до карты, или еще лучше кликнет на нее. Карту до клика сделать картинкой.

3) Время ответа сервера оставляет желать лучшего, сделал несколько тестов и вижу 1-1.5 секунды время генерации страницы. Поэтому вам следует уставновить плагин для кэширования. Рекомендую WP-SUPER-CACHE. Он не обладает избыточной функциональностью, и кэширует только бакенд. Всю остальную оптимизацию мы выполнили в Autoptimize.

4) Все сторонние скрипты нужно также отложить до момента, когда они будут нужны пользователю. Например статистику можно отложить на 3-5 секунд. Это конечно даст небольшой перекос, но время будет выиграно.

5) При подключении шрифтов нужно использовать font-display: swap; для того, чтобы пока шрифты не будут подгружены, отображался текст в системных шрифтах.

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

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

Проверяйте на трёх сервисах минимум скорость:

PageSpeed - замеряет из Европы.
GTmetrix - попробуйте США и Европу.
loading.express - замеры из России.

И замеряйте в разное время суток. Как минимум попробуйте утром и вечером. Потому что нагрузка на сеть в разное время разная.

Я делал целое расследование по поиску всех сервисов.
Которые со всех сторон помогут проверить сайт на скорость загрузки.

https://vc.ru/services/72263-20-instrumentov-dlya-...

или тут

https://spark.ru/startup/loadingexpress/blog/51932...

Cервисов реально очень много сейчас.
Также не забывайте проверять скорость ответа сервера.

Это даже важнее, чем полная загрузка.

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

Я пользуюсь тоже несколькими для ответа сервера:

Яндекс - https://webmaster.yandex.ru/tools/server-response/
Еще - https://ping.loading.express
Еще - https://ping-admin.ru

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

Пожмите картинки, у вас по мегабайту несколько картинок подгружается. Пол мегабайта, по 300 кб, когда они могут все до 100 весить.
Берите https://compressor.io и к работе!)

На 1,5 прогружается первый контент.
Это уже не плохо, но картинки надо пожать точно.

Страница в целом весит почти 5 мегабайт. Норма до 1.
А показатели пейджспид это хорошо конечно, но нельзя только в нём смотреть.

Смотрите так:

1. Пейджспид.
2. gtmetrix.
3. Loading.express

Смотрите лучше инструментами более профессиональными.
Берите gtmetrix и в нем смотрите, что именно загружается в waterfall.
loading.express в нем смотрите по каким параметрам надо работать.
Ну и правильно тут пишут, что гугл пейджспид для понятной оценки.

http2 включайте с прелоадами.
Отложенной загрузкой откладывайте всё что можно.
И первый экран отдельно рисуйте сначала, асинхронно всё остальное подгружать.
ЦДН можно, но уже после всего остального. Скорее всего он и не понадобится.

Ответ сервера в норме, если до 0,4 максимум. Дальше уже плохо. Проверить в реальном времени можно на https://ping.loading.express.

Скорость загрузки сайта есть разная. Полная загрузка до 3-х секунд должна быть. Её можно проверить в https://gtmetrix.com/. Там бесплатно, если зарегиться.

Быстрый и полный скан можно сделать в https://loading.express. Там по важным параметрам быстрая оценка.

Ну и зеленой зоны надо достигать в Google PageSpeed Insights конечно же. Об этом вы знаете.

Выжимка на 2019 год такая:

Твой сайт быстрый, если загружается от 0 до 3 секунд.
Вес страницы не должен превышать 1 мегабайта.
Количество HTTP запросов от 50 до 100 на страницу.

Если вдруг кто увидит этот вопрос и ответы в 2020-2021, то знай.

Твой сайт быстрый, если загружается от 0 до 3 секунд.
Вес страницы не должен превышать 1000 килобайт.
Количество HTTP-запросов от 50 до 100 на страницу.

Как это всё измерить. Главное, не замеряй в одном сервисе. Их сейчас много.
Вот тут я описал их все: https://vc.ru/services/72263-20-instrumentov-dlya-...

А вот какими я сам пользуюсь, чтобы точно понять куда копать:

Сначала нужен экспресс отчет: https://loading.express - тут будет выжимка быстро и коротко.

Потом замеряю в https://www.webpagetest.org/, чтобы понять вес страницы и запросов сколько.

Ну и в конце смотрю на Google PageSpeed Insights.