Настройте эффективную кодировку изображений битрикс

Оптимизация изображений для сайта на 1С-Битрикс

Подписаться на
рассылку

Отправляем полезные письма о бизнесе, сайтах и хостинге каждые 2 недели

Улучшение картинок и конвертация в Webp: как ускорить загрузку сайта без усилий.

Для ускорения работы сайта на 1С-Битрикс оптимизируют картинки и переводят в наиболее легкий формат изображений. Обычно используют специальные модули и конвертеры. Некоторые из них доступны в CMS и даже на хостинге.

Как оптимизировать изображения для сайта на 1С-Битрикс на хостинге

Самые популярные оптимизаторы изображений уже доступны на хостинге Reddock. Среди них:

JPEGoptim — обычно изображения формата «.jpeg» загружаются сверху вниз, с оптимизатором будут загружаться с размытого до четкого контура.

OptiPNG — убирает лишние функции (например, полноцвет), что уменьшает размер изображения.

PS2PDF — конвертирование файлов из «.ps» в «.pdf».

Gifsicle — оптимизирует GIF-изображения — удаляет избыточные цвета, сжимает палитру цветов.

cwebp — конвертирует изображения в формат «.webp».

Как активировать на сервере

Все оптимизаторы можно использовать на хостинге. Для активации нужно изучить каждый и активировать в командной строке.

Например, оптимизация с помощью JPEGoptim и OptiPNG подробно расписана на сайте Kubuntu.

Подключение cwebp одной кнопкой

Мы разработали функционал, который позволяет копировать ваши изображения в папку webp-copy и конвертировать их в новый формат WebP. При включении настройки система проанализирует, достаточно ли места на вашем сервере. Если места достаточно, конвертирование запустится. Если места недостаточно, на экране появится ошибка.

Настройка будет выполняться ежедневно и в автоматическом режиме — если вы добавили новые изображения, они будут конвертированы в новый формат.

Как оптимизировать изображения для сайта в CMS 1С-Битрикс

Установите модуль от Dev2Fun и следуйте инструкциям: 1С-Битрикс — Оптимизация картинок и конвертация в webp — автоматически и без сторонних сервисов. С помощью него вы улучшите большинство форматов изображений.

Источник

Хватит паранойи или почему вам не светит 100 баллов в Page Speed

Йо-йо! Отличная штука SEO. Никто не знает, что делать наверняка, почему сайт «не в топ» и почему онлайн-бизнес не работает. И в поисках истинной причины владельцы сайтов становятся как сорокалетние тётушки, которые верят всякой ерунде цыганок на рынке. И вот взяв в руки клавиатуру и набрав запрос в поисковике они видят «магический совет» — «100 баллов по google page speed и будет тебе счастье». Ни чего плохого в стремлении ускорить свой сайт нет, только fl и всякие kwork’и пестрят заявками типа «оптимизировать сайт до 100 баллов на page speed», а сами владельцы сайтов не понимают сколько на самом деле может стоить им эта оптимизация.

Сегодня я хочу рассказать почему достичь заветного значения практически невозможно на некоторых решения или это будет весьма затратно. Я разберу некоторые советы page speed и расскажу о них.

Используйте современные форматы изображений

В этом совете написано «Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.«. Этому совету, по моему мнению, соответствовать тяжелее всего по нескольким причинам.

Поддержка браузерами форматов JPEG 2000, JPEG XR и WebP

Для проверки используем caniuse, чтобы узнать поддержку форматов браузерами. На этом сайте мы узнаём, что JPEG 2000 поддерживается только safari (кроме версии для windows), JPEG XR для IE. С WebP всё лучше, но угадайте кто его не поддерживает?!) Правильно! Safari. Таким образом мы узнаём, что нет универсального формата и если вы захотите использовать их у себя то придётся грузить как минимум 2 формата. Это как минимум время, а как максимум вы доплатите дизайнеру, который делает вам баннеры.

Поддержка CMS

Конечно же, доплатить 500 рублей дизайнеру не такая уж большая проблема, но вот разобраться с CMS это не такая простая задача. На данный момент у меня получилось проверить поддержку на 3-х CMS:Wordpress, Bitrix, Joomla. Ни одна из них не поддерживает из «коробки» ни один из перечисленных форматов. На WordPress есть несколько плагинов которые говорят, что делают webp, но по факту нет ни одного бесплатного плагина для этого. Кроме того, даже в этих случаях загрузить webp в тело статьи не удаётся, при сохранении поста ссылка на файл неподдерживаемого формата удаляется. В Битриксе даже модуля такого нет. Нужно писать самому, что для wordpress, что для битрикса. Это не простые доработки, требующие хороших знаний и достаточного количества времени.

Настройте эффективную кодировку изображений

