Выжимка статьи: продажи iPhone 12 стартовали не так давно, и все онлайн-магазины стараются красиво его продать. Почему ваш телефон начинает нагреваться, когда вы заходите на эти сайты? Куда уходят гигабайты с мобильного пакета? Почему всё так лагает? Рассказываю.
Я отобрал 30 продавцов техники Apple и проверил их производительность на loading.express и Lighthouse *. Сайт Apple тоже не забыл.
Статья состоит из пяти блоков:
- Скорость загрузки каждого сайта до полной интерактивности страницы.
- Видео загрузки каждого сайта прилагается.
- Ссылка на калькулятор показателей PageSpeed Insights с расшифровкой.
- Рекомендации по ускорению каждого сайта из списка.
- Бонус в конце статьи про ускорение сайтов.
Скорость загрузки до полной интерактивности
1. iPort.ru — от 16 до 35 секунд
Калькулятор показателей PageSpeed *👇:
- FCP, первая отрисовка — 4 080 мс (48 из 100)
- SI, индекс скорости — 14 855 мс (1 из 100)
- LCP, наибольший отрисованный контент — 37 245 мс (0 из 100)
- TTI, время до интерактивности — 58 519 мс (0 из 100)
- TBT, полная блокировка интерактивности — 20 034 мс (0 из 100)
- CLS, сдвиг макета — 0,01 (100 из 100)
2. m.Re-Store.ru — от 20 до 41 секунды
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 3510 мс (62 из 100)
- SI, индекс скорости — 24 382 мс (0 из 100)
- LCP, наибольший отрисованный контент — 33 150 мс (0 из 100)
- TTI, время до интерактивности — 44 889 мс (0 из 100)
- TBT, полная блокировка интерактивности — 6 807 мс (0 из 100)
- CLS, сдвиг макета — 0,28 (44 из 100)
3. Apple.com — от 6 до 12 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 7 932 мс (5 из 100)
- SI, индекс скорости — 12 390 мс (4 из 100)
- LCP, наибольший отрисованный контент — 14 232 мс (0 из 100)
- TTI, время до интерактивности — 14 440 мс (9 из 100)
- TBT, полная блокировка интерактивности — 3 612 мс (0 из 100)
- CLS, сдвиг макета — 0,01 (100 из 100)
4. Onlinetrade.ru — от 5 до 9 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 2 479 мс (87 из 100)
- SI, индекс скорости — 6 368 мс (41 из 100)
- LCP, наибольший отрисованный контент — 10 860 мс (0 из 100)
- TTI, время до интерактивности — 9 390 мс (31 из 100)
- TBT, полная блокировка интерактивности — 1 491 мс (6 из 100)
- CLS, сдвиг макета — 0,24 (52 из 100)
5. Ozon.ru — от 7 до 13 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 2 970 мс (76 из 100)
- SI, индекс скорости — 13 458 мс (2 из 100)
- LCP, наибольший отрисованный контент — 23 049 мс (0 из 100)
- TTI, время до интерактивности — 35 976 мс (0 из 100)
- TBT, полная блокировка интерактивности — 27 060 мс (0 из 100)
- CLS, сдвиг макета — 0,00 (100 из 100)
6. DNS-shop.ru — от 7 до 12 секунд
Для сайта этой компании не удалось сделать аудит страницы товара. Поэтому видео сделано для главной, а параметры калькулятора — для страницы товара.
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 5 400 мс (24 из 100)
- SI, индекс скорости — 18 328 мс (0 из 100)
- LCP, наибольший отрисованный контент — 17 517 мс (0 из 100)
- TTI, время до интерактивности — 19 925 мс (3 из 100)
- TBT, полная блокировка интерактивности — 3 720 мс (0 из 100)
- CLS, сдвиг макета — 0,20 (62 из 100)
7. Eldorado.ru — от 12 до 30 секунд
Для сайта этой компании не удалось сделать аудит страницы товара. Видео сделано для главной, а параметры калькулятора — для страницы товара.
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 9 223 мс (2 из 100)
- SI, индекс скорости — 24 462 мс (0 из 100)
- LCP, наибольший отрисованный контент — 27 200 мс (0 из 100)
- TTI, время до интерактивности — 38 317 мс (0 из 100)
- TBT, полная блокировка интерактивности — 16 298 мс (0 из 100)
- CLS, сдвиг макета — 0,34 (33 из 100)
8. Mvideo.ru — от 25 до 50 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 3 960 мс (51 из 100)
- SI, индекс скорости — 14 119 мс (2 из 100)
- LCP, наибольший отрисованный контент — 15 060 мс (0 из 100)
- TTI, время до интерактивности — 46 397 мс (0 из 100)
- TBT, полная блокировка интерактивности — 27 495 мс (0 из 100)
- CLS, сдвиг макета — 0,01 (100 из 100)
9. Technopark.ru — от 4 до 8 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 2 220 мс (92 из 100)
- SI, индекс скорости — 19 289 мс (0 из 100)
- LCP, наибольший отрисованный контент — 5 820 мс (15 из 100)
- TTI, время до интерактивности — 37 636 мс (0 из 100)
- TBT, полная блокировка интерактивности — 24 689 мс (0 из 100)
- CLS, сдвиг макета — 0,11 (87 из 100)
10. Svyaznoy.ru — от 17 до 30 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 2 910 мс (78 из 100)
- SI, индекс скорости — 18 309 мс (0 из 100)
- LCP, наибольший отрисованный контент — 9 630 мс (1 из 100)
- TTI, время до интерактивности — 32 278 мс (0 из 100)
- TBT, полная блокировка интерактивности — 20 618 мс (0 из 100)
- CLS, сдвиг макета — 0,11 (87 из 100)
11. Citilink.ru — от 13 до 21 секунды
Для сайта этой компании не удалось сделать аудит страницы товара. Видео сделано для главной, а параметры калькулятора — для страницы товара.
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 5 010 мс (30 из 100)
- SI, индекс скорости — 11 142 мс (6 из 100)
- LCP, наибольший отрисованный контент — 12 378 мс (0 из 100)
- TTI, время до интерактивности — 24 614 мс (1 из 100)
- TBT, полная блокировка интерактивности — 7 982 мс (0 из 100)
- CLS, сдвиг макета — 0,01 (100 из 100)
12. Megafon.ru — от 15 до 26 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 4 738 мс (34 из 100)
- SI, индекс скорости — 20 224 мс (0 из 100)
- LCP, наибольший отрисованный контент — 23 358 мс (0 из 100)
- TTI, время до интерактивности — 24 969 мс (1 из 100)
- TBT, полная блокировка интерактивности — 7 770 мс (0 из 100)
- CLS, сдвиг макета — 0,03 (100 из 100)
13. Beeline.ru — от 8 до 16 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 3 885 мс (53 из 100)
- SI, индекс скорости — 12 303 мс (4 из 100)
- LCP, наибольший отрисованный контент — 12 303 мс (0 из 100)
- TTI, время до интерактивности — 24 715 мс (1 из 100)
- TBT, полная блокировка интерактивности — 10 903 мс (0 из 100)
- CLS, сдвиг макета — 0,28 (44 из 100)
14. MTS.ru — от 18 до 32 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 13 133 мс (0 из 100)
- SI, индекс скорости — 15 548 мс (1 из 100)
- LCP, наибольший отрисованный контент — 30 489 мс (0 из 100)
- TTI, время до интерактивности — 27 755 мс (0 из 100)
- TBT, полная блокировка интерактивности — 7 569 мс (0 из 100)
- CLS, сдвиг макета — 0,13 (82 из 100)
15. E-katalog.ru — от 3 до 6 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 992 мс (100 из 100)
- SI, индекс скорости — 8 625 мс (17 из 100)
- LCP, наибольший отрисованный контент — 6 582 мс (9 из 100)
- TTI, время до интерактивности — 18 007 мс (4 из 100)
- TBT, полная блокировка интерактивности — 14 391 мс (0 из 100)
- CLS, сдвиг макета — 0,15 (76 из 100)
16. BIGgeek.ru — от 18 до 30 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 5 880 мс (18 из 100)
- SI, индекс скорости — 19 566 мс (0 из 100)
- LCP, наибольший отрисованный контент — 15 872 мс (0 из 100)
- TTI, время до интерактивности — 35 462 мс (0 из 100)
- TBT, полная блокировка интерактивности — 12 911 мс (0 из 100)
- CLS, сдвиг макета — 0,00 (100 из 100)
17. C-store.ru — от 14 до 24 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 8 175 мс (4 из 100)
- SI, индекс скорости — 23 135 мс (0 из 100)
- LCP, наибольший отрисованный контент — 23 814 мс (0 из 100)
- TTI, время до интерактивности — 45 057 мс (0 из 100)
- TBT, полная блокировка интерактивности — 17 983 мс (0 из 100)
- CLS, сдвиг макета — 0,00 (100 из 100)
18. IndexIQ.ru — от 9 до 23 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 3 413 мс (65 из 100)
- SI, индекс скорости — 20 027 мс (0 из 100)
- LCP, наибольший отрисованный контент — 20 191 мс (0 из 100)
- TTI, время до интерактивности — 28 170 мс (0 из 100)
- TBT, полная блокировка интерактивности — 5 314 мс (0 из 100)
- CLS, сдвиг макета — 0,00 (100 из 100)
19. Iwbm.ru — от 10 до 13 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 7 080 мс (9 из 100)
- SI, индекс скорости — 10 592 мс (8 из 100)
- LCP, наибольший отрисованный контент — 14 400 мс (0 из 100)
- TTI, время до интерактивности — 15 345 мс (7 из 100)
- TBT, полная блокировка интерактивности — 685 мс (41 из 100)
- CLS, сдвиг макета — 0,46 (20 из 100)
20. Pitergsm.ru — от 6 до 13 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 2 745 мс (82 из 100)
- SI, индекс скорости — 9 888 мс (10 из 100)
- LCP, наибольший отрисованный контент — 21 012 мс (0 из 100)
- TTI, время до интерактивности — 14 936 мс (8 из 100)
- TBT, полная блокировка интерактивности — 788 мс (32 из 100)
- CLS, сдвиг макета — 0,25 (50 из 100)
21. RepairMyApple.ru — от 8 до 17 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 3 000 мс (75 из 100)
- SI, индекс скорости — 8 519 мс (18 из 100)
- LCP, наибольший отрисованный контент — 7 185 мс (6 из 100)
- TTI, время до интерактивности — 18 739 мс (3 из 100)
- TBT, полная блокировка интерактивности — 2 993 мс (0 из 100)
- CLS, сдвиг макета — 0,22 (57 из 100)
22. Apple-Store.net.ru — от 3 до 5 секунд
- FCP, первая отрисовка — 2 288 мс (91 из 100)
- SI, индекс скорости — 5 299 мс (59 из 100)
- LCP, наибольший отрисованный контент — 7 695 мс (4 из 100)
- TTI, время до интерактивности — 8 200 мс (41 из 100)
- TBT, полная блокировка интерактивности — 1 575 мс (5 из 100)
- CLS, сдвиг макета — 0,22 (57 из 100)
23. Gorbushka-market.ru — от 6 до 12 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 5 536 мс (22 из 100)
- SI, индекс скорости — 7 500 мс (27 из 100)
- LCP, наибольший отрисованный контент — 9 174 мс (1 из 100)
- TTI, время до интерактивности — 16 419 мс (6 из 100)
- TBT, полная блокировка интерактивности — 3 552 мс (0 из 100)
- CLS, сдвиг макета — 0,36 (31 из 100)
24. iCenter-store.ru — от 8 до 19 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 6 494 мс (12 из 100)
- SI, индекс скорости — 11 127 мс (6 из 100)
- LCP, наибольший отрисованный контент — 12 930 мс (0 из 100)
- TTI, время до интерактивности — 19 443 мс (3 из 100)
- TBT, полная блокировка интерактивности — 4 265 мс (0 из 100)
- CLS, сдвиг макета — 0,93 (3 из 100)
25. Sotohit.ru — от 7 до 23 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 6 189 мс (15 из 100)
- SI, индекс скорости — 13 917 мс (2 из 100)
- LCP, наибольший отрисованный контент — 18 128 мс (0 из 100)
- TTI, время до интерактивности — 22 729 мс (1 из 100)
- TBT, полная блокировка интерактивности — 6 560 мс (0 из 100)
- CLS, сдвиг макета — 0,38 (28 из 100)
26. Gigant-store.ru — от 7 до 11 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 3 645 мс (59 из 100)
- SI, индекс скорости — 6 617 мс (38 из 100)
- LCP, наибольший отрисованный контент — 7 030 мс (6 из 100)
- TTI, время до интерактивности — 13 719 мс (11 из 100)
- TBT, полная блокировка интерактивности — 2 180 мс (1 из 100)
- CLS, сдвиг макета — 0,35 (32 из 100)
27. Icult.ru — от 7 до 20 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 6 031 мс (16 из 100)
- SI, индекс скорости — 9 385 мс (13 из 100)
- LCP, наибольший отрисованный контент — 8 340 мс (2 из 100)
- TTI, время до интерактивности — 18 325 мс (4 из 100)
- TBT, полная блокировка интерактивности — 2 306 мс (1 из 100)
- CLS, сдвиг макета — 0,01 мс (100 из 100)
28. iStore-d.ru — от 5 до 17 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 7 020 мс (9 из 100)
- SI, индекс скорости — 9 458 мс (12 из 100)
- LCP, наибольший отрисованный контент — 14 955 мс (0 из 100)
- TTI, время до интерактивности — 21 878 мс (2 из 100)
- TBT, полная блокировка интерактивности — 1 103 мс (15 из 100)
- CLS, сдвиг макета — 0,08 (94 из 100)
29. Appletomsk.ru — от 2 до 4 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 2 075 мс (94 из 100)
- SI, индекс скорости — 2 894 мс (95 из 100)
- LCP, наибольший отрисованный контент — 4 130 мс (47 из 100)
- TTI, время до интерактивности — 4 885 мс (78 из 100)
- TBT, полная блокировка интерактивности — 429 мс (72 из 100)
- CLS, сдвиг макета — 0,07 (96 из 100)
30. AT-store.ru — от 4 до 8 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 3 615 мс (60 из 100)
- SI, индекс скорости — 5 954 мс (48 из 100)
- LCP, наибольший отрисованный контент — 8 385 мс (2 из 100)
- TTI, время до интерактивности — 13 428 мс (12 из 100)
- TBT, полная блокировка интерактивности — 3 894 (0 из 100)
- CLS, сдвиг макета — 0,05 (99 из 100)
31. i-Point.ru — от 4 до 9 секунд
Калькулятор показателей PageSpeed👇:
- FCP, первая отрисовка — 2 205 мс (92 из 100)
- SI, индекс скорости — 5 947 мс (48 из 100)
- LCP, наибольший отрисованный контент — 5 426 мс (20 из 100)
- TTI, время до интерактивности — 11 328 мс (20 из 100)
- TBT, полная блокировка интерактивности — 3 838 мс (0 из 100)
- CLS, сдвиг макета — 0,00 (100 из 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!
Условные обозначения и непонятные слова из статьи
* Lighthouse 6.4.1 — это движок/ядро/сердце в сервисе PageSpeed Insights от Гугл. Именно из-за обновлений в нём, показатели ПейджСпид несколько раз в году меняются у всех сайтов в мире.
** Калькулятор показателей Lighthouse, который лежит в основе оценки инструмента от Google PageSpeed insights. Как он посчитает, так и сложится оценка от Гугл.
Материал подготовили:
- Алексей Махметхажиев — технический писатель.
- Антон Белогородцев — DEVS.
- Мария Бирюкова — редактор, корректор.
И чё?
«И чё?» — фраза, о которую разбиваются все доказательства.
Я — пас.
Вот вроде реально большая работа, а вроде "зачем?". Не очень понял как название статьи согласуется с наполнением :l
Тут тонкая игра слов.
Значит, что я задаю вопросом, что как можно за 50 секунд загружающийся сайт продать айфон 12. Ну как так можно не уважать тех, кто покупает эту технику...
У меня была подобная мысль, но тут уже в расчёт вступает то, что спрос на новые айфоны чаще всего кратно превышает предложение :)
Если бы там сайт грузился час, то были бы те, кто дождался :)
Но работа проведена однозначно мощная
Спасибо, не пожалейте лайк. =)
Бооожжжееее, вам не лень было настолько масштабную работу проводить? Большое спасибо!