PageSpeed Insights. Оптимизация картинок на сайте одним кликом.

[OTEC_SERGIUS]

• Данная статья будет интересна:

SEO оптимизаторам, начинающим WEB-разработчикам, контент менеджерам и всем владельцам сайтов - которые желают увеличить скорость загрузки своего ресурса и подняться в поисковой выдаче.​

• История создания:

Кто хотя бы раз занимался продвижением сайтов знает, что это целый комплекс мероприятий, в ходе которого надо избавится от циклических ссылок, дублей страниц, наладить ЧПУ, транслитерацию, проверить на w3c validator ошибки html, ошибки .js скриптов, включить кэш и… оптимизировать картинки. Кстати, оптимизация картинок на больших сайтах самый время пожирающий этап, но дающий самый мощный эффект!

Заказчик обычно ориентируется на бенчмарк сайтов от google: https://developers.google.com/speed/pagespeed/insights/​

У меня была задача поднять с красного до зелёного уровня планку этого бенчмарка на сайтах, сделанных с помощью Wordpress и Битрикс. Я не фанат этих CMS и экспериментировать с левыми плагинами для оптимизации изображений на продающих сайтах не было ни желания, ни времени. Я собрал список страниц для оптимизации и кормил этому бенчмарку. Он сканировал, выдавал мне архив с обжатыми картинками, далее я распаковывал его и заливал по одной картинке по разным папкам на ftp.​

​

Это очень кропотливый процесс, на исправление картинок для одной страницы сайта уходило по 5 минут. Вскоре я понял, таким темпом мне ещё месяц сидеть заниматься этой рутиной. Надо что-то менять… или включить голову…

Придя с работы, я вспомнил про старого доброго дружищу ZennoPoster’a и его добрый форум с поддержкой. Поужинав и накидав хитрый план я преступил к его реализации, и так увлёкся войной с C# что не заметил, что ночь прошла, а на улице уже утро. Но усталости не было, был маленький триумф, что я создал очень полезную штуку которая может сэкономить тысячи человеко-часов рабочего времени начинающим SEO оптимизаторам и соответственно пользователям сайтов со слабым интернетом которые будут меньше ждать открытия страниц.​

• Минимальные знания и умения:

Для понимания работы проекта желательно иметь школьные знания C# и пару дней практики в ZennoPoster.​

• Инструкция как запустить проект:

1. Скачиваем и устанавливаем ZennoPoster. http://zennolab.com/ru/products/zennoposter/#section_price
2. Проходим в google консоль и бесплатно получаем API ключ сервиса pagespeed insights. https://console.developers.google.com
3. Составляем список страниц сайта для оптимизации и сохраняем его как .txt. Одна строка – одна страница для оптимизации.
   
4. Открываем проект, вбиваем в зелёные кубики url корня сайта и полученный API ключ.
   
5. Запускаем и радуемся. Когда закончатся все строки в .txt файле программа оповестит нас об этом. Результат её работы будет помещён в папочку result на том же уровне с проектом.
   
6. Далее берём содержимое папки result и заливаем с заменой через ftp в корень сайта.
   
7. Проверяем, на сколько баллов подросли страницы сайта. Можно в ручную, а можно по умному, через другой ZennoPoster проект от нашего комрада http://zennolab.com/discussion/threads/a-parser-prodvinutyj-parser-poiskovyx-sistem-wordstat-youtube-suggest-pr-etc.8791/page-4#post-222097

• Заключение:

Буду рад советам что можно улучшить/оптимизировать в проекте. Кто чего не понял пишите ниже в комменты постараюсь всем ответить. И не забудьте проголосовать. Ваш голос очень важен для меня!

Поздравляю всех с наступающим, и пусть он пройдёт на все 100/100! Удачи!​

 

[LightWood]

Очень приятно оформлено. Полезная вещь.

 

[seomiks]

Спасибо.

 

[GoodX]

Вот это штука полезная. А то у меня больше 10к изображений на сайте. Все руки не доходят до оптимизации )

 

[yuresd]

Спасибо! А подскажите, что сюда вбивать "Директория для скачивания картинок c \ на конце" ? Папка на PC куда будут скачиваться картинки с pagespeed?
И еще, при первичном запуске программы ругалось, что нет ionic.zip.dll - где это качать (безопасно) и куда ставить библиотеку?

 

