Есть лендинг, который на данный момент почти не оптимизирован https://beta.qasource.top/ru Он весит около 8Мб. Я понимаю, что это очень много. Там тяжелые фоновые картинки, которые ужать по размеру особо не получится, т.к. png с прозрачным фоном. Подскажите способы/идеи, как бы вы оптимизировали, уменьшили вес страницы? Что я планирую сделать: В html засунуть все мелкие картинки в формате svg (svg есть в наличии) Мелкие разноцветные иконки передавать спрайтами Попытаюсь немного ужать фоны. Возможно прозрачные фоновые части сделаю отдельно, а непрозрачные пережму в jpg (если это даст эффект) В ларавеле уже определяю тип девайса: десктоп, планшет, мобилка. И дальше буду подставлять картинки уменьшенных размеров. Попробую подключить бесплатный CDN Что еще можно сделать с картинками и их загрузкой? У меня есть пару мыслей, но хотелось бы услышать мнение специалистов: Что если я js-скриптом буду передавать информацию о размерах экрана и возвращать точный или максимально близкий заранее сохраненный размер картинки? В этом случае я могу заранее подготовить не три варианта размеров, а например 10-15. Тогда для 320 пикселей я загружу более подходящую (меньшую) картинку по размеру, а не 760 к примеру. Что если после того, как страница вернет событие, что она уже полностью загружена, я запущу скрипт, который подсунет ссылки на фоновые изображения? В этом случае страница загрузится гораздо быстрее, а фоны - это уже будет догрузка. Что-то наподобие лейзилоада. Я смотрю с точки зрения поисковых машин. Мне кажется для SEO-оптимизации это неплохое решение, чтобы уменьшить время загрузки страницы. Посоветуйте или покритикуйте со своего опыта. Буду очень признателен.
Об scrset не слышал. Нужно разобраться, может отсутствие поддержки в ИЕ - не так уж и страшно, для ИЕ можно и п.4 применить. А вот здесь не очень понял, что вы имеете в виду? Если я вас правильно понял, то если я в браузере буду менять ширину окна браузера от 320 до 1920, то мне @media будет поочередно подгружать все размеры картинок? От этой неприятности можно как-то избавиться?
Ну а как по твоему меняют внешний вид для смартфонов и десктопов) Код (Text): @media only screen and (max-width: 600px) and (min-width: 400px) {...}
@Сереганек Ну да. Для этого все и задумано. Какой бек пропишешь такой и будет загружаться. --- Добавлено --- Вообще браузеры даже картинки с display none не загружают так что можно через медиа менять видимость но правильнее делать фоном
@nospiou спасибо. Возьму на заметку... Очень ценный совет, и главное проще, чем скриптами пересылать размеры экрана, а затем теми же скриптами подсовывать адреса к правильным картинкам. Может еще как-то можно оптимизировать?
Это будет А с этим уже посложнее, т.к. png сильно потеряет качество. А что вы думаете насчет отложенной загрузки фонов? Только в этом случае ссылки на них придется размещать где-то внутри html
Может сначала вместо этих тяжелых фонов грузить однотонные jpg (они будут легкие). А затем заменять уже более тяжелыми
@Сереганек открой консоль (вкладка нетворк) отключи кеш включи режим медленного 3g и посмотри как загружаются фоны
@nospiou Я сегодня включал Fast 3G - отстойная скорость загрузки. Около 10 сек. Но там и спидтест что-то странные цифры показывает, около 1,5Мб. Не похоже на Fast 3G
@Сереганек ну зато тестить прикольно https://stackoverflow.com/questions/819336/how-to-preload-images-without-javascript
@MRSgiba есть про версия https://developers.google.com/web/tools/lighthouse/ ну или просто консоль аудит там все необходимые подсказки по оптимизации
Из разряда по сложнее. Можно дополнительно кешировать статику через сервис воркер. Время первого визита это не сократит. Зато все последующие будут быстрее. Тем более для лендинга и офлайн режим сделать не проблема. И моб через pwa