Оптимизация по загрузке картинок
Отложенная загрузка картинок
1. Картинки можно загружать не сразу, а после выполнения JS, для этого указываем путь к файлу в data-src.
<img src="//:0" data-src="{path}">
В этом случае загрузка картинки не мешает загрузке страницы, стилей и скриптов.
2. Используйте //:0 для пустых src (но он не считается валидным значением для W3 Validator). Если указать пустое значение или #, это может вызывать повторную загрузку страницы (она не будет видна в браузере, но фактически браузер направит запрос к серверу).
либо - src="data:,"
(считается валидным для W3 Validator).
Не используйте javascript:void(0) - иначе будут ошибки в Console и картинка будет показываться как битая на странице.
https://stackoverflow.com/questions/19126185/setting-an-image-src-to-empty/19126281
https://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src
Установка размера картинкам
У картинок желательно ставить размер (этого требует PageSpeed). Можно это делать следующим образом:
Ставим у картинки реальные размеры через width, height атрибуты.
И создаем такое правило CSS:
img {
max-width: 100%;
height: auto;
}
Использование Webp формата
Если вы хотите улучшить показатели Pagespeed, то имеет смысл задействовать формат webp.
Используйте сервис для ручной конвертации картинок в webp https://products.aspose.app/imaging/conversion/jpeg-to-webp
Затем на странице вы указывается следующую разметку для вывода картинки:
<picture>
<source srcset="/uploads/rs/landImages/5/mainphoto.webp" type="image/webp" loading="lazy" alt="">
<img src="/uploads/rs/landimages/5/mainphoto.png" alt="" width="900" height="625">
</picture>
Для современных браузеров будет использован вариант с webp, а для остальных браузеров будет подгружаться картинка в png или jpg.
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO Возможности поисковой оптимизации сайта (SEO) Генерация RSS в SQL процедуре Интеграция с Яндекс XML API Интеграция API Яндекс.Вебмастер SEO - Как создать виртуальные страницы с одним шаблоном, но под разные ключи Оптимизация по загрузке картинок Как сделать карту сайта Яндекс Турбо - как включить Яндекс Турбо страницы для контента на сайте Интеграция с Тургенев API для проверки качества контента Создание AMP страниц для улучшения позиций в Google Внедрение рекламных блоков в контент Улучшение Pagespeed за счет отключения лишних счетчиков (как убрать некоторые скрипты для пауков, ботов)
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы