{"id":10861,"title":"\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0438\u043b\u043e\u0442 \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 PwC Venture Hub","url":"\/redirect?component=advertising&id=10861&url=https:\/\/vc.ru\/promo\/349044-korotko-zapustit-pilot-i-poluchit-novyh-klientov-s-pwc&placeBit=1&hash=4330fcc6373e035951e6ff64a3ae572ba5f30463fe8776204270bbc0bd091c81","isPaidAndBannersEnabled":false}
Алексей из LOADING.express

Рейтинг скорости сайтов СМИ России

Главное из статьи: Популярные сайты СМИ России загружаются с мобильного телефона и интернета непозволительно долго. Яндекс.Турбо и Google AMP спасают СМИ от потенциального разорения, но у этих технологий есть очевидные минусы.

Содержание статьи:

1. Скорость загрузки каждого сайта до полной интерактивности страницы.

2. Видео загрузки каждого сайта прилагается.

3. Ссылка на калькулятор показателей PageSpeed Insights с расшифровкой.

4. Рекомендации по ускорению каждого сайта из списка.

5. Бонус в конце статьи про ускорение сайтов.

Скорость загрузки до полной интерактивности (топ-10 быстрых сайтов)

Скорость загрузки до полной интерактивности (топ-10 медленных сайтов)

1. 1mediainvest.ru – от 2 до 3 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 2 584 мс (85 из 100)
  • SI, индекс скорости — 3 415 мс (90 из 100)
  • LCP, наибольший отрисованный контент — 4 234 мс (44 из 100)
  • TTI, время до интерактивности — 3 632 мс (91 из 100)
  • TBT, полная блокировка интерактивности — 180 мс (98 из 100)
  • CLS, сдвиг макета — 0,03 (100 из 100)

2. Profile.ru – от 5 до 15 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 2 040 мс (95 из 100)
  • SI, индекс скорости — 8 212 мс (20 из 100)
  • LCP, наибольший отрисованный контент — 3 153 мс (74 из 100)
  • TTI, время до интерактивности — 15 724 мс (7 из 100)
  • TBT, полная блокировка интерактивности — 4 569 мс (0 из 100)
  • CLS, сдвиг макета — 0,85 (4 из 100)

3. Newstracker.ru – от 8 до 16 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 4 475 мс (39 из 100)
  • SI, индекс скорости — 10 114 мс (9 из 100)
  • LCP, наибольший отрисованный контент — 10 071 мс (1 из 100)
  • TTI, время до интерактивности — 16 375 мс (6 из 100)
  • TBT, полная блокировка интерактивности — 3 862 мс (0 из 100)
  • CLS, сдвиг макета — 0,48 (18 из 100)

4. Smi2.ru – от 4 до 8 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 1 895 мс (96 из 100)
  • SI, индекс скорости — 8 047 мс (22 из 100)
  • LCP, наибольший отрисованный контент — 6 418 мс (10 из 100)
  • TTI, время до интерактивности — 8 319 мс (40 из 100)
  • TBT, полная блокировка интерактивности — 1 127 мс (14 из 100)
  • CLS, сдвиг макета — 0,67 (8 из 100)

5. Lentainform.com – от 3 до 8 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 2 284 мс (91 из 100)
  • SI, индекс скорости — 6 067 мс (46 из 100)
  • LCP, наибольший отрисованный контент — 7 458 мс (4 из 100)
  • TTI, время до интерактивности — 8 145 мс (42 из 100)
  • TBT, полная блокировка интерактивности — 651 мс (44 из 100)
  • CLS, сдвиг макета — 0,24 (52 из 100)

6. Uznayvse.ru – от 2 до 7 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 1 298 мс (100 из 100)
  • SI, индекс скорости — 5 440 мс (56 из 100)
  • LCP, наибольший отрисованный контент — 3 635 мс (60 из 100)
  • TTI, время до интерактивности — 7 668 мс (46 из 100)
  • TBT, полная блокировка интерактивности — 2 583 мс (1 из 100)
  • CLS, сдвиг макета — 0,00 (100 из 100)

7. Svoboda.org – от 6 до 13 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 1 933 мс (96 из 100)
  • SI, индекс скорости — 8 569 мс (18 из 100)
  • LCP, наибольший отрисованный контент — 7 896 мс (3 из 100)
  • TTI, время до интерактивности — 13 732 мс (11 из 100)
  • TBT, полная блокировка интерактивности — 3 066 мс (0 из 100)
  • CLS, сдвиг макета — 0,39 (27 из 100)

8. Oilcapital.ru – от 4 до 10 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 4 668 мс (36 из 100)
  • SI, индекс скорости — 6 890 мс (34 из 100)
  • LCP, наибольший отрисованный контент — 8 682 мс (2 из 100)
  • TTI, время до интерактивности — 10 447 мс (24 из 100)
  • TBT, полная блокировка интерактивности — 1 692 мс (4 из 100)
  • CLS, сдвиг макета — 0,08 (94 из 100)

9. Interfax.ru – от 8 до 12 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 1 560 мс (99 из 100)
  • SI, индекс скорости — 5 368 мс (57 из 100)
  • LCP, наибольший отрисованный контент — 2 340 мс (93 из 100)
  • TTI, время до интерактивности — 12 851 мс (13 из 100)
  • TBT, полная блокировка интерактивности — 2 026 мс (2 из 100)
  • CLS, сдвиг макета — 0,39 (27 из 100)

10. Eadaily.com – от 6 до 15 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 1 867 мс (97 из 100)
  • SI, индекс скорости — 9 025 мс (15 из 100)
  • LCP, наибольший отрисованный контент — 16 376 мс (0 из 100)
  • TTI, время до интерактивности — 15 333 мс (7 из 100)
  • TBT, полная блокировка интерактивности — 4 677 мс (0 из 100)
  • CLS, сдвиг макета — 0,08 (94 из 100)

11. Sostav.ru – от 16 до 34 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 1 251 мс (100 из 100)
  • SI, индекс скорости — 6 895 мс (34 из 100)
  • LCP, наибольший отрисованный контент — 1 251 мс (100 из 100)
  • TTI, время до интерактивности — 16 032 мс (6 из 100)
  • TBT, полная блокировка интерактивности — 3 103 мс (0 из 100)
  • CLS, сдвиг макета — 1,23 (1 из 100)

12. Ngs.ru – от 15 до 32 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 5 690 мс (20 из 100)
  • SI, индекс скорости — 17 866 мс (0 из 100)
  • LCP, наибольший отрисованный контент — 14 052 мс (0 из 100)
  • TTI, время до интерактивности — 32 460 мс (0 из 100)
  • TBT, полная блокировка интерактивности — 7 416 мс (0 из 100)
  • CLS, сдвиг макета — 0,01 (100 из 100)

13. Echo.msk.ru – от 18 до 28 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 3 980 мс (50 из 100)
  • SI, индекс скорости — 13 392 мс (2 из 100)
  • LCP, наибольший отрисованный контент — 15 896 мс (0 из 100)
  • TTI, время до интерактивности — 28 530 мс (0 из 100)
  • TBT, полная блокировка интерактивности — 7 911 мс (0 из 100)
  • CLS, сдвиг макета — 0,11 (87 из 100)

14. Kp.ru – от 14 до 31 секунды

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 2 065 мс (94 из 100)
  • SI, индекс скорости — 14 716 мс (1 из 100)
  • LCP, наибольший отрисованный контент — 9 883 мс (1 из 100)
  • TTI, время до интерактивности — 31 768 мс (0 из 100)
  • TBT, полная блокировка интерактивности — 9 204 мс (0 из 100)
  • CLS, сдвиг макета — 0,00 (100 из 100)

15. Rg.ru – от 9 до 24 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 3 233 мс (69 из 100)
  • SI, индекс скорости — 16 895 мс (1 из 100)
  • LCP, наибольший отрисованный контент — 25 799 мс (0 из 100)
  • TTI, время до интерактивности — 24 760 мс (1 из 100)
  • TBT, полная блокировка интерактивности — 2 715 мс (0 из 100)
  • CLS, сдвиг макета — 0,02 (100 из 100)

16. Dp.ru – от 12 до 39 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 22 980 мс (0 из 100)
  • SI, индекс скорости — 28 404 мс (0 из 100)
  • LCP, наибольший отрисованный контент — 35 261 мс (0 из 100)
  • TTI, время до интерактивности — 39 265 мс (0 из 100)
  • TBT, полная блокировка интерактивности — 2 891 мс (0 из 100)
  • CLS, сдвиг макета — 0,00 (100 из 100)

17. Glavbukh.ru – от 10 до 24 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 2 481мс (87 из 100)
  • SI, индекс скорости — 8 416 мс (19 из 100)
  • LCP, наибольший отрисованный контент — 21 340 мс (0 из 100)
  • TTI, время до интерактивности — 23 966 мс (1 из 100)
  • TBT, полная блокировка интерактивности — 4 852 мс (0 из 100)
  • CLS, сдвиг макета — 0,88 (4 из 100)

18. Vesti.ru – от 8 до 18 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 3 926 мс (52 из 100)
  • SI, индекс скорости — 11 546 мс (5 из 100)
  • LCP, наибольший отрисованный контент — 15 855 мс (0 из 100)
  • TTI, время до интерактивности — 18 882 мс (3 из 100)
  • TBT, полная блокировка интерактивности — 1 936 мс (2 из 100)
  • CLS, сдвиг макета — 0,78 (6 из 100)

19. Inosmi.ru – от 11 до 28 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 4 625 мс (36 из 100)
  • SI, индекс скорости — 10 603 мс (8 из 100)
  • LCP, наибольший отрисованный контент — 7 698 мс (4 из 100)
  • TTI, время до интерактивности — 28 041 мс (0 из 100)
  • TBT, полная блокировка интерактивности — 2 409 мс (1 из 100)
  • CLS, сдвиг макета — 0,13 (82 из 100)

20. News.ru – от 8 до 22 секунд

Замер для видео Скорость загрузки до полной интерактивности в Lighthouse 7.0

Калькулятор показателей PageSpeed👇:

  • FCP, первая отрисовка — 2 326 мс (90 из 100)
  • SI, индекс скорости — 9 129 мс (14 из 100)
  • LCP, наибольший отрисованный контент — 16 383 мс (0 из 100)
  • TTI, время до интерактивности — 22 285 мс (1 из 100)
  • TBT, полная блокировка интерактивности — 1 232 мс (11 из 100)
  • CLS, сдвиг макета — 1,15 (2 из 100)

6 параметров, которые ускорят ваш сайт

Любой сайт можно ускорить, повлияв всего на 6 параметров PageSpeed Insights.

1. Скорость первой отрисовки — FCP

Первая краска — это то, что все называют "сайт загрузился". Однако этот этап лишь один из многих в процессе загрузки страницы.

First Contentful Paint — время между ответом сервера и появлением первого контента. Ответ сервера не входит в этот показатель. До FCP посетитель сайта будет видеть белый экран. Измеряется в секундах. Подробнее про ответ сервера и как его улучшить мы писали здесь.

Как улучшить первую отрисовку, FCP

Убрать всё, что блокирует начало первой отрисовки.

1. Если стили < 100кб — делаем их инлайном.

2. Исключить выполнение JS при отрисовке.

2. Полная интерактивность страницы — TTI

Интерактивность — это когда всё сразу нажимается, тапается, скроллится, свайпается и вообще, работает.

Time To Interactive — время до взаимодействия. Это период, через который страница полностью готова к взаимодействию с пользователем. До этого времени взаимодействие со страницей может вызывать затруднение (лаги скролла, не работают кнопки). Измеряется в секундах. Хороший TTI — от 0 до 3.8 секунд. Средний — от 3.9 до 7.3 секунд. Медленный — от 7.3 секунд (красная зона).

Как улучшить TTI

1. Откладываем сторонние скрипты.

2. Откладываем iframe-контент или отказываемся.

3. Оптимизируем собственные скрипты и разбиваем выполнение на этапы.

4. Отказываемся от тяжелых библиотек.

3. Индекс скорости — Speed Index

Индекс скорости загрузки показывает, как быстро на странице появляется контент (FCP, LCP, FMP). Насколько быстро загружается содержимое первого экрана вашего сайта при отрисовке в браузере. В секундах.

Как улучшить Speed Index

Улучшаем FCP, LCP, TTI, и Speed Index подтянется.

Speed Index подтягивается.

4. Тотальная блокировка основного потока — TBT

Блокировка — это полное отсутствие реакции на ваши действия. Она может возникнуть в любой момент загрузки сайта.

Total Blocking Time — общее время блокировки основного потока в миллисекундах. Суммарное время всех задач от FCP до TTI, которые выполнялись дольше 50 мс. Показывает общую загрузку основного потока. Сюда входит и применение стилей, и отрисовка, и выполнение JS.

Как улучшить TBT

1. Разбиваем выполнение JS на мелкие задачи.

2. Оптимизируем long task.

3. Откладываем функционал, не нужный для отрисовки.

5. Отрисовка самой значимой части контента — LCP

Largest Contentful Paint — отрисовка крупного контента — это время, через которое отрисовался самый крупный контент первого экрана вашей страницы. Это может быть изображение или текст. До наступления LCP первый экран вашего сайта ещё не полностью отрисован пользователю.

Как улучшить LCP

Сначала нужно понять, какой элемент LCP.

1. Если картинка — проверяем, что она не отложена.

2. Если картинка — добавляем её в preload.

3. Если текст — добавляем шрифты в preload.

4. Если текст — добавляем HTTP/2 Push.

6. Сдвиг макета — CLS

Вы смотрите на сайт, нажимаете кнопку... Как вдруг всё уезжает вниз, и вы кликаете не по тому!

Cumulative Layout Shift — это показатель сдвига элемента (в процентах) на странице во время загрузки. Элементы могут смещаться из-за подгрузки изображений, шрифтов или рекламных блоков.

Как улучшить CLS

Просто резервируем место под интерфейсы, которые делают сдвиг макета.

Бонус про скорость сайта и PageSpeed Insights

Для тех, кто дочитал статью до конца, у нас есть подарок – памятка «6 способов улучшить показатели PageSpeed». Пользуйтесь. И помните, не бывает не ускоряемых сайтов — бывает мало опыта у программиста.

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

Быстрых сайтов и хорошего юзабилити.

Увидимся на loading.express!

Материал подготовили:

  • Алексей Махметхажиев — технический писатель.
  • Антон Белогородцев — DEVS.
  • Мария Бирюкова — редактор, корректор.
0
1 комментарий
Популярные
По порядку
Di Fox

Включаю Вангу: дальше будет ещё хуже с этим.

Коротко о "простых" (нет) и эффективных способах:
1. 1 файл JS (можно запустить загрузку после `ошибки` загрузки файла метрики и разделить исполнение таймаутами, вынесением в worker и пр.), 1 файл CSS, изображения (лучше 1 большое склеенное чем много мелких, есть более эффективные методы, но менее универсальны) и пр. загружать лениво (что-то начать грузить с задержкой, что-то подменять близкими по цвету и размеру плашками пока грузится, менее важное - после определённого взаимодействия юзверя со страницей: скролл, клик и пр.);
2. Критический JS/CSS для верхней части видимого экрана вставлять в HTML, безопаснее всего в конец body (есть средства для автоопределения, но как и со всем универсальным весьма посредственные);
3. Кастомные шрифты та ещё проблема, но по самым эффективным способам их подключения много исследований проведено (гугл и пр. сторонние сервисы - зло). Это основная проблема большинства сайтов с долгим FCP;
4. Для моб. устройств без WiFi кол-во запросов гораздо хуже размера файлов;
5. Ifram`ы/изображения и пр. подгружаемый контент 3-их лиц вставлять с помощью кода из JS, а до их загрузки использовать плашки;
6. С контентом странных рекламных сетей - просто страдать и плакать.

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

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

Ответить
0
Развернуть ветку
Читать все 1 комментарий
Что такое АДР и ГДР: чем отличаются от акций, что предпочесть инвестору
Использовать банки и собирать информацию о клиентах: Минфин подготовил план регулирования криптовалют в России Статьи редакции

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

Исследование: как бизнес преодолел кризис в 2021 году, часть первая

Мы провели исследование российского рынка и посмотрели, как чувствовал себя бизнес в 2021 году. Аналитики компании выяснили, что, благодаря смягчению коронавирусных ограничений, рынок стал постепенно восстанавливаться и выходить на докризисные показатели.

Говорит Москва: Yota определила самые общительные регионы России в 2021 году

Yota проанализировала количество и продолжительность телефонных звонков своих пользователей, а также объем использованного мобильного трафика за 2021 год в разных регионах страны. Таким образом мобильный оператор определил самые «звонящие» и «качающие» регионы.

Позитивные результаты Ericsson смогли повлиять на Nokia

Несмотря на потерю доли рынка в Китае, прибыль Ericsson за IV квартал 2021 года приятно удивила. Возросший спрос на поставку оборудования 5G в Европу, Северную и Латинскую Америку увеличили чистую прибыль компании на 40%, и она достигла $1,1 млрд. Фондовый рынок моментально отреагировал на новости от Ericsson – акции Nokia возросли на 1,46%.

Архитекторы и инженеры: противостояние
Очистка репутации застройщика, девелопера, объекта

Здравствуйте! Вы тут, потому что у вас есть проблемы с online-репутацией. Если это не так – не читайте дальше.

Перспективы возобновления производства гражданской авиации в России

20 января 22 года председатель правительства Михаил Мишустин провёл в Воронеже мероприятие, посвящённое развитию авиации в России. По итогам совещания был сделан следующий вывод: в парке крупнейших российских авиакомпаний 30 % самолётов к 2030 году должны быть произведены внутри страны, а мощность заводов должна составлять от 100 ЛА в год.

Ангар с МС-21 подготовленным для испытаний
Инструкция к пылесосу: почему тексты для врачей должны быть такими сложными?

Когда смотришь на статьи для врачей, иногда хочется найти переводчика с медицинского на русский — настолько тяжело они читаются. И мы решили разобраться, правда ли русскому доктору нужны настолько сложные тексты. Рассказываем, что у нас получилось.

Как сгореть заживо за 700 руб

Aliexpress, OZON, Yandex, DNS, Eldorado нам нужно серьезно поговорить.

Кейс выхода на рынок клининговой компании в условиях жесткой конкуренции: как получать продажи при помощи контекста

«Выходить на рынок уже поздно, везде большая конкуренция, у меня нет шансов!» — готовы поспорить, вы слышали подобные фразы и, возможно, из-за этого даже не пробовали. В эфире digital-агентство Tesla Target и мы расскажем как нашему сотруднику Анне Драгун удалось получить конверсию 10,6% с помощью контекстной рекламы для новой клининговой компании.

null