PageSpeed Insights

[vgaicuks]

Клиент тут занялся вопросом скорости сайта и аудит PageSpeed Insights советует делать lazy load картинкам.

У нас никак не получается победить swiperjs слайдер, мы уже пробовали

  preloadImages: false,
  lazy: {
    loadPrevNext: true,
  }

остальные картинки подгружаются при помощи lazysizes.js но слайдер никак не проходит аудит, хотя в Network закладке DevTool видно, что картинки вроде как подгружаются скриптом lazysizes.

Может быть у Вас будут идеи?

Среда: https://stage.spacepool.com/

Пункт аудита, что надо решить:

[allkrain]

Кроме вот этого preloadImages: false, lazy: { loadPrevNext: true, } Нужно еще и в верстке прописать у картинок
<img data-src="path/to/picture-1.jpg" class="swiper-lazy"> А в идеале еще указать src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 322 390'%3E%3C/svg%3E", где во viewBox - указать соотношение сторон у картинки, чтобы блок не схлопывался.

[vgaicuks]

Да, мы ставили data-src и класс swiper-lazy иначе картинки бы не подгружались.

[allkrain]

Предполагаю, что lazyload от swiper не ориентируется на позицию при скролле, а только на позицию в самом слайдере поэтому они и попадают в прицел pagespeed. Поэтому могу предложить только попробовать отказаться от внутреннего swiper lazyload и попробовать сделать через ваш lazysizes, только уже обязательно добавить src c svg заглушкой

[vgaicuks]

Мы перешли на lazysizes и поставили в src svg заглушку, но эффект тот же, pagespeed жалуется на картинки в слайдере :( Важный момент, который мы заметили, что косяк только в мобильной версии, на десктопе типа ок, аудит проходит.

Может еще остались идеи?

[vgaicuks]

Вотъ: https://developers.google.com/speed/pagespeed/insights/?url=https://stage.spacepool.com/&tab=mobile

[allkrain]

А этот код не вызывает подгрузку изображений косвенно? `var map_data = { count: 10, photos: [] };
map_data["photos"].push({ "photo_title": "Fora - Spitalfields", "url": "/spaces/fora-spitalfields/", "latitude": 51.487159, "longitude": -0.084341,

                "photo_file_url": "/media/space_images/fora-spitalfields_F1dh9nU.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "Finsbury Business Centre",
            "url": "/spaces/finsbury-business-centre-1/",
            "latitude": 51.524756,
            "longitude":  -0.107221,

                "photo_file_url": "/media/space_images/finsbury-business-centre-1.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "Proper Office - Shoreditch",
            "url": "/spaces/proper-office-shoreditch/",
            "latitude": 51.526194,
            "longitude":  -0.082527,

                "photo_file_url": "/media/space_images/proper-office-shoreditch-bath-place.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "Proper Office - Putney",
            "url": "/spaces/proper-office-putney/",
            "latitude": 51.460541,
            "longitude":  -0.200923,

                "photo_file_url": "/media/space_images/proper-office-putney-putney-bridge-rd-1_yUe7BrG.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "Techspace - Shoreditch",
            "url": "/spaces/techspace-shoreditch/",
            "latitude": 51.523993,
            "longitude":  -0.082597,

                "photo_file_url": "/media/space_images/techspace-shoreditch-.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "The Dock London",
            "url": "/spaces/the-dock-london/",
            "latitude": 51.508176,
            "longitude":  -0.059571,

                "photo_file_url": "/media/space_images/the-dock-london.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "V Office - Mayfair - 180 Piccadilly",
            "url": "/spaces/v-office-mayfair-180-piccadilly-1/",
            "latitude": 51.508200,
            "longitude":  -0.138893,

                "photo_file_url": "/media/space_images/v-office-180-piccadilly.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "V Office - Shoreditch - 89 Worship Street",
            "url": "/spaces/v-office-shoreditch-89-worship-street/",
            "latitude": 51.522192,
            "longitude":  -0.082126,

                "photo_file_url": "/media/space_images/v-office-shoreditch-89-worship-street.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "FirstBase - Victoria - 231 Vauxhall Bridge Rd.",
            "url": "/spaces/firstbase-victoria-231-vauxhall-bridge-rd/",
            "latitude": 51.493787,
            "longitude":  -0.140570,

                "photo_file_url": "/media/space_images/firstbase-victoria-231-vauxhall-bridge-rd.jpeg.367x232_q95_crop-smart.jpg"

        });

        map_data["photos"].push({
            "photo_title": "Dezi Design Agency House | Co-Working",
            "url": "/spaces/dezi-design-agency-house-co-working/",
            "latitude": 51.492289,
            "longitude":  -0.107687,

                "photo_file_url": "/media/space_images/dezi-design-agency-house-co-working.jpeg.367x232_q95_crop-smart.jpg"

        });

</script>`

[vgaicuks]

Мы проверяли эту гипотезу, убрав картинку, не помогло. Этот путь используется в Google картах вместе с lazysizes.

[allkrain]

Возможно стоит также проверить слайдеры. Поэтапно закоментировав каждый из них? Хотя бы узнаем в них ли вообще проблема и если в них то в каком-то конкретном или во всех?

[allkrain]

И еще в описании lazysizes меня смущает вот эта строка LazySizes normally loads in view elements as fast as possible and near the view elements are lazily pre-loaded - которая возможно может быть причиной. Если плагин реально подгружает изображения, которые еще не в области просмотра, но рядом. То pagespeed может ругаться именно на них. Тогда нужно подумать над сужением области просмотра для плагина.

[vgaicuks]

Алла, приношу свои извинения за долгую паузу – пришлось переключиться на другие задачи проекта.

Проблема была только в верхнем слайдере. Ваше предположение о загрузке рядом стоящих элементов было правильным и именно это бесило pagespeed и меня :)) Атрибут data-expand решил проблему.