Разгоняем показатели PageSpeed и Lighthouse до 100
Серия постов про то, как поднять показатели PageSpeed для сайта и как ускорить сайт на любой cms.
Содержание серии статей
ЧАСТЬ 1 — Сжать и перевести в webp все картинки
ЧАСТЬ 2 — Чистка css
ЧАСТЬ 3 — Объединение css файлов
ЧАСТЬ 4 — Вынесение "критических" стилей css
Последний апдейт 26.07.2025 - собраны все части в одном месте
Кейс: как я довела сайт до 100/100 в PageSpeed на ПК и мобильных
Сайт от моих правок набрал 100/100 по производительности в PageSpeed Insights и на мобильных, и на ПК! Описанные выше методы в статьях я использовала для ускорения загрузки сайта и повышения Core Web Vitals.
В начале пути имелось по показателям:
Для мобильных - 67 / 90 / 85 / 100
Для ПК - 100 / 100 / 100 / 100
Для мобильных - 100 / 100 / 100 / 100
Было проделано много работы. От сжатия картинок до вынесения "критического" css в head и переписывания js скриптов. В отдельных постах расскажу, как этого удалось добиться ! : )
* Отмечу, что пейджспид не выдает всегда 100% стабильный результат для каждого сайта, - от теста к тесту производительность колеблется в пределах +-15 баллов - такая вот особенность.
Про эту "особенность" немного рассказываю в отдельной статье, можно почитать здесь.
Удалось добиться результата: итоги оптимизации
Вот такую красоту получилось увидеть после огромной работы над скоростью загрузки сайта.
А такие чудеса видим после оптимизации для мобильных устройств:
** Да, скрины превью сайта специально размыты - работала над ним в рамках студии. Но цифры - реальные. Разберем техники на тестовых примерах )
Прочитать все части можно по хештегу #pagespeed в моём Телеграм Канале - @naweba или перейдя по нужной ссылке из содержания в самом начале этой статьи.
✅❤️ Подпишись на мой Telegram канал @naweba, если хочешь разбираться в оптимизации сайтов. Я делюсь опытом, ошибками и результатами без занудства, а с интересом и пользой ; )