Повысить показатели для PageSpeed Insights

Den1xxx

Den1xxx

Разрушитель (V)
Сообщения
126
Симпатии
69
Баллы
1 016
Здравствуйте
Есть сайт, на котором много товаров, их картинок, и хорошего качества. Как можно повысить показатель PageSpeed Insights?
Уменьшать картинки заказчик не хочет.
Пробовал какой-то плагин по этому методу https://techblog.sdstudio.top/javas...i-pomoshhi-otlozhennoj-zagruzki-izobrazhenij/
Вместо каждой картинки — заглушка, а все изображения грузятся после полной загрузки страницы.
Таким же образом пакуются скрипты и стили, они изначально меняются, потом после загрузки страницы догружаются полностью.
Из всего многообразия грузится только «критичный» css в начале страницы, остальное потом.
Результат впечатляет. Выигрыш в скорости загрузки страницы в несколько раз. Очки подскакивают до 95%.
Но, мне кажется, подменять сорцы у картинки — наступить на ещё большие грабли для СЕО?
 
Вообще мерять коммерческий продукт "попугаями" - не благодарное дело. Оптимизировать то нужно, но это не должно быть самоцелью.
 
Базовой оптимизации изображений без потери качества ( tinypng ), использование webp формата, минифицировать цсс, оложенная загрузка шрифтов и настроить конгифи ( php-fpm, nginx) разве не достаточно?
А после уже красивости по типу лейзилоадов или заглушек.
 
Surprise сказал(а):
Базовой оптимизации изображений без потери качества ( tinypng ), использование webp формата, минифицировать цсс, оложенная загрузка шрифтов и настроить конгифи ( php-fpm, nginx) разве не достаточно?
А после уже красивости по типу лейзилоадов или заглушек.
Нажмите, чтобы раскрыть...
Может и нет. Если изображение 2+ Мб, и их несколько на странице, с мобильного будет грузить больше 3 сек, а это плохо.
Тут принципиально вот в чем вопрос: ведь поисковики не увидят и не проиндексируют картинки, если в них нет src.
 
Den1xxx сказал(а):
Может и нет. Если изображение 2+ Мб, и их несколько на странице, с мобильного будет грузить больше 3 сек, а это плохо.
Тут принципиально вот в чем вопрос: ведь поисковики не увидят и не проиндексируют картинки, если в них нет src.
Нажмите, чтобы раскрыть...
Для этого есть тег <img srcset="..."> в котором перечисляются все размеры изображения.
Кроме того, лучше использовать нативный <img loading="lazy" src="..." scrset="...">
Он не глючит, не требует библиотек и выполняет требования PageSpeed.
И по сео с ним все отлично.
 
Den1xxx сказал(а):
Здравствуйте
Есть сайт, на котором много товаров, их картинок, и хорошего качества. Как можно повысить показатель PageSpeed Insights?
Уменьшать картинки заказчик не хочет.
Пробовал какой-то плагин по этому методу https://techblog.sdstudio.top/javas...i-pomoshhi-otlozhennoj-zagruzki-izobrazhenij/
Вместо каждой картинки — заглушка, а все изображения грузятся после полной загрузки страницы.
Таким же образом пакуются скрипты и стили, они изначально меняются, потом после загрузки страницы догружаются полностью.
Из всего многообразия грузится только «критичный» css в начале страницы, остальное потом.
Результат впечатляет. Выигрыш в скорости загрузки страницы в несколько раз. Очки подскакивают до 95%.
Но, мне кажется, подменять сорцы у картинки — наступить на ещё большие грабли для СЕО?
Нажмите, чтобы раскрыть...
С этим могут быть проблемы, так как заглушка обычно одна, (то есть одна картинка на все страницы), особенно в случае с thin content (когда контент мало отличается на соседних страниц) - было такое на одном проекте.

В целом же достаточно обычного лейзи лоад и желтой зоны скорости.
 
