Сайт разработчика — это и витрина, и первый аргумент в разговоре с заказчиком. Первая версия моего сайта была собрана на Elementor. Снаружи всё устраивало, но страница тащила за собой вес конструктора: лишние стили и скрипты, десятки запросов, а любая мелкая правка превращалась в поиск нужной галочки в чужих панелях.
Получалось неловко. Я берусь ускорять чужие сайты и переписывать чужой легаси, а собственный сайт грузился медленно и был собран из блоков, которые я толком не контролировал.
Поэтому я переписал сайт с нуля в собственную тему. Конструктор убран целиком: разметка и стили пишутся руками, каждый блок существует потому, что решает задачу, а не потому, что нашёлся в наборе шаблонов.
Что на сайте
- девять услуг, у каждой своя страница с ценами, этапами работы и разбором частых вопросов;
- подход к работе, реальные проекты и отзывы — без «большого опыта» и прочих слов ни о чём;
- окно связи с мессенджерами, QR-кодом и планом сообщения: чем подробнее задача, тем точнее оценка сроков и бюджета;
- мобильная версия собрана отдельной раскладкой, а не сжатием десктопной.
Демонстрации вместо описаний
Рассказывать словами про боты и машинное зрение бессмысленно — это надо показывать. Поэтому ключевые услуги на странице не описаны, а разыграны.
- срочная помощь: терминал, в котором идёт поиск заражённых файлов и вынос находки в карантин;
- боты: переписка с охранным ботом дачи — тревога по датчику, телеметрия и кадр с камеры;
- нестандартные задачи: карусель сценариев от парсинга до машинного зрения с разметкой данных и обучением модели;
- все демо-блоки написаны под проект, без внешних библиотек и готовых конструкторов.
Скорость и связь
- стили собираются из SCSS в один файл, скрипты обходятся без сторонних библиотек;
- картинки отдаются в WebP правилами веб-сервера, включены кеш страниц и отложенная загрузка скриптов;
- окно связи вынесено отдельным файлом и не ждёт загрузки картинок: написать мне можно, пока грузится всё остальное;
- анимация первого экрана сделана на CSS, поэтому заголовок виден сразу, а не после скриптов;
- карусели листаются пальцем и не мешают прокручивать страницу — на телефоне это важнее, чем кажется.
Поиск и разметка
- своя микроразметка: услуги с ценами, вопросы и ответы, хлебные крошки и описания проектов портфолио;
- карта сайта, robots.txt и llms.txt настроены под индексацию, в том числе нейросетями;
- тексты услуг и блога пишутся под запросы, а не под объём.
Что дало создание сайта без конструктора
Получился быстрый, адаптивный и подготовленный к поиску сайт без всего лишнего. Работает на собственной теме: в коде только то, что нужно этим страницам, ни одной строки от конструктора. Мобильная главная весит 677 КБ и отдаётся по HTTP/2 со сжатием, картинки уходят в WebP. Разметка описывает услуги с ценами, вопросы и ответы и проекты портфолио, а правка вносится в код за минуту, а не ищется в чужих настройках.
