Как сделать 100 из 100 в Google Page Speed
Главная → Просто о сложном → Для веб-программистов → Как сделать 100 из 100 в Google Page Speed
Сейчас делаем верстку для ajur39.ru т.к. по договору у нас была зеленая зона в pagespeed (то есть не меньше 80 баллов из 100), но мы решили пойти дальше и сделать лучше!
Поэтому верстальщик решил сразу отказаться от бутстрапа и jquery. Именно они в конечном итоге делают систему неповоротливой, хоть и более гибкой (хотя под какие браузеры верстать). Это в принципе и позволило пройти тест на 100 баллов. См. скриншоты ниже и надеемся как сдадим сайт (хотя можно залить среднего размера фото и сразу упасть на 10-15 баллов в тесте).
Итак, что нужно делать (это может стать хорошей практикой):
- Делим CSS стили на две части: для верней части страницы и для всего остального. Всё минифицируем. В верхушку войдут шрифты от гугла, флексбокс-сетка и собственно стилистика верней части страницы. Остальные стили подгружаются после загрузки страницы через js.
- Всё, что долго грузится: большие картинки, виджеты соцсетей, карты и проч, - грузим ленивой загрузкой. Т.е. грузим только если пользователь долистал до них.
- Все используемые js-библиотеки должны подключаться асинхронно.
- Ну и конечно кеширование и сжатие на стороне сервера.
Что я для этого использовал:
1. Минифицированную сетку flexbox-grid.css (не важно какую использовать, главное чтобы там была только сетка и ничего лишнего)
2. Скрипт для анимаций movements.js (слайдер, меню, модальные окна, дропдауны и т.п.)
3. Скрипт для ленивой загрузки lazy-loading.js
4. htaccess - для настройки кеширования и сжатия
Скрины с результатом ниже.
Не всегда кстати результат один и тот же. Иногда всё же снимают 3-4 балла за долгий ответ сервера.