Reset сказал(а):
В целом же достаточно обычного лейзи лоад и желтой зоны скорости.
Нажмите, чтобы раскрыть...
В жёлтую не получается попасть, 46%. С плагином — 95% на мобильном и 97% десктоп.
Заглушка действительно одна, но картинки в основном разные.
Конечно, хочется «серебряной пули» вместо кропотливой работы)))
Но как бы не было потом больно...
 
Den1xxx сказал(а):
В жёлтую не получается попасть, 46%. С плагином — 95% на мобильном и 97% десктоп.
Заглушка действительно одна, но картинки в основном разные.
Конечно, хочется «серебряной пули» вместо кропотливой работы)))
Но как бы не было потом больно...
Нажмите, чтобы раскрыть...
Ещё один момент - пейджспид как и гуглбот сейчас смотрят только мобильную версию.
Обязательно посмотри, как отображается сайт в пейджспиде на мобильных - это видно на странице проверки или в search console -> принудительно просканировать страницу.
Если CSS подгружается динамически js-ом, то такой код гугл бот может не исполнять и будет считать неподходящим для мобильных устройств. А это приведет к серьезному падению позиций.
Гугл бот вообще очень избирательно понимает джаваскрипт и исполняет его далеко не на первом сканировании - лучше всего считать, что не исполняет совсем, чтобы не возникло неожиданных проблем.

По поводу загрузки изображений уже ответил - метод проверенный и надежный :)
 
Проверь ещё, чтобы в robots.txt были четко прописаны директивы:
allow: /каталог_с_изображениями/*.jpg
allow: /каталог_со_стилями/*.css
allow: /каталог_со_скриптами/*.js

При этом проверь, чтобы файлы по этим путям открывались и давали код ответа 200 ОК - только такой и никакой другой.
 
Den1xxx сказал(а):
Здравствуйте
Есть сайт, на котором много товаров, их картинок, и хорошего качества. Как можно повысить показатель PageSpeed Insights?
Уменьшать картинки заказчик не хочет.
Нажмите, чтобы раскрыть...

А на чем сайт ?
Перегони картинки в WebP и сделай ленивую загрузку и будет тебе счастье :)
 
Еще много баллов снимают за загрузку внешних скриптов, типа метрики, гугл тэга, карт и тд.
Вынеси загрузку внешних скриптов в js функцию, которая обрабатывается при скроле. Если сайт на wp есть простой плагин True Lazy Analytics
 
DiNo сказал(а):
Еще много баллов снимают за загрузку внешних скриптов, типа метрики, гугл тэга, карт и тд.
Вынеси загрузку внешних скриптов в js функцию, которая обрабатывается при скроле. Если сайт на wp есть простой плагин True Lazy Analytics
Нажмите, чтобы раскрыть...
Метод действенный, но в таком случае может потенциально искажаться например, показатель отказов, если говорить про аналитику. Понятно, что не всем это важно, но нужно иметь ввиду.
Еще бы добавил про Google Tag Manager. Спец на проекте, который отвечает за настройку GTM может не знать, что вы там "боретесь" с Google PageSpeed и засовывает туда кашу из неоптимизированного js, а там тоже есть всякие механики по оптимизации.
 
Den1xxx сказал(а):
Этот не грузится с сайта файлом, и вообще асинхронный, поэтому на загрузку не должен влиять.
Нажмите, чтобы раскрыть...
на скорость загрузки для пользователя не влияет, но pagespeed ждет окончание асинхрона и режет за это баллы. Все внешние скрипты загружаемые любым способом отнимают баллы.

Еще важно прописать ширину и высоту у всех картинок на странице, улучшит показатель CLS + не будет подергиваний при загрузке, если стоит lazy load
Минифицировать HTML в 1 строку еще можно
 
Последнее редактирование:
Для ответа нужно войти/зарегистрироваться
Назад
Верх