Задать вопрос

Как верстать с хорошими показателями Google Speed?

Ребята, как правильно верстать сайты, что б показатели гугл были максимальные.Потому что у меня сайты в принципе быстро работают, код пишу чистый, но в итоге показатели говняные. Уже надоело.Использую сборку Gulp со всеми библиотеками для сжатия, и т.д. , что нужно поменять в моем подходе?Сжимаю картинки,последнее время библиотеки, вообще не сжимаю, а беру просто cdn, ну кароче ничего не помогает .
  • Вопрос задан
  • 1743 просмотра
Подписаться 18 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 6
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
Вам в детстве мама говорила: все пойдут прыгать и ты пойдёшь?

Первая причина оптимизировать это если клиент в неадеквате и требует 100%.

Второе это желание наколоть алгоритмы этой проверки. На самом деле думайте головой над каждой рекомендацией. И что то делайте ну или игнорируйте
Ответ написан
SeaInside
@SeaInside
15 лет пилю все эти штуки
Здесь нет волшебной таблетки. Это комплекс факторов...
Из главного: ленивая/отложенная загрузка всего и вся (всевозможные метрики и второстепенные скрипты / графика / компоненты, если используете фреймворки), использование современных форматов графики (webp в частности), вёрстка mobile-first (существенно снижает время на расчёт лейаута и рендер на приоритетных устройствах), инжект CriticalCSS (это про time to first paint), уменьшение размера DOM-дерева.
Это из фронта, на бэке - сжатие gzip/brotli, максимальное время жизни кэша, оптимизация времени до ответа.

Они же все рекомендации прямо при проверке пишут, там очень подробно всё расписано.
Волшебной кнопки не существует.

За 100/100 гоняться на чём-то больше стандартного лендоса - как правило бред сумасшедшего (оно обычно можно, но того совершенно не стоит, так как из-за отложенной загрузки/рендера будет страдать UX, что важнее красивой пузомерки).
90+ для почти любого проекта - вполне несложно, если умеючи.
А умеючи - это с опытом, анализом рекомендаций, а не поиском новых сборок/инструментов.
Ответ написан
web_Developer_Victor
@web_Developer_Victor
Что такое google?
Вообще способов на 100% удовлетворить LightHouse и PageSpeed нет (Youtube 50%, Google Classroom 57%). Но есть способы, чтобы поднять на 90+
  • Использовать webp изображения в теге picture, для видео webm
  • Не использовать сторонние библиотеки или пару очень маленьких
  • Сжимать все файлы (html, css, js, картинки)


Если хотите посмотреть "правильную верстку", то вот на React (98%) и "чистая" верстка (90%)
Ответ написан
@jamtuson
1. Менять картинки на webp очень сложно. Можно обойтись оптимизированными изображениями. Там, где можно использовать jpg используйте jpg, а иначе png/svg.
Если картинки высокого разрешение, то можно использовать встроенную ленивую загрузку изображений
2. Создайте критичные стили и грузите их в теги style прям в шапку. Остальные все стили переносите в футер. Можно и шрифты туда же. Если шрифты тяжелые, то можно использовать асинхронную загрузку шрифтов
3. Настройте кеширование всего и вся: стили, запросы, изображение, скрипты. Если wp у вас, то достаточно будет плагина.
4. Всякие метрики/аналитики, если возможно, тоже грузить в футере.
Ответ написан
Комментировать
@Vashington
А как react app, который сделан при помощи create-react-app оптимизировать?
Ответ написан
Комментировать
nokimaro
@nokimaro
Меня невозможно остановить, если я смогу начать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы