OptimizedHTML 1.0 - 3.0: Лучшие практики скоростной оптимизированной верстки сайтов

Привет, друзья! Год с лишним назад вышел в свет стартовый шаблон для скоростной верстки _optimized_gulp_sass в составе репозитория start_html на GitHub. Данный шаблон был сборником всего, что могло бы ускорить верстку и содержал некоторые дополнительные функции, облегчающие выполнение однообразных операций при старте любого проекта. Сегодня я представляю вам официальный релиз OptimizedHTML 1.0 - 3.0, в который вошли лучшие практики и весь опыт скоростной оптимизированной верстки. Сегодня мы подробно рассмотрим возможности данного стартового шаблона и его отличия от предыдущего собрата _optimized_gulp_sass.

Перед прочтением полезно изучить: Gulp для самых маленьких - подробное руководство

PageSpeed Insights - Оптимизация (обновление): Ознакомиться

Стартовый шаблон на GitHub: github.com/agragregra/optimizedhtml-start-template

Почему отдельный репозиторий? Да, я сначала думал просто обновить стартовый шаблон _optimized_gulp_sass и, на первый взгяд, в этом не было бы ни чего плохого. Но это только на первый взгляд, друзья. Дело в том, что те изменения и улучшения стартового шаблона, которые вошли в новый релиз слишком отличаются от нашего старого доброго _optimized_gulp_sass, а ведь на нем было записано много уроков и много ребят, скачав обновленный шаблон получат совсем другой код и набор файлов, нежели мы рассматривали в уроках. Именно поэтому было принято решение вывести в отдельную новую ветку и развивать отдельно ставший столь популярным стартовый HTML шаблон под знамением OptimizedHTML.

За этот год на данном шаблоне мной был разработан не один десяток сайтов и в каждом проекте мне приходилось вносить правки до начала работы, которые не должны были попасть в Commit на GitHub репозиторий. Такие правки накапливались и вылились в новый стартовый шаблон, отдельный от старого _optimized_gulp_sass. Что-то было удалено, что-то переделано для более удобного и быстрого запуска проектов, а что-то осталось нетронуто, например, сама идея максимальной оптимизации сайта для быстрой загрузки и поисковых систем. Также, сохранился привычный Sass синтаксис написания стилей, а все лишние библиотеки были удалены.

Из самых важных доработок стоит добавить возможность сборки готового проекта без всего лишнего, оптимизацию изображений "под ноль", то-есть изображения максимально оптимизированы и претензий у Google PageSpeed в этом плане не будет ни к одной картинке на нашем сайте. Качество оптимизации схоже с TinyPNG, но все автоматизировано для быстрой сборки проекта без использования сторонних сервисов.

Кроме того, в проект добавлена возможность настройки и быстрого деплоя файлов на сервер по FTP, с использованием Gulp плагина vinyl-ftp и удалены некоторые функции, которые обеспечивали совместимость с браузерами IE версии ниже 9.

Как использовать OptimizedHTML

1. Скачайте optimizedhtml-start-template с GitHub
2. Установите окружение WSL для Windows: Подробный урок
3. Установите модули Node.js командой npm i
4. Запустите шаблон командой gulp. Готово, можно работать

Таски Gulp:

• gulp: запуск дефолтного gulp таска (sass, js, watch, browserSync) для разработки;
• build: сборка проекта в папку dist (очистка, сжатие картинок, удаление всего лишнего);
• deploy: выгрузка проекта на рабочий сервер из папки dist по FTP;
• clearcache: очистка кеша gulp. Полезно для очистки кеш картинок и закешированных путей.

Правила работы со стартовым HTMl шаблоном

1. Все HTML файлы должны иметь одинаковое стартовое наполнение, как у файла app/index.html
2. Все ваши кастомные базовые картинки, такие, как og:image для социальных сетей и фавиконки для различных устройств следует задать в head секции стартера
3. Найдите где задается цвет content="#000" в файле app/index.html. Здесь можно задать цвет шапки браузера на различных устройствах
4. В теге body в файле app/index.html следует писать ваш HTML
5. Для установки новой JS библиотеки просто выполните в терминале команду bower i plugin-name. Библиотека автоматически будет размещена в папке app/libs. Bower должен быть установлен в вашей системе. Для установки Bower просто выполните команду npm i -g bower в трминале. После этого укажите все ссылки на скрипты JS библиотек в таске js() (gulpfile.js)
6. Весь ваш JS код пишите в app/js/common.js
7. Все Sass переменные размещайте в app/sass/_vars.sass
8. Все шрифты подключаются в app/sass/_fonts.sass с миксином "_mixins/font-face"
9. Все CSS медиазапросы размещайте в app/sass/_media.sass
10. Все CSS стили JS библиотек размещайте в app/sass/_libs.sass