[OTEC_SERGIUS]

Спасибо! А подскажите, что сюда вбивать "Директория для скачивания картинок c \ на конце" ? Папка на PC куда будут скачиваться картинки с pagespeed?
И еще, при первичном запуске программы ругалось, что нет ionic.zip.dll - где это качать (безопасно) и куда ставить библиотеку?

1. Да это папка куда будут скачиваться картинки с pegespeed, раньше я там абсолютный путь указывал, а теперь просто поставил папку проекта.
2. Если бы ты нажал на кубик "Распаковка .zip" на 1-ой строке мог бы обнаружить ссылку, а там бы узнал что это за библиотека и как её подключать.
http://zennolab.com/discussion/threads/arxivirovanie-kataloga.22733/
В проект уже вбиты данные для оптимизации картинок на http://zennolab.com/ru/ и его других страниц. Можешь сразу запустить посмотреть как проект работает, а потом по аналогии свой сайт вписать в зелёные кубики.

 

[deonisii]

У меня очень много ошибок JavaScript и CSS.
Шаблон обрабатывает только картинки?
Как качнуть адреса страниц с PageSpeed Tools.
Они там отображаются в таком формате: …nthis/js/jquery-masonry.min.js?ver=3.3.2 уменьшит ее размер на 20 КБ (70 %).

 

[OTEC_SERGIUS]

У меня очень много ошибок JavaScript и CSS.
Шаблон обрабатывает только картинки?
Как качнуть адреса страниц с PageSpeed Tools.
Они там отображаются в таком формате: …nthis/js/jquery-masonry.min.js?ver=3.3.2 уменьшит ее размер на 20 КБ (70 %).

Да только картинки. Название статьи это чётко отображает.
Ты можешь сам модифицировать мой проект чтобы получать сжатые .css .js.
90% нужного для решения твоей проблемы кода уже написано.

 

[tekitt]

Осталось только на фивире сделать гиг с данной темой - и деньги в кармане
Спасибо, за статью!

 

[Rooter85]

У меня данные в папке temp перезаписываются. В итоге результат только для последней страницы.
А папка RESULT содержит пустую папку images.
В самом первом кубике ничего не менял. Там нужно было что-то прописать?

 

[OTEC_SERGIUS]

У меня данные в папке temp перезаписываются. В итоге результат только для последней страницы.
А папка RESULT содержит пустую папку images.
В самом первом кубике ничего не менял. Там нужно было что-то прописать?

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

 

[Rooter85]

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

WIN7 ZP5.11.4.0 В логах все Ок, ошибок нет.
При выполнении шаблона по шагам. В папке temp появляются измененные картинки и скрипты, но в RESULT они не записываются.

 

[OTEC_SERGIUS]

WIN7 ZP5.11.4.0 В логах все Ок, ошибок нет.

Я тестировал на Win7 с обновами и W10 все работало.
Значит проблема в последнем кубике C# "Сортируем фото".
Логируй каждую переменную и смотри не пустая ли она. Так найдешь откуда ноги у проблемы растут.
Особое внимание таким конструкциям catch (Exception ex) и смотришь почему не удалось переместить файл

    try
    {
        // Move the file.
        File.Move(path2, path + manifestEl.NameNew);
    }
    catch (Exception ex)
    {  
    }
    finally
    {  
    }

 

[deonisii]

Как качнуть адреса страниц сPageSpeed Tools.
Они там отображаются в таком формате: …nthis/js/jquery-masonry.min.js?ver=3.3.2

 

[yuresd]

Одна проблема в таком способе автоматизации - в последнее время на 2-х сайтах заметил, что Гугл дает скачивать изуродованные картинки. То картинки размером 500х600 сжимает до размеров иконки, то по высоте сжимает, а ширина прежняя. В общем нужно проверять, что он там дает скачивать

 

[Rooter85]

Одна проблема в таком способе автоматизации - в последнее время на 2-х сайтах заметил, что Гугл дает скачивать изуродованные картинки. То картинки размером 500х600 сжимает до размеров иконки, то по высоте сжимает, а ширина прежняя. В общем нужно проверять, что он там дает скачивать

Тоже заметил. После оптимизации, кнопка заказа при наведении курсора стала пропадать. Откатил назад.

 

[OTEC_SERGIUS]

Как качнуть адреса страниц сPageSpeed Tools.
Они там отображаются в таком формате: …nthis/js/jquery-masonry.min.js?ver=3.3.2

С работы вечером приду помогу тебе.

 

[OTEC_SERGIUS]

Одна проблема в таком способе автоматизации - в последнее время на 2-х сайтах заметил, что Гугл дает скачивать изуродованные картинки. То картинки размером 500х600 сжимает до размеров иконки, то по высоте сжимает, а ширина прежняя. В общем нужно проверять, что он там дает скачивать

Да у меня тоже такая проблема бывала, но это к зеннопостеру не относится это к гуглу вопросы. Их инструмент не всегда картинки которые надо отдаёт.

 

[z@jivalo]

что-то у меня ругается The given path's format is not supported. при попытки сортировки фото
В шабе ничего не менял кроме apikey

 

[z@jivalo]

OTEC_SERGIUS
установил новую версию зенки теперь ошибки пошли, и проект останавливается
Выполнение действия CSharp OwnCode The file custommenu.css already exists.
куда копать ?
не хочет перезаписывать файлы, где-то ошибка.

Короче или кривой проект, или кривые у меня руки.
Ошибок море стало появляться после обновы зенки, не возможно использовать ваш шаблон

 

[OTEC_SERGIUS]

OTEC_SERGIUS
установил новую версию зенки теперь ошибки пошли, и проект останавливается
Выполнение действия CSharp OwnCode The file custommenu.css already exists.
куда копать ?
не хочет перезаписывать файлы, где-то ошибка.

Короче или кривой проект, или кривые у меня руки.
Ошибок море стало появляться после обновы зенки, не возможно использовать ваш шаблон

Оптимизировать под новую версию зенки буду!, но только после конкурса. На этой неделе, по просьбам пользователей делаю возможность .css и .js файлы получать для сайта одним кликом.
А кто забыл проголосовать за PageSpeed Insights оптимизатор милости прошу в тему для голосования: http://zennolab.com/discussion/threads/golosovanie.44605/

 

[z@jivalo]

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

вот здесь видимо косяк zf.ExtractAll(unZipPath); //Распаковываем

 

[SadisT_UA]

Спасибо автор, нужный инструмент! Проголосовал за данную тему! Увеличило показатель на 20 баллов =)

 

[zxgame]

Очень полезный инструмент. Затестил. Всегда оптимизация картинок тормозила дальнейшее их распихивание по папкам. Сейчас - это сказка. Спасибо!!!

 

[DRIVONT]

Не пойму почему у меня все фото переименовываются, на сайте photo1.jpg а после персинга в папках фото photo1.jpg.pagespeed.ce.jOIUGOIU.jpg
как эту приписку к названиям фото убрать?

 

[z@jivalo]

Не пойму почему у меня все фото переименовываются, на сайте photo1.jpg а после персинга в папках фото photo1.jpg.pagespeed.ce.jOIUGOIU.jpg
как эту приписку к названиям фото убрать?

тоже что-то подобное было, использовал кубик "поиск замена" и удалять эту часть

 

[DRIVONT]

тоже что-то подобное было, использовал кубик "поиск замена" и удалять эту часть

это то понятно - но судя по всему так не должно быть

 

[z@jivalo]

как эту приписку к названиям фото убрать?

вот что пишут
https://opencartforum.com/topic/42260-resheno-modpagespeed-poyavilsya-neponyatnyy-kod-vo-vseh-css-i-js-pagespeedce/

в исходном коде точно все jpg картинки отображаются нормально ?

 

[DRIVONT]

вот что пишут
https://opencartforum.com/topic/422...neponyatnyy-kod-vo-vseh-css-i-js-pagespeedce/

спасибо .. чет не подумал глубже копнуть. На хостинге стоит кеширование

 

[zebesh]

Гугл вообще в релиз выкатил модуль для Апача и Нджинкса, который на лету всё оптимизирует. Но для этого должен быть свой сервер. А так, полезный шаблон