Оптимизация картинок на сайте - для чайников
в работе над любым сайтом, кроме собственных трудовых ресурсов огромную роль играют и сторонние сервисы.
Так как у большинства трафик на сайт это либо поисковые системы, либо социальные сети, то приходиться учитывать интересы именно этих сервисов.
А что нам диктуют поисковики, кроме намеков на покупку у них рекламы?
- Навязывают форматы удобные для индексирования содержимого сайта самим поисковиком
- Советуют оптимизировать размер файлов и скриптов (это ведь все, тоже дублируется поисковой системой)
А в ответ предоставляют более благосклонное отношение в результатах выдачи.
Для того, что-бы владельцы сайтов понимали как именно надо допиливать свой проект для одобрения поисковой системой существуют официальные сервисы у Google и Яндекс.
Сейчас речь пойдет о https://developers.google.com/speed/pagespeed/insights/
так как именно этот сервис в настоящее время считается мерилом скорости загрузки сайта и как следствием - более выгодных условий при ранжировании результатов поиска.
Как массово оптимизировать размер картинок на сайте для ускорения загрузки страниц? Ручное пересохранение каждой картинки отдельно - не предлагать. Нужен скрипт оптимизации изображения на сайте - запустил его и вжик... получил результат.
Чем меньше действий от пользователя требуется - тем лучше. И такой сервис уже есть.
OptiPic - сервис автоматически найдет и сожмет все изображений практически без вашего участия.
Сам сервис разъесняет:
Тестировать работу будем прямо на нашем сайте tcse-cms.com
и проверим, действительно ли работает с любой CMS
Что-бы в этом убедиться без регистрации увы никак.
Тогда приступаем.
https://optipic.io/ru/register/
процедура стандартная
а вот способы устновки модуля
даже удивляют своей угодливостью.
автоматически это конечно прекрасно, но уж лучше по старинке ручками, заодно проверим что там во внутренностях у этого модуля.
весь модуль из трех файлов
Неважно как много изображений храниться на вашем сайте, модуль сканирует папку сайта и составляет список всех изображений.
После этого через веб-интерфейс сервиса вы определяете какие какие картинки имеет смысл сжимать, а какие оставить без изменений. Либо просто нажимаете - "сделать все как надо" и ждете результата.
Далее сервис производить оптимизацию картинок.
Я задал вопросы разработчикам сервиса для уточнения принципов работы.
Вопрос: Скрипт на сайте создает копию картинки с новой степенью сжатия?
Вопрос: Скрипт отдает прямую ссылку на картинку сервису, тот ее скачивает, оптимизирует и заливает на наш сайт обновленное изображение? Не слишком ли все это напоминает удаленный shell и позволяет невозбранно сервису делать на сайте что угодно? Как быть с уровнем доверия?
Ну вот, основное выяснили, пора тестировать.
Настраиваем сервис на работу с сайтом
Если DLE используется по правильному, то все изображения хранятся в папках шаблонов /templates/ и в папке загрузок /uploads/
можно указать только эти параметры.
первоначально позволил сервису просканировать весь сайт целиком
получил
после этого уточнил, что сканировать надо только нужные мне папки
Нам нужно 350 мегабайт для работы сервиса, смотрим стоимость пакетов https://optipic.io/ru/price/
минимально подходящий 2 гигабайта за 750 рублей.
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ftcse-cms.com%2F
результаты ДО оптимизации
обратите внимание, в мобильной версии CSS и JS файлы для bootstrap загружаются с CDN maxcdn.bootstrapcdn.com и Гуглу это по всей видимости совсем не нравиться.
предположительно, после того как изображения будут оптимизированы, скорость загрузки сайта возрастет.
В случае положительного результата (по версии Гугла) вся услуга нам обойдется в каких-то 750 рублей (пара месяцев хостинга).
процесс запущен
в процессе работы
смотрим на результаты статистики сжатия
результаты сжатия
получаем главное значение всей процедуры
Сама процедура сжатия занила около 40 минут для 320 мегабайт картинок.
для мобильной версии разницы нет.
Но как только мы меняем CDN для bootstrap на локальные копии внутри нашего шаблона то получаем совсем другие цифры.
А если еще дополнительно средствами движка сожмем скрипты и стили
Вместо
Укажем
и JS
Вместо
Укажем
То результаты теста еще вырастут
Для основной версии сайта, стили и скрипты не сжимали, результаты только на основе сжатия картинок
Сжимаем все локальные CSS в настольной версии и получаем прирост на 1 балл
дополнительно сжимаем все локальны JS и получаем еще 1 балл
Ну вот, с такими результатами и минимумом усилий уже можно надеятся на "симпатии" поисковой системы.
Еще большее ускорение работы сайта как говорят знающие люди можно добиться ТОЛЬКО переводом сайта с apach на nginx, но тут есть свои подводные камни. И подавляющему большинству владельцев сайтов на виртуальном хостинге все эти заморочки будут совершенно не в тему.
Сервис автоматической оптимизации размера картинок действительно работает и буквально в пару кликов позволяет увеличить скорость загрузки сайта. Это именно то самое "простое решение" которое оптимально подходит большинству владельцев сайтов.
Наши рекомендации.
OptiPic для сжатия изображений
Так как у большинства трафик на сайт это либо поисковые системы, либо социальные сети, то приходиться учитывать интересы именно этих сервисов.
А что нам диктуют поисковики, кроме намеков на покупку у них рекламы?
- Навязывают форматы удобные для индексирования содержимого сайта самим поисковиком
- Советуют оптимизировать размер файлов и скриптов (это ведь все, тоже дублируется поисковой системой)
А в ответ предоставляют более благосклонное отношение в результатах выдачи.
Для того, что-бы владельцы сайтов понимали как именно надо допиливать свой проект для одобрения поисковой системой существуют официальные сервисы у Google и Яндекс.
Сейчас речь пойдет о https://developers.google.com/speed/pagespeed/insights/
так как именно этот сервис в настоящее время считается мерилом скорости загрузки сайта и как следствием - более выгодных условий при ранжировании результатов поиска.
Как массово оптимизировать размер картинок на сайте для ускорения загрузки страниц? Ручное пересохранение каждой картинки отдельно - не предлагать. Нужен скрипт оптимизации изображения на сайте - запустил его и вжик... получил результат.
Чем меньше действий от пользователя требуется - тем лучше. И такой сервис уже есть.
OptiPic - сервис автоматически найдет и сожмет все изображений практически без вашего участия.
Сам сервис разъесняет:
Подключается к любому сайту практически в 2 клика
Поддерживаются все известные CMS и фреймворки, а также самописные сайты на PHP. Подключите наш модуль к сайту — он найдет все изображения на сайте и сожмет их.
Поддерживаются все известные CMS и фреймворки, а также самописные сайты на PHP. Подключите наш модуль к сайту — он найдет все изображения на сайте и сожмет их.
Тестировать работу будем прямо на нашем сайте tcse-cms.com
и проверим, действительно ли работает с любой CMS
Что-бы в этом убедиться без регистрации увы никак.
Тогда приступаем.
https://optipic.io/ru/register/
процедура стандартная
а вот способы устновки модуля
даже удивляют своей угодливостью.
автоматически это конечно прекрасно, но уж лучше по старинке ручками, заодно проверим что там во внутренностях у этого модуля.
весь модуль из трех файлов
Логика работы модуля проста до гениальности:
Неважно как много изображений храниться на вашем сайте, модуль сканирует папку сайта и составляет список всех изображений.
После этого через веб-интерфейс сервиса вы определяете какие какие картинки имеет смысл сжимать, а какие оставить без изменений. Либо просто нажимаете - "сделать все как надо" и ждете результата.
Далее сервис производить оптимизацию картинок.
Я задал вопросы разработчикам сервиса для уточнения принципов работы.
Вопрос: Скрипт на сайте создает копию картинки с новой степенью сжатия?
Если в настройках системы включено сохранение оригиналов, то исходная картинка перед сжатием копируется и кладется рядом.
А исходная картинка перезаписывается оптимизированной версией.
Если сохранение оригиналов выключено, то просто исходная картинка перезаписывается на оптимизированную.
А исходная картинка перезаписывается оптимизированной версией.
Если сохранение оригиналов выключено, то просто исходная картинка перезаписывается на оптимизированную.
Вопрос: Скрипт отдает прямую ссылку на картинку сервису, тот ее скачивает, оптимизирует и заливает на наш сайт обновленное изображение? Не слишком ли все это напоминает удаленный shell и позволяет невозбранно сервису делать на сайте что угодно? Как быть с уровнем доверия?
Скрипт интеграции не умеет изменять/заливать какие угодно файлы и выполнять какие угодно команды/действия.
У него есть сильно ограниченный набор команд.
Основная - это команда "оптимизировать изображение ХХХ". При получении такой команды скрипт проверяет - существует ли такое изображение.
Если существует, то скрипт оптимизирует изображений через наш удаленный API и пересохраняет полученное изображение.
Скрипту интеграции обязательно нужно передать уникальный ключ авторизации (он уникальный для каждого сайта в системе).
Если этот ключ не передать, то скрипт вообще ничего не сделает.
Если передать корректный ключ, то максимум что сделает скрипт - сожмет и пересохранит изображение.
Т.е. лишнего он ничего не сможет сделать. Поэтому как shell его рассматривать нельзя.
Исходный код скрипта открыт.
У него есть сильно ограниченный набор команд.
Основная - это команда "оптимизировать изображение ХХХ". При получении такой команды скрипт проверяет - существует ли такое изображение.
Если существует, то скрипт оптимизирует изображений через наш удаленный API и пересохраняет полученное изображение.
Скрипту интеграции обязательно нужно передать уникальный ключ авторизации (он уникальный для каждого сайта в системе).
Если этот ключ не передать, то скрипт вообще ничего не сделает.
Если передать корректный ключ, то максимум что сделает скрипт - сожмет и пересохранит изображение.
Т.е. лишнего он ничего не сможет сделать. Поэтому как shell его рассматривать нельзя.
Исходный код скрипта открыт.
Ну вот, основное выяснили, пора тестировать.
Настраиваем сервис на работу с сайтом
Если DLE используется по правильному, то все изображения хранятся в папках шаблонов /templates/ и в папке загрузок /uploads/
можно указать только эти параметры.
первоначально позволил сервису просканировать весь сайт целиком
получил
после этого уточнил, что сканировать надо только нужные мне папки
ага... и хочется и колется...
Нам нужно 350 мегабайт для работы сервиса, смотрим стоимость пакетов https://optipic.io/ru/price/
минимально подходящий 2 гигабайта за 750 рублей.
Проверяем на живом проекте
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ftcse-cms.com%2F
результаты ДО оптимизации
обратите внимание, в мобильной версии CSS и JS файлы для bootstrap загружаются с CDN maxcdn.bootstrapcdn.com и Гуглу это по всей видимости совсем не нравиться.
предположительно, после того как изображения будут оптимизированы, скорость загрузки сайта возрастет.
В случае положительного результата (по версии Гугла) вся услуга нам обойдется в каких-то 750 рублей (пара месяцев хостинга).
процесс запущен
в процессе работы
смотрим на результаты статистики сжатия
результаты сжатия
получаем главное значение всей процедуры
Эффективность сжатия: 59,23 % (317,51 МБ --> 129,45 МБ)
Сама процедура сжатия занила около 40 минут для 320 мегабайт картинок.
для мобильной версии разницы нет.
Но как только мы меняем CDN для bootstrap на локальные копии внутри нашего шаблона то получаем совсем другие цифры.
А если еще дополнительно средствами движка сожмем скрипты и стили
Вместо
<link href="{THEME}/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="{THEME}/css/engine.css">
<link rel="stylesheet" href="{THEME}/css/styles.css">Укажем
<link rel="stylesheet" href="/engine/classes/min/index.php?charset=utf-8&f={THEME}/css/bootstrap.min.css,{THEME}/css/styles.css,{THEME}/css/engine.css&20180521" />и JS
Вместо
<script src="{THEME}/js/bootstrap.min.js"></script>
<script src="{THEME}/js/libs.js"></script>Укажем
<script type="text/javascript" src="/engine/classes/min/index.php?charset=utf-8&f={THEME}/js/bootstrap.min.js,{THEME}/js/libs.js&20180521"></script>То результаты теста еще вырастут
Для основной версии сайта, стили и скрипты не сжимали, результаты только на основе сжатия картинок
А вот это уже что-то!
До работы сервиса результат был 67/100 попугаев. Теперь де 80/100 попугаев.
До работы сервиса результат был 67/100 попугаев. Теперь де 80/100 попугаев.
Сжимаем все локальные CSS в настольной версии и получаем прирост на 1 балл
дополнительно сжимаем все локальны JS и получаем еще 1 балл
Ну вот, с такими результатами и минимумом усилий уже можно надеятся на "симпатии" поисковой системы.
Еще большее ускорение работы сайта как говорят знающие люди можно добиться ТОЛЬКО переводом сайта с apach на nginx, но тут есть свои подводные камни. И подавляющему большинству владельцев сайтов на виртуальном хостинге все эти заморочки будут совершенно не в тему.
И какой итог?
Сервис автоматической оптимизации размера картинок действительно работает и буквально в пару кликов позволяет увеличить скорость загрузки сайта. Это именно то самое "простое решение" которое оптимально подходит большинству владельцев сайтов.
Наши рекомендации.
OptiPic для сжатия изображений