1 - Деплой сайта на хостинг
2 - Оптимизация сайта для Google PageSpeed

 

Нам понадобится:   Что бы смотреть пути для Деплоя

FTP клиент MAC - так же FileZilla (Cross Platform)

 

 

https://filezilla-project.org/download.php?type=client

 

 

 

 

 

 

 

 

 

Готово!

Установили FTP FileZilla на MAC!

 

 

 

[maxbutton id="1" url="#options-deploy" text="Настройки параметров 'Deploy'" ]

[maxbutton id="2" url="#Google-PageSpeed" text="Google-PageSpeed - Тест оптимизации" ]

 

Для начала, выполним команду:    >  gulp build  

 

 

 

В результате мы получаем полностью готовый ПАК-сайта:

 

Со вложенными шрифтами:

 

Изображениями - причем уже      оптимизированными:  

Инструменты оптимизации картинок Gulp - лучше по всем показателям: Качество и быстрота обработки

 

 

Другими словами - если правильно сверстаны картинки на сайте - т.е. в размер приблизительно - без откровенных ресайзов -  ТО СЖАТИЕ ПОЛУЧАЕТСЯ ОТЛИЧНЫМ! 

 

Картинки должны проходить проверку на

 

Имеем фактический путь в строке браузера к папке Тестового сайта:

  https://cp-hosting.jino.ru/management/filemanager/files/domains/web3.my7life.ru 

 

Давайте зайдем в папку сайта на хостинге:

 

Используя: 

 

 

И укажем точный путь до тестового сайта:

 

 

Еще переименуем файл:

с помощью: 

 

ht.access    в   .htaccess

 

 

После этого необходимо - опять выполнить сборку:

 

 

 

   .htaccess   - Предназначен для работы с сервером! Здесь есть все для кэширования.

Если GooglePage Speed - выдает ошибки оптимизации кеширования, - то данный    .htaccess   - решает все, связанные с этим проблемы.

 

Далее

 

   ЗАПОЛНИМ ПАРАМЕТРЫ для Deploy  

 

  GO  в  gulp.js  

 

Давайте настроим наш     Deploy : 

 

 

Самое время попробовать выполнить   Deploy: 

 

Для этого в консоли выполняем команду:    gulp deploy 

 

 

 

 

 

Теперь

 

зайдем на   'Google PageSpeed' 

 

https://developers.google.com/speed/pagespeed/insights/

 

 

Результат оптимизации:    99 из 100  

 

 

А в версии для компьютеров:

 

 

Не обязательно добивать    100 из 100-ста  

 

Но нужно добиваться   -    ЗЕЛЕНУЮ ТАБЛИЧКУ 

 

Основные претензии Google к картинкам:

 

    И Яндекс карта - тоже не идеальна!  

 

 

Можно зайти на сайт плагина:

 

fotorama:

https://fotorama.io/customize/

 

и прям до описания превью картинок:

 

https://fotorama.io/customize/thumbnails/

 

Увидим, что есть возможность использовать     thumbnails  

 

А сейчас у нас разметка БЕЗ      thumbnails  

 

 

Поэтому давайте ОПТИМИЗИРУЕМ fotorama:

 

 Go в    index.html  

 

 

 

 

А теперь собственно - подготовим картинки   thumbs 

 

GO в папку:  photos

 

Проверяем реальный размер вьюпорта преюх:

 

 

 

И сохраняем для web:  ВСЕ ТУмб-картинки 120 х 80 px

 

Затем опять выполним:

 

   gulp build  

 

   gulp deploy  

 

 

 

Большие фото тоже оптимизируем по размеру:   654 x 437 px 

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

 

    ВСЕ! ВЕРСТКА ЗАКОНЧЕНА!  

 

Ждем урока по посадке на CMS MODX: