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

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

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

OptimizedHTML 1.0 - 3.0: Лучшие практики скоростной оптимизированной верстки сайтов - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Перед прочтением полезно изучить: 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

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

  • Настройка VS Code для верстки
  • Simple Starter - простой стартер для верстки | Материалы урока
  • Windows 11: Делаем вкладки в проводнике. Настройка QTTabBar от А до Я
  • Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
  • Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
  • Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master