Оптимизация картинок на сайте - для чайников


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


А что нам диктуют поисковики, кроме намеков на покупку у них рекламы?
- Навязывают форматы удобные для индексирования содержимого сайта самим поисковиком
- Советуют оптимизировать размер файлов и скриптов (это ведь все, тоже дублируется поисковой системой)


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


Для того, что-бы владельцы сайтов понимали как именно надо допиливать свой проект для одобрения поисковой системой существуют официальные сервисы у Google и Яндекс.


Сейчас речь пойдет о https://developers.google.com/speed/pagespeed/insights/
так как именно этот сервис в настоящее время считается мерилом скорости загрузки сайта и как следствием - более выгодных условий при ранжировании результатов поиска.


Как массово оптимизировать размер картинок на сайте для ускорения загрузки страниц? Ручное пересохранение каждой картинки отдельно - не предлагать. Нужен скрипт оптимизации изображения на сайте - запустил его и вжик... получил результат.

Чем меньше действий от пользователя требуется - тем лучше. И такой сервис уже есть.
OptiPic - сервис автоматически найдет и сожмет все изображений практически без вашего участия.


Сам сервис разъесняет:

Подключается к любому сайту практически в 2 клика
Поддерживаются все известные CMS и фреймворки, а также самописные сайты на PHP. Подключите наш модуль к сайту — он найдет все изображения на сайте и сожмет их.



Тестировать работу будем прямо на нашем сайте tcse-cms.com
и проверим, действительно ли работает с любой CMS

Что-бы в этом убедиться без регистрации увы никак.
Тогда приступаем.

https://optipic.io/ru/register/



процедура стандартная

а вот способы устновки модуля
даже удивляют своей угодливостью.



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

весь модуль из трех файлов

Оптимизация картинок на сайте - для чайников


Логика работы модуля проста до гениальности:


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

Я задал вопросы разработчикам сервиса для уточнения принципов работы.

Вопрос: Скрипт на сайте создает копию картинки с новой степенью сжатия?

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


Вопрос: Скрипт отдает прямую ссылку на картинку сервису, тот ее скачивает, оптимизирует и заливает на наш сайт обновленное изображение? Не слишком ли все это напоминает удаленный 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&amp;f={THEME}/css/bootstrap.min.css,{THEME}/css/styles.css,{THEME}/css/engine.css&amp;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&amp;f={THEME}/js/bootstrap.min.js,{THEME}/js/libs.js&amp;20180521"></script>


То результаты теста еще вырастут




Для основной версии сайта, стили и скрипты не сжимали, результаты только на основе сжатия картинок



А вот это уже что-то!
До работы сервиса результат был 67/100 попугаев. Теперь де 80/100 попугаев.



Сжимаем все локальные CSS в настольной версии и получаем прирост на 1 балл

дополнительно сжимаем все локальны JS и получаем еще 1 балл


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

Еще большее ускорение работы сайта как говорят знающие люди можно добиться ТОЛЬКО переводом сайта с apach на nginx, но тут есть свои подводные камни. И подавляющему большинству владельцев сайтов на виртуальном хостинге все эти заморочки будут совершенно не в тему.


И какой итог?



Сервис автоматической оптимизации размера картинок действительно работает и буквально в пару кликов позволяет увеличить скорость загрузки сайта. Это именно то самое "простое решение" которое оптимально подходит большинству владельцев сайтов.

Наши рекомендации.

OptiPic для сжатия изображений


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

[Перевод] Руководство по SEO JavaScript-сайтов. Часть 1. Интернет глазами Google

Представляем вашему вниманию перевод первой части материала, который посвящён поисковой оптимизации сайтов, построенных с использованием JavaScript. Речь пойдёт об особенностях сканирования, анализа... читать далее

61 способ улучшить SEO вашего сайта

Недавно мы закончили курс по SEO в Нетологии и составили для себя чек-лист того, что обязательно нужно сделать на сайте «Я люблю ИП» для поисковой оптимизации. Но эти советы универсальны для любого... читать далее

[Из песочницы] Above-the-Fold CSS — как ускорить загрузку сайта не замедлив разработку

В старые добрые времена мы с Google PageSpeed Insights были на короткой ноге. Я — клепал дешевые шаблоны, Google — ставил высокую оценку за скорость их загрузки. Однако со временем многое поменялось,... читать далее

Блог им. nobody / Webalta снова ожила, просмотр беклинков конкурентов тоже

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

Google / В индекс Google по кнопке

Google запустил новый сервис «On-Demand Indexing» для вебмастеров, которые установили поиск от Google у себя на сайте. Сервис позволяет вебмастеру самостоятельно «сказать» когда нужно... читать далее

Общение с заказчиком сайта

или Что говорят заказчики сайтов и как это следует понимать. "На сайте должен быть форум" - На сайте планируется интерактивный раздел "Вопрос-Ответ". "По структуре сайт должен быть простым" - Схема... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте buy backlinks