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 - решает все, связанные с этим проблемы.
Далее
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:
