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

Оптимизация изображений для сайта на 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.

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

Источник

Оптимизация сайта на WordPress для Google PageSpeed

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

Проверить, насколько быстр ваш сайт, можно с помощью сервиса Google PageSpeed Insights.

Хорошая скорость загрузки — если сайт находится в зеленой зоне.

Как улучшить показатели Google PageSpeed

Ошибка » Отложите загрузку скрытых изображений» ( Defer offscreen images)

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

Установите плагин Lazy Load Optimizer, который добавляет ленивую загрузку для изображений WordPress, а также для изображений товаров и категорий товаров WooCommerce.

Ошибка » Задайте правила эффективного использования кеша для статических объектов » ( Serve static assets with an efficient cache policy )

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

Для исправления этой ошибки нужно вставить следующий код в файл .htaccess (находится в корневой директории WordPress, еще к нему можно получить доступ с помощью плагина Yoast SEO):

Если у вас стоит Яндекс.Метрика, или Google Analytics — то исправить данную ошибку не получится. Но ничего страшного, так как данные сервисы не тормозят работу вашего сайта.

Ошибки — » Уменьшите размер кода CSS «, » Уменьшите размер кода JavaScript», «Сократите глубину вложенности критических запросов», » Устраните ресурсы, блокирующие отображение «

Эти ошибки поможет исправить плагин Autoptimize. В настройках включаем:

• Оптимизировать код HTML
• Оптимизировать код JavaScript
• Оптимизировать код CSS

Для исправления о шибки » Устраните ресурсы, блокирующие отображение » нужно поставить галочку в пункте Встраивать все CSS:

Таким образом весь css встроится в начало страницы. Что касается js — плагин собирает все js-файлы в один файл, и загружает его в конце документа. То есть js больше не будет мешать загрузке сайта, что ускорит отображение страницы для пользователя.

Ошибка «Сократите глубину вложенности критических запросов» может возникнуть, если на сайте используются шрифты Google fonts. Перейдите на вкладку «Дополнительно» данного плагина. Там нужно установить настройку для Гугл шрифтов — Combine and preload in head (fonts load late, but are not render-blocking).

Ошибка — » Настройте предварительную загрузку ключевых запросов» (Preload key requests)

В решении этой проблемы опять поможет Autoptimize. Во вкладке «Дополнительные» нужно найти пункт Preload specific request.

Сюда нужно вставить полный урл ресурса. Если их несколько, то вставляем несколько, разделяя запятой. Урл ресурса можно скопировать, кликнув правой кнопкой мыши по ссылке на ресурс:

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

Чтобы оптимизировать изображения, установите плагин WP Smush. Этот плагин оптимизирует все изображения, загруженные в Медиа-библиотеку WordPress.

Если есть изображения, загружаемые из директории темы, их придется оптимизировать вручную.

Хороший сайт, на котором можно оптимизировать картинки онлайн — https://tinypng.com/

Ошибка — » Используйте современные форматы изображений » ( Serve images in next-gen formats)

Для устранения этой ошибки подойдет плагин WebP Converter for Media . Этот плагин создаст для всех изображений на сайте их аналоги в новом формате WebP. На браузерах, которые поддерживают этот формат, картинки будут грузиться в новом формате, в остальных браузерах будет загружаться старый формат png, jpg.

Ошибка » Сократите время ответа сервера (время до получения первого байта)»

Чаще всего с ней помогает бороться плагин WP Super Cashe. После установки необходимо в настройках плагина включить кеширование и включить опцию — «Сжимать файлы кэша чтобы ускорить работу»:

Если это не помогает, стоит задуматься о смене хостинга на более качественный.

Ошибка «Включите сжатие текста»

Добавьте в файл .htaccess:

Дополнительно

Cниппет, который добавит асинхронную загрузку для скриптов, подключенных через wp_enqueue_script():

Если нужна помощь в ускорении вашего сайта — мы оказываем услугу оптимизации сайтов на WordPress.

Вам помогла эта статья? Оцените!

Комментариев: 17

Здравствуйте. А я блин, от многого избавится не могу. Плагин Autoptimize не работает, как было куча скриптов, так и есть. Но вопрос в другом! Как мобильную версию оптимизировать? На десктопе 86% добился, а вот на мобильном 71% максимально. Может кто подскажет?

Плагин Autoptimize может не работать из-за неправильной конфигурации хостинга, или устаревшей версии PHP. Попробуйте поставить версию PHP 7.0

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

Статья обновлена, возможно сейчас результат будет лучше.

Спасибо, теперь сервис PageSpeed Insights перестал ругаться красными воцклицательными знаками. Использовал подсказку по добавлению правил в .htaccess

а как для самописного сайта ускорить загрузку?

Сделать вручную то, что делают эти плагины — минифицировать css, js и html. Все скрипты объединить в 1 файл и подключать внизу страницы, либо используя атрибут async. Сжать все изображения на сайте. Интегрировать ленивый загрузчик для изображений, например lazysizes, ссылка на него есть в начале статьи.

Когда делаю шаблон (не использую готовые, там трудно добиться высоких показателей по pagespeed), обязательно включаю кеш в htaccess с указанием всех форматов, ужимаю все картинки через FileOptimizer, обязательно ставлю плагин Minit. Шрифты стараюсь подключать со своего сервера и в CSS прописываю им font-display: swap. Также просматриваю код и если что-то не устраивает в плане нагрузки удаляю (скрипты, стили картинки). Когда начинал заниматься созданием шаблонов под WordPress большая ошибка была в том, что подключал стили и скрипты прямо в шаблоне, например в header.php, а оказалось правильно через functions.php через функции wp_enqueue_style/wp_enqueue_script, начинающим стоит взять на заметку.

у меня на сайте тестов для врачей с 30 на мобильных до 61 поднялось. Так гугл пишет, что блокируют отображение файлы autoptimize.css , которые он комбинирует.

Возможно вы не включили в настройках «Встраивать все CSS»

Спасибо за полезную статью, многое использую у себя + еще w.tools, ускорение на лицо.

Спасибо автору за статью. Поднял загрузку страницы с 15 балов на мобилках и 31 на ПК до 70 и 90+. Рекомендую!

Это далеко не всё. Главные методы — это оптимизация картинок и кеширование. Не всем помогут эти варианты с асинхронной загрузкой, а тем более объединение стилей и скриптов не навредив сайту внешне.

Добрый день! Большое Вам спасибо, добрый человек! Статья отличная! Всё выполнила по Вашим рекомендациям. Загрузка страницы с 15 баллов на мобильных и 52 на ПК выросла до 85 и 98 соответственно. Удачи Вам во всех делах и крепкого здоровья!

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

помогло
мобильная: 49 до 71
для компьютеров: 80 до 95

Источник