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

OTEC_SERGIUS

Client
Регистрация
04.10.2014
Сообщения
386
Благодарностей
63
Баллы
28
01.png


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

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


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

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

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

02.png


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

03.png

Это очень кропотливый процесс, на исправление картинок для одной страницы сайта уходило по 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! Удачи!​
04.png
 

Вложения

Для запуска проектов требуется программа ZennoPoster.
Это основное приложение, предназначенное для выполнения автоматизированных шаблонов действий (ботов).
Подробнее...

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

LightWood

Moderator
Регистрация
04.11.2010
Сообщения
2 350
Благодарностей
816
Баллы
113

seomiks

Client
Регистрация
13.09.2014
Сообщения
368
Благодарностей
119
Баллы
43
Спасибо.
 

GoodX

Client
Регистрация
20.03.2016
Сообщения
252
Благодарностей
98
Баллы
28
Вот это штука полезная. А то у меня больше 10к изображений на сайте. Все руки не доходят до оптимизации )
 

yuresd

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

OTEC_SERGIUS

Client
Регистрация
04.10.2014
Сообщения
386
Благодарностей
63
Баллы
28
Спасибо! А подскажите, что сюда вбивать "Директория для скачивания картинок c \ на конце" ? Папка на PC куда будут скачиваться картинки с pagespeed?
И еще, при первичном запуске программы ругалось, что нет ionic.zip.dll - где это качать (безопасно) и куда ставить библиотеку?
1. Да это папка куда будут скачиваться картинки с pegespeed, раньше я там абсолютный путь указывал, а теперь просто поставил папку проекта.
2. Если бы ты нажал на кубик "Распаковка .zip" на 1-ой строке мог бы обнаружить ссылку, а там бы узнал что это за библиотека и как её подключать.
http://zennolab.com/discussion/threads/arxivirovanie-kataloga.22733/
В проект уже вбиты данные для оптимизации картинок на http://zennolab.com/ru/ и его других страниц. Можешь сразу запустить посмотреть как проект работает, а потом по аналогии свой сайт вписать в зелёные кубики.
 
Последнее редактирование:
  • Спасибо
Реакции: re1ix

deonisii

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

OTEC_SERGIUS

Client
Регистрация
04.10.2014
Сообщения
386
Благодарностей
63
Баллы
28
У меня очень много ошибок JavaScript и CSS.
Шаблон обрабатывает только картинки?
Как качнуть адреса страниц с
PageSpeed Tools.
Они там отображаются в таком формате: …nthis/js/jquery-masonry.min.js?ver=3.3.2 уменьшит ее размер на 20 КБ (70 %).
Да только картинки. Название статьи это чётко отображает.
Ты можешь сам модифицировать мой проект чтобы получать сжатые .css .js.
90% нужного для решения твоей проблемы кода уже написано.
 

tekitt

Client
Регистрация
25.05.2014
Сообщения
45
Благодарностей
13
Баллы
8
Осталось только на фивире сделать гиг с данной темой - и деньги в кармане :-)
Спасибо, за статью!
 

Rooter85

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

OTEC_SERGIUS

Client
Регистрация
04.10.2014
Сообщения
386
Благодарностей
63
Баллы
28
У меня данные в папке temp перезаписываются. В итоге результат только для последней страницы.
А папка RESULT содержит пустую папку images.
В самом первом кубике ничего не менял. Там нужно было что-то прописать?
Напиши свою версию операционной системы и зенопостера.
А ещё лучше видео запись с экрана как её запускал, и что в окне логов пишется.
 

Rooter85

Client
Регистрация
04.07.2015
Сообщения
208
Благодарностей
37
Баллы
28
Напиши свою версию операционной системы и зенопостера.
А ещё лучше видео запись с экрана как её запускал, и что в окне логов пишется.
WIN7 ZP5.11.4.0 В логах все Ок, ошибок нет.
При выполнении шаблона по шагам. В папке temp появляются измененные картинки и скрипты, но в RESULT они не записываются.
 
Последнее редактирование:

OTEC_SERGIUS

Client
Регистрация
04.10.2014
Сообщения
386
Благодарностей
63
Баллы
28
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
    {  
    }
 
  • Спасибо
Реакции: Rooter85

deonisii

Client
Регистрация
23.03.2012
Сообщения
89
Благодарностей
13
Баллы
8
Как качнуть адреса страниц сPageSpeed Tools.
Они там отображаются в таком формате: …nthis/js/jquery-masonry.min.js?ver=3.3.2
 

yuresd

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

Rooter85

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

OTEC_SERGIUS

Client
Регистрация
04.10.2014
Сообщения
386
Благодарностей
63
Баллы
28
Одна проблема в таком способе автоматизации - в последнее время на 2-х сайтах заметил, что Гугл дает скачивать изуродованные картинки. То картинки размером 500х600 сжимает до размеров иконки, то по высоте сжимает, а ширина прежняя. В общем нужно проверять, что он там дает скачивать
Да у меня тоже такая проблема бывала, но это к зеннопостеру не относится это к гуглу вопросы. Их инструмент не всегда картинки которые надо отдаёт.
 
Регистрация
27.12.2016
Сообщения
734
Благодарностей
141
Баллы
43
что-то у меня ругается The given path's format is not supported. при попытки сортировки фото
В шабе ничего не менял кроме apikey
 
Регистрация
27.12.2016
Сообщения
734
Благодарностей
141
Баллы
43
OTEC_SERGIUS
установил новую версию зенки теперь ошибки пошли, и проект останавливается
Выполнение действия CSharp OwnCode The file custommenu.css already exists.
куда копать ?
не хочет перезаписывать файлы, где-то ошибка.

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

OTEC_SERGIUS

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

Короче или кривой проект, или кривые у меня руки.
Ошибок море стало появляться после обновы зенки, не возможно использовать ваш шаблон
Оптимизировать под новую версию зенки буду!, но только после конкурса. На этой неделе, по просьбам пользователей делаю возможность .css и .js файлы получать для сайта одним кликом.
А кто забыл проголосовать за PageSpeed Insights оптимизатор милости прошу в тему для голосования: http://zennolab.com/discussion/threads/golosovanie.44605/
 
  • Спасибо
Реакции: re1ix
Регистрация
27.12.2016
Сообщения
734
Благодарностей
141
Баллы
43
Прошу вас посодействуйте, там точно надо поправить только 1 строчку кода.
Просто файлы не перезаписываются в остальном работает

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

SadisT_UA

Client
Регистрация
14.12.2012
Сообщения
36
Благодарностей
6
Баллы
8
Спасибо автор, нужный инструмент! Проголосовал за данную тему! Увеличило показатель на 20 баллов =)
 

zxgame

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

WebSdk

Client
Регистрация
15.02.2016
Сообщения
47
Благодарностей
4
Баллы
8
Не пойму почему у меня все фото переименовываются, на сайте photo1.jpg а после персинга в папках фото photo1.jpg.pagespeed.ce.jOIUGOIU.jpg
как эту приписку к названиям фото убрать?
 
Регистрация
27.12.2016
Сообщения
734
Благодарностей
141
Баллы
43
Не пойму почему у меня все фото переименовываются, на сайте photo1.jpg а после персинга в папках фото photo1.jpg.pagespeed.ce.jOIUGOIU.jpg
как эту приписку к названиям фото убрать?
тоже что-то подобное было, использовал кубик "поиск замена" и удалять эту часть
 
Регистрация
27.12.2016
Сообщения
734
Благодарностей
141
Баллы
43

zebesh

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

Кто просматривает тему: (Всего: 1, Пользователи: 0, Гости: 1)