Как я переписал свой сайт и почему

Мой сайт был для меня больным местом. Последний раз я занимался им в 2011 году, и написан он был на технологиях того времени. Он был грузным и неповоротливым, шрифты были мелкими, CMS накладывала ограничения на вёрстку страниц и создание бекапов, сама CMS давно устарела и была небезопасной. Мне хотелось уйти ото всего этого.

Но просто взять и переверстать главную страницу — мало. Нужно перенести все проекты и статьи из старой базы в новое место, поэтому я долго откладывал переделку. И чем дольше откладывал, тем больше сайт мозолил мне глаза: «ты ж фронтендер, а сайт у тебя 7-летней давности».

В итоге я решил составить требования к новому сайту и посмотреть, сколько это может занять времени и сил.

Чего я хотел

Уйти от CMS. Это, может, и удобно для тех, кто не знает технологий, но я знаю. CMS — это лишняя прослойка между мной и публикацией статьи или проекта. Мне, в принципе, достаточно статического HTML-сайта.

Хранить заметки и проекты в маркдауне. Сам HTML неудобен: теги — это лишние символы, которые также тормозят публикацию, мне хотелось чего-то проще. Выбрал маркдаун: в нём можно и изображения вставить, и ссылки, и код.

Сделать шрифты больше. От старых шрифтов у меня болели глаза. Не в смысле мне шрифт не нравился, Гельветика норм — размер был мелким. Теперь набираю основной текст шрифтом в 18 пикселей.

Сделать сайт семантичным и доступным. Чем большему количеству пользователей доступен мой контент, тем лучше.

Оптимизировать скорость загрузки. Старый сайт загружался долго. Надоело, хотелось сделать ракету 🙃

Когда я составил список требований и проблем, которые может вызвать переделка, оказалось, что работы на несколько выходных. Но образ нового сайта засел в голове настолько сильно, что руки чесались сразу сесть и начать переделывать.

Шрифт

Начал с подбора шрифта. Для основного текста я хотел шрифт с засечками, для заголовков — гротеск, для кода — моноширинный. Выбрал семейство PT: они бесплатные, с нужными начертаниями. А на Маке они есть в системе, поэтому многим пользователям их не придётся загружать с сервера.

В топку CMS

От CMS я избавился, но проблемы с шаблонами остались. Я понимал, что мне нужна какая-то система сборки, которая бы брала мои заметки, шаблоны, мета-информацию о странице и склеивала из них HTML-страницы.

Сделал сборщик на Галпе. Он берёт джейсон со структурой, и по нему строит дерево сайта. На выходе получатеся статический HTML-сайт.

Но мне хотелось оставить все старые ссылки рабочими, а заморачиваться с редиректами на новые страницы не хотелось. Поэтому взял старые ссылки и уже по ним построил дерево. Так ссылка /blog/ — превратилась в файл /blog/index.html. А /blog/page/ — в /blog/page/index.html.

С проектами так же. Работает, ничего дополнительно писать не надо — то, что нужно.

Технологии

Использовал только HTML, CSS, JS. Как же здорово писать сразу работающий код, вместо настройки окружения, транспайлинга, компиляции и чего угодно ещё.

Использовал прогрессивное улучшение для кода. Например, стили у меня разбиты по разным файлам, а в главный файл я их подключаю стандартным CSS-импортом. Плюс в том, что стили работают без сборки проекта. После сборки это один файл со всеми стилями, до — файл с импортами. В итоге что-то быстро посмотреть и поправить я могу, не пересобирая сайт.

Чтобы страницы загружались быстрее, решил использовать оптимизированные форматы графики. Выбрал .webp, .jp2 и .jpx, которые подключаю через picture. Это помогло сократить трафик для Хрома в 10 раз, для Сафари примерно в 2 раза. Кроме разных форматов использую разные изображения для ретины и неретины, что тоже сокращает трафик для неретиновых экранов на 30–40%.

Дальше — больше 🙃 Одной оптимизации графики мне было мало. Я хотел, чтобы пользователям вообще приходилось как можно меньше загружать данных из интернета. Поэтому переехал на HTTPS и подключил сервис-воркер. Стили, скрипты, некоторые изображения — всё это сохраняется на устройстве пользователя. Тем, у кого сервис-воркер уже работает, это сильно сокращает время загрузки и экономит трафик.

Семантика и доступность

Старый сайт страдал диватозом. Каждый раз, когда я слушал подкаст веб-стандартов, мне становилось стыдно. Я, конечно, использовал section и nav, но на этом всё заканчивалось. Структура заголовков страдала, микроразметки не было, списки были не всегда списками.

В новом сайте я изначально продумал структуру страниц. Проверил лайтхаусом, аксом, сторонними аудитами. Потом походил по сайту с клавиатуры, а потом вовсе включил скринридер и послушал, как это работает на нём. Работает хорошо, теперь не стыдно.

В бою

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

Итог

Большая объёмная задача оттягивает на себя много моральных сил: ты постоянно о ней думаешь. Мне помогло разбить эту неподъёмную задачу на куски: я использовал текущую инициативу — по часу в день, иногда подольше.

Но найти метод для решения задачи проще, чем мотивацию. Постановка задачи — важная часть решения. Нужная такая постановка, чтобы руки чесались решить задачу — тогда проще.