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

Question

[ololoshka1]

Ребята, как правильно верстать сайты, что б показатели гугл были максимальные.Потому что у меня сайты в принципе быстро работают, код пишу чистый, но в итоге показатели говняные. Уже надоело.Использую сборку Gulp со всеми библиотеками для сжатия, и т.д. , что нужно поменять в моем подходе?Сжимаю картинки,последнее время библиотеки, вообще не сжимаю, а беру просто cdn, ну кароче ничего не помогает .

Comments

[Антон Литвиненко]

я тебе больше скажу, это ты сейчас верстку тестируешь голую, статику. А когда ты свою верстку натянешь на какой-нибудь движок, то показатели еще упадут. Начнутся танцы с кешированием, обьединением и минификацией стилей и скриптов итд

[ololoshka1]

Антон Литвиненко, я сразу тестирую на WP.Но и голая последнее время страдает, раньше вроде такого не было. Может сборка плохая...

[Анатолий]

У меня показатели сайта 92 и 98, подключаю: гугл и яндекс рекламу, и вебвизор, получаю: 19 и 81 ))

Google Speed рекомендует удалить этот шлак:
Сторонний поставщик | Объем переданных данных | Время блокировки основного потока
Yandex Metrica 277 KiB 2 022 ms
Yandex Ads 214 KiB 1 129 ms
Google/Doubleclick Ads 226 KiB 878 ms
Yandex Share 52 KiB 446 ms
Google Analytics 19 KiB 65 ms
Google Tag Manager 71 KiB 31 ms

Дайте совет, как повысить показатели?
Вариант отказаться от денег - не подходит!

[romanu418]

Анатолий, Хм, у меня все так же подключено, но показатели не меняються особо

Answer 1

[Владимир Коротенко]

Вам в детстве мама говорила: все пойдут прыгать и ты пойдёшь?

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

Второе это желание наколоть алгоритмы этой проверки. На самом деле думайте головой над каждой рекомендацией. И что то делайте ну или игнорируйте

Comments

[ololoshka1]

Папа говорил.Я что-то писал про 100% .Я писал про оптимизацию = хорошие показатели.Внимательней!

[1ndrei]

Как я люблю такие конструктивные ответы :). Спасибо вам большое! Теперь всё стало ясно! Особенная благодарность за морализаторство.

Answer 2

[Максим Морев]

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

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

За 100/100 гоняться на чём-то больше стандартного лендоса - как правило бред сумасшедшего (оно обычно можно, но того совершенно не стоит, так как из-за отложенной загрузки/рендера будет страдать UX, что важнее красивой пузомерки).
90+ для почти любого проекта - вполне несложно, если умеючи.
А умеючи - это с опытом, анализом рекомендаций, а не поиском новых сборок/инструментов.

Comments

[Vinyard Rip]

И в чем смысл гнаться за 100 на лендосе? Лендосы делаются для платной рекламы, в основном

[Максим Морев]

Vinyard Rip,

- Вань, а ты зачем корову через забор перебросил?
- А ПОТОМУ ЧТО МОГУ!

Кому-то хочется делать свою работу хорошо, а не просто так. А pagespeed уже давно отражает реальную ситуацию, а не даёт оценку на основе бестолковых (частично) рекомендаций, как это было в каком-там-уже-не-помню году.

Answer 3

[hellcaster]

Вообще способов на 100% удовлетворить LightHouse и PageSpeed нет (Youtube 50%, Google Classroom 57%). Но есть способы, чтобы поднять на 90+

• Использовать webp изображения в теге picture, для видео webm
  
• Не использовать сторонние библиотеки или пару очень маленьких
  
• Сжимать все файлы (html, css, js, картинки)
  

Если хотите посмотреть "правильную верстку", то вот на React (98%) и "чистая" верстка (90%)

Comments

[Мега Синяк]

способов на 100% удовлетворить LightHouse и PageSpeed нет

есть, разместить ИХ ЖЕ неправильно закешированную метрику в области СВОЕГО сайта, в которую запрещён вход этим "сервисам" по юзерагенту

[ololoshka1]

Мега Синяк, как раскройте секрет)

[Мега Синяк]

раньше просто костыль ставили с одним условием на юзерагента, сейчас эта идея продвинулась

Answer 4

[jamtuson]

1. Менять картинки на webp очень сложно. Можно обойтись оптимизированными изображениями. Там, где можно использовать jpg используйте jpg, а иначе png/svg.
Если картинки высокого разрешение, то можно использовать встроенную ленивую загрузку изображений
2. Создайте критичные стили и грузите их в теги style прям в шапку. Остальные все стили переносите в футер. Можно и шрифты туда же. Если шрифты тяжелые, то можно использовать асинхронную загрузку шрифтов
3. Настройте кеширование всего и вся: стили, запросы, изображение, скрипты. Если wp у вас, то достаточно будет плагина.
4. Всякие метрики/аналитики, если возможно, тоже грузить в футере.

Answer 5

[Vashington]

А как react app, который сделан при помощи create-react-app оптимизировать?

Answer 6

[nokimaro]

минутка юмора
Как накручивают 100 баллов на Google PageSpeed