Текст совета: «Оптимизированные изображения загружаются быстрее и расходуют меньше мобильных данных«. Это очень хороший совет, но в действительности он будет всегда ругаться на «большие» картинки, даже если на «маскималках» пройтись по своим изображениям в wordpress’е плагином «Winsite Image Optimizer» на который есть ссылка в справке гугла (ссылка на imageoptim.com) то всё равно его недовольство останется.

Что остаётся делать? Лучше всего еще на «стадии фотошопа» сохранять файлы в минимальном качестве и делать это лучше всего через импорт, а не через «сохранить как». Разница в размере бывает колоссальной.

Устраните ресурсы, блокирующие отображение

Текст совета: «Некоторые ресурсы препятствуют загрузке контента страницы. Рекомендуем настроить загрузку необходимых ресурсов JS/CSS в первую очередь и отложить загрузку остальных ресурсов.«

Этот совет крайне простой если работать с самописным сайтом, если вы знаете «что, где, когда». Но если речь идёт о CMS и использования плагинов и модулей то это сделать сложно. Например в WordPress всё упирается в используемые плагины. Для решения этой проблемы придётся поковырять код плагинов и найти там как они подключают свои скрипты (и jquery в придачу). Далее с помощью wp_deregister_script убираем подключение скриптов из плагина и подгружаем их в нужном месте, где нам заблагорассудится.

Еще одним способом является сжатие скриптов и/или стилей в один файл. Этот способ действительно даёт много баллов по page speed, но по факту может замедлить отрисовку контента, а часть javascript не отработает.

Поэкспериментировав с этим способом, я увидел, что page speed показывает ухудшение параметра «Приблизительное время задержки при вводе», грубо говоря сайт на мобильных начинает тормозить. И чем больше сжать (слить в один файл / слить в один файл и минифицировать) файлы тем хуже эти параметры. То есть смартфону приходиться напрячься, чтобы это прочитать и исполнить.

Сократите время ответа сервера

Простой, как мне кажется совет, но не всегда зависит от web-программиста. Пройдитесь профилировщиком по вашему сайту и найдите тот код, который тормозит. Иногда бывает такое, что один и тот же код вызывается по несколько раз в одном и том же файле. Запишите результат исполнения в переменную и используйте её если это уместно. Используйте кэширование. Я стараюсь использовать memched, за него плачу своему хостеру от 30 до 120 рублей в месяц в зависимости от проекта. Думаю что это поможет вам.

Отложите загрузку скрытых изображений

Тест рекомендации «Чтобы уменьшить время до начала взаимодействия, рекомендуем использовать принцип lazy loading для скрытых изображений после того, как все важные ресурсы будут загружены«.

Думаю что сделать это довольно просто и в интернете есть множество примеров как это сделать. Например есть хорошая статья на CSS-tricks. Для работы его кода, главное изменить атрибуты изображения. Это довольно просто. Lazy load — это хорошо, но +1 javascript файл.

В начале статьи я рассказал о довольно противоречивых советах, а к кончу перешёл к действенным. Да, конечно оптимизация кода это хорошо, но владельцы сайтов думают о прибыли и что данные преобразования приведут к увеличению прибыли через SEO.

Нужно понимать, что оптимизация кода сайта это только первый шаг в продвижении, а само поисковое продвижение эффективно только тех сайтов, где на продукт есть сформированный спрос.

Источник

Артем

Не выводится поле для описания значения типа файл, это можно как-то поправить?

Где редактировать CMshop::drawShopsList?

Как переносить союзы?

Как вывести товары из нескольких инфоблоков по фильтру в Bitrix?

Так ли важна скорость загрузки по PageSpeed Insights?

Используйте современные форматы изображений JPEG 2000, JPEG XR и WebP

Для этого существует тэг picture с source, в котором и можно использовать webp. Если не будет поддерживаться, то и не будет использоваться этот source

Устраните ресурсы, блокирующие отображение

Советую почитать по critical-css, т.е. css который необходим для отображения первого экрана. Весь остальной css можно подключать как раз внизу сайта.

Настройте подходящий размер изображений

но на мобильном нет таких размеров. в лучшем случае 375px и @2x, что соответствует 750px, нужно подгружать те форматы и размеры изображения, которые будут подходить текущему разрешению экрана, через тот же вышеупомянутый тег source внутри picture

Задайте правила эффективного использования кеша для статических объектов

Так как мы не можем повлиять на установку кеша на серверах яндекса — можно использовать ленивую загрузку яндекс карт, например решение с промисом, который вы уже будете запускать по окончанию загрузки страницы. Или сделать комбо — первоначально отдаем скриншот, а если уже нужен интерактив — подгружаем скрипты через промис и рендерим карту.

Как это можно исправить, или это не так важно. Как вы поступаете в таких ситуациях? Вы придерживаетесь рекомендациям google?

Источник

Как ускорить сайт по новому алгоритму Google Page Speed (введенному в ноябре)

После обновления Google PageSpeed показатели сайтов, которые были 95-100% стали 20-30 на мобильном (а бывает и того меньше) и 50-60 на компьютере.

Ссылка на предыдущую инструкцию по старому алгоритму: modx.ru/novosti-i-stati/article/375/ (пригодится для работы).

Оптимизация

Устраните ресурсы, блокирующие отображение
Это про перенос скриптов и стилей вниз сайта, было в предыдущей инструкции.

Сократите время ответа сервера (время до получения первого байта)
Проверить и отключить неиспользуемые чанки, сниппеты и плагины с ошибками, которые замедляют работу.

Настройте подходящий размер изображений
1. Нужно проверить, какие изображения стоят слишком крупного размера и подключить к ним phpThumb для масштабирования и обрезки, либо просто уменьшить их через imagecompressor.com/ru/
2. Установить Adaptive Images: habr.com/ru/company/kelnik/blog/214071/

Настройте эффективную кодировку изображений
Аналогично предыдущему пункту.

Отложите загрузку скрытых изображений
Здесь нужно использовать Lazy Load для изображений, особенно интересно будет подружить его со слайдерами и параллаксами.

Отложите загрузку неиспользуемого контента CSS
Это Load CSS, было в предыдущей инструкции.

Используйте современные форматы изображений
Здесь поможет Лехин плагин: modx.ru/novosti-i-stati/article/442/, большое спасибо тебе за него, без этого паззл не складывался!

Используйте видеоформаты для анимированного контента
Использовать видео в формате webm.

Уменьшите размер кода CSS
Это также было в предыдущей инструкции.

Уменьшите размер кода JavaScript
Это также было в предыдущей инструкции.

Диагностика

Минимизируйте работу в основном потоке
Убираем по возможности лишние шрифты, скрипты, стили.

Задайте правила эффективного использования кеша для статических объектов
Это уже было в предыдущей инструкции.

Сократите размер структуры DOM
Это количество блоков и количество вложенных друг в друга div’ов, уменьшаем по возможности их количество.

Сократите время выполнения JavaScript
Это про минификацию и отложенную загрузку скриптов, уже было в предыдущей инструкции.

Предотвратите чрезмерную нагрузку на сеть
Здесь поможет сокращение подключаемых виджетов (счетчики, онлайн-консультанты, карты, лишние счетчики).

Сократите глубину вложенности критических запросов
Аналогично предыдущему пункту.

Успешные аудиты (для большинства сайтов эти пункты уже сразу будут пройдены)

Включите сжатие текста
Это про gzip, было в предыдущей инструкции.

Используйте предварительное подключение к необходимым доменам
Если используете несколько доменов, то нужно прописывать в head следующее:

Избегайте большого количества переадресаций
Здесь нужно использовать переадресацию с www на без www (или наоборот, если главное зеркало уже с www, также здесь требуется учитывать https, если оно есть).

Настройте предварительную загрузку ключевых запросов
Здесь использовать следующее:

Источник

Оптимизация больших изображений для сайта?

На сайте используется ряд изображений с высоким разрешением от 2500px.

pageSpeed конечно же ругается, поэтому пытаюсь использовать современный атрибут srcset для изображений:

Для высоко разрешения так и использую в 2500px , а для обычного делаю эти же картинки в уменьшенным в 2 раза разрешением.

Пример записи img для реального проекта:

В итоге по всем «возможностям» pagespeed ругается на эти изображения

И такие проблемы только для моб. девайсов:

Для десктопа все отлично, скорость 90+!

Вопрос: как правильно использовать srcset, стоит ли вообще использовать данный атрибут?! Какие есть возможности оптимизации изображений без потери качества, но с сохранением скорости для моб. девайсов.

P.S: lazy load на телефонах (особенно при плохом интернете) не все фото грузит. Не хотелось бы тянуть retina.js.

И мне это, возможно, только кажется, но такие проблемы со скоростью (а точнее с картинками на сайте) начались недавно)) Сжимаю изображения уже до невозможного (бывает уже с серьезной потерей качества), но проблемы остаются.

• Вопрос задан более двух лет назад
• 3194 просмотра

По пунктам:
1. Используйте современные форматы изображений — гугл хочет чтобы на сайте использовались более легкие(не всегда, но в большинстве случаев) варианты изображений в формате допустим .webp
2. Настройте эффективную кодировку изображений — значит что изображения слишком много весят
4. И самое главное, что влияет на все предыдущие пункты — некорректное соотношение размера отображаемого изображения — его визуальному размеру. К примеру — у вас изображение 2500px, действительно ли его нужно отображать на смартфонах в полный размер. или достаточно превью?

Источник