Главное из статьи: Популярные сайты СМИ России загружаются с мобильного телефона и интернета непозволительно долго. Яндекс.Турбо и Google AMP спасают СМИ от потенциального разорения, но у этих технологий есть очевидные минусы.
Содержание статьи:
1. Скорость загрузки каждого сайта до полной интерактивности страницы.
2. Видео загрузки каждого сайта прилагается.
3. Ссылка на калькулятор показателей PageSpeed Insights с расшифровкой.
4. Рекомендации по ускорению каждого сайта из списка.
5. Бонус в конце статьи про ускорение сайтов.
Скорость загрузки до полной интерактивности (топ-10 быстрых сайтов)
Скорость загрузки до полной интерактивности (топ-10 медленных сайтов)
1. 1mediainvest.ru – от 2 до 3 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунды
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 секунд
Калькулятор показателей 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 подтянется.
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.
- Мария Бирюкова — редактор, корректор.
Включаю Вангу: дальше будет ещё хуже с этим.
Коротко о "простых" (нет) и эффективных способах:
1. 1 файл JS (можно запустить загрузку после `ошибки` загрузки файла метрики и разделить исполнение таймаутами, вынесением в worker и пр.), 1 файл CSS, изображения (лучше 1 большое склеенное чем много мелких, есть более эффективные методы, но менее универсальны) и пр. загружать лениво (что-то начать грузить с задержкой, что-то подменять близкими по цвету и размеру плашками пока грузится, менее важное - после определённого взаимодействия юзверя со страницей: скролл, клик и пр.);
2. Критический JS/CSS для верхней части видимого экрана вставлять в HTML, безопаснее всего в конец body (есть средства для автоопределения, но как и со всем универсальным весьма посредственные);
3. Кастомные шрифты та ещё проблема, но по самым эффективным способам их подключения много исследований проведено (гугл и пр. сторонние сервисы - зло). Это основная проблема большинства сайтов с долгим FCP;
4. Для моб. устройств без WiFi кол-во запросов гораздо хуже размера файлов;
5. Ifram`ы/изображения и пр. подгружаемый контент 3-их лиц вставлять с помощью кода из JS, а до их загрузки использовать плашки;
6. С контентом странных рекламных сетей - просто страдать и плакать.
Вообще, главное правило: не делать то, что не нужно в данный момент (это сразу ухудшает результат универсальных движков/библиотек/фреймворков, не ставящих скорость страницы в приоритет). Не может человек сразу прокрутить/кликнуть по невидимому элементу, так и обработчики не должны быть загружены для них.
Возможно когда-нибудь в далёком будущем у меня дойдут руки до производства фронтовой либы, чтобы товарищи формошлёпы могли создавать фронтовый код только в строгих рамках, ставящих логику загрузки ресурсов и исполнения кода во главу угла. За ними подтирать уже бесполезно, т.к. их слишком много сходит с конвейеров всяких курсов.