Этот вопрос закрыт для ответов, так как повторяет вопрос Стоит ли на 100% доверять мнению PageSpeed Insights?

Так ли важна скорость загрузки по PageSpeed Insights?

Приветствую)
Делаю себе портфолио.... Проверяю скорость загрузки по PageSpeed Insights, для компьютеров 97, а вот для мобильных 35-38(хотя ещё месяц назад было тоже больше 90). Сжимала изображения, скрипты, стили.....
Пишет:
- Используйте современные форматы изображений JPEG 2000, JPEG XR и WebP - но они не всеми браузерами поддерживаются
- Устраните ресурсы, блокирующие отображение , т.е css стили(они подключены в header)
- Настройте подходящий размер изображений, но они и так не большие, 800на450px
- Задайте правила эффективного использования кеша для статических объектов (яндекс карты)
Как это можно исправить, или это не так важно...? Как вы поступаете в таких ситуациях? Вы придерживаетесь рекомендациям google?
Спасибо.
  • Вопрос задан
  • 1146 просмотров
Пригласить эксперта
Ответы на вопрос 5
@pu6elozed
Bitrix, fullstack
Используйте современные форматы изображений JPEG 2000, JPEG XR и WebP

Для этого существует тэг picture с source, в котором и можно использовать webp. Если не будет поддерживаться, то и не будет использоваться этот source

Устраните ресурсы, блокирующие отображение

Советую почитать по critical-css, т.е. css который необходим для отображения первого экрана. Весь остальной css можно подключать как раз внизу сайта.

Настройте подходящий размер изображений

но на мобильном нет таких размеров. в лучшем случае 375px и @2x, что соответствует 750px, нужно подгружать те форматы и размеры изображения, которые будут подходить текущему разрешению экрана, через тот же вышеупомянутый тег source внутри picture

Задайте правила эффективного использования кеша для статических объектов

Так как мы не можем повлиять на установку кеша на серверах яндекса - можно использовать ленивую загрузку яндекс карт, например решение с промисом, который вы уже будете запускать по окончанию загрузки страницы. Или сделать комбо - первоначально отдаем скриншот, а если уже нужен интерактив - подгружаем скрипты через промис и рендерим карту.

Как это можно исправить, или это не так важно...? Как вы поступаете в таких ситуациях? Вы придерживаетесь рекомендациям google?

Как было написано - это всего лишь рекомендация. Руководствоваться этими рекомендациями или нет, решать лично вам. Однако гугл уже давно использует данные PageSpeedInsights, и учитывает их при ранжировании
Ответ написан
@vitaliy_balahnin
Новичок в веб-разработке
Всё как по первому ответу. Тоже озадачен сейчас получением высокой оценки от PageSpeedInsights. На оценку моб.версии сильно влияет наличие Я.карт. Поэтому тупо отдаю статику для мобильных и интерактив для desktop. И уже это ощутимо поднимает оценку для моб.версии.
Размещение в header только css для стартового экрана также положительно влияет на оценку.
Это 2 основных момента, которые ощутимо меняет размер оценки PageSpeedInsights для мобильной версии.
Плюс lazy load картинок, плюс разрешение картинки под размер экрана, плюс клиентское и серверное кэширование.
Ответ написан
Steelway
@Steelway
Back-end Developer, Musician, CEO LevUP Company
Я по максимуму пытаюсь оптимизировать сайт. Вернее не сам я а мой фронтендщик так как я занимаюсь бекендом. Стили советую подключать все-таки внизу сайта. Для кеширования следует использовать веб-сервер. Опять же для изображений я использую программы типа imageMagic чтобы сервер выдавал в фронтенд именно необходимый пользователю размер файла.
Ответ написан
@denisromanenko
https://habr.com/post/429668/
Больше нет, особо не волнуйтесь. Вернее, финальное значение все равно важно, но теперь все эти "сжатия в оптимизированные форматы" имеют очень малый вес, главное значение - как быстро грузится сайт. И всё.
Ответ написан
@praj2019
SEO и системное администрирование
я думаю, что последнее время падения рейтингов по мобилке в pageInsights
связанно с все большим влиянием сравнения показателей с показателями АМР
по всей видимости нам намекают, мол подключайте турбо страницы и всю эту дребедень
и не компостируйте мозги своим html5 и bootstrap
Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы