Closed vgaicuks closed 4 years ago
Кроме вот этого
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 - указать соотношение сторон у картинки, чтобы блок не схлопывался.
Да, мы ставили data-src
и класс swiper-lazy
иначе картинки бы не подгружались.
Предполагаю, что lazyload от swiper не ориентируется на позицию при скролле, а только на позицию в самом слайдере поэтому они и попадают в прицел pagespeed. Поэтому могу предложить только попробовать отказаться от внутреннего swiper lazyload и попробовать сделать через ваш lazysizes, только уже обязательно добавить src c svg заглушкой
Мы перешли на lazysizes и поставили в src svg заглушку, но эффект тот же, pagespeed жалуется на картинки в слайдере :( Важный момент, который мы заметили, что косяк только в мобильной версии, на десктопе типа ок, аудит проходит.
Может еще остались идеи?
А этот код не вызывает подгрузку изображений косвенно?
`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>`
Мы проверяли эту гипотезу, убрав картинку, не помогло. Этот путь используется в Google картах вместе с lazysizes.
Возможно стоит также проверить слайдеры. Поэтапно закоментировав каждый из них? Хотя бы узнаем в них ли вообще проблема и если в них то в каком-то конкретном или во всех?
И еще в описании lazysizes меня смущает вот эта строка LazySizes normally loads in view elements as fast as possible and near the view elements are lazily pre-loaded - которая возможно может быть причиной. Если плагин реально подгружает изображения, которые еще не в области просмотра, но рядом. То pagespeed может ругаться именно на них. Тогда нужно подумать над сужением области просмотра для плагина.
Алла, приношу свои извинения за долгую паузу – пришлось переключиться на другие задачи проекта.
Проблема была только в верхнем слайдере. Ваше предположение о загрузке рядом стоящих элементов было правильным и именно это бесило pagespeed и меня :)) Атрибут data-expand решил проблему.
Клиент тут занялся вопросом скорости сайта и аудит PageSpeed Insights советует делать lazy load картинкам.
У нас никак не получается победить swiperjs слайдер, мы уже пробовали
остальные картинки подгружаются при помощи lazysizes.js но слайдер никак не проходит аудит, хотя в Network закладке DevTool видно, что картинки вроде как подгружаются скриптом lazysizes.
Может быть у Вас будут идеи?
Среда: https://stage.spacepool.com/
Пункт аудита, что надо решить:![Screen Shot 2020-02-17 at 13 43 31](https://user-images.githubusercontent.com/442747/74652062-e60be800-518d-11ea-8ede-724bc1923976.png)