Я пишу приложение на основе React, которое использует SSR для генерации контента, подходящего для поисковых систем и начальной загрузки клиента, и использую React.hydrate () на клиенте.Все хорошо.
На страницах с тегами я использую атрибуты src, srcSet и sizes на img, чтобы позволить клиенту выбрать подходящий размер изображения.Опять же, все хорошо.
Однако, по крайней мере, в Safari, когда используются и src, и srcSet, загружается ресурс src, а также соответствующий ресурс srcSet.Я вижу это в браузере сетевого инспектора.Удаление атрибута src приводит к тому, что браузер загружает только один из ресурсов srcSet.
Хотя я могу исправить клиента, это означает, что теги img являются неполными в отношении поисковых роботов поисковой системы, нет атрибута src.Я предполагаю, что сканеры не используют srcSet, но я думаю, что они могли бы сделать.Я мог бы сделать тег img более полным, используя URI данных для атрибута src с пустым SVG или 1x1 GIF / PNG, но это не помогает гарантировать, что сканеры могут получить доступ к ресурсу изображения с соответствующим разрешением.Природа веб-сайта предполагает, что, по крайней мере, ресурсы изображений должны быть расположены в поисковых системах как способ привлечения посетителей к соответствующему контенту.
Я рассмотрел несколько ленивых загружаемых компонентов React, и все они, похоже, страдаютиз какой-то комбинации этой проблемы или других.
Кто-нибудь знает, является ли это специфической ошибкой Safari, или есть общее решение для SSR изображений при ленивой загрузке на клиенте?В идеале, каково предпочтительное сочетание src, srcSet и размеров в сгенерированном SSR-коде, которое не вызывает неоптимального поведения на стороне клиента?
Примечание: ленивая загрузка желательна, поскольку это страница галереи изображений / индекса с большим количествомизображений, а мобильная / низкая пропускная способность - ключевой демографический показатель.