mosperegorodki.ru
Сайт-визитка mosperegorodki.ru
Брифинг
Необходимо разработать сайт-визитку для предпринимателя в сфере офисных перегородок, по аналогии с указанным заказчиком сайтом. При этом сделать сайт качественно превосходящий сайт конкурента.
Наши задачи:
- Провести анализ сайта конкурента
- Составить дизайн-макет
- Сверстать html-макет
- Разработать систему управления контентом (CMS)
- Разработать документацию пользователя и программиста
Анализ
Анализ сайта конкурента заключался в выявлении его сильных и слабых сторон, а также составлении приблизительного технологического стека.
После небольшого анализа выяснилось следующее:
Фронтенд сайта выполнен не на профессиональном уровне - налицо, что разработчики либо очень торопились, работая с фронтендом, либо просто плохо знали Javascript - кучи повторяющегося, не оптимизированного кода, даже в тех местах где можно было бы обойтись и без него, несколько мест где были явные ошибки, укладывающие парсер js ногами на восток. Никакой минификации, склеивания или сжатия нет и в помине.
На бэкенде также имеются некоторые проблемы. К примеру, разработчики не стали заморачиваться с серверной валидацией форм, т.е. если выключить js, то можно отправить любое содержимое в форме, и оно будет успешно отправлено.
Дизайн макет/верстка
Изначально сайт выглядел так:
Однако затем, дизайнер немного переделал заголовок и добавил логотип:
В итоге получаем очень симпатичную голову. Взгляните на другие страницы ниже:
Разработка
Разработка проекта велась на PHP фреймворке Yii. Для реализации админки, я использовал кастомизированный модуль YCM и несколько авторских виджетов разработанных под него (к примеру, редактор кода на основе CodeMirror или автогенератор url).
Изначально система управления контентом (cms) проектировалась так, чтобы внешний вид сайта можно было целиком изменить прямо из административного интерфейса. Это реализовано с помощью "управляемых" файлов представлений (views) и небольшого хэлпера для шаблонов.
Как видно на изображении выше, в системе имеется два вида шаблонов - шаблоны страниц (в терминах Yii - layout) и шаблоны контента (view).
При создании страниц, пользователь выбирает эти шаблоны в выпадающем списке.
Благодаря тому что все страницы сайта созданы с помощью административной панели - появляются широкие возможности по кастомизации как отдельных страниц, так и всего сайта целиком прямо из панели управления.
Страницы, которые невозможно было связать с этим интерфейсом (например, страницы используемые виджетами Yii), можно переопределить управляемыми страницами, посредством "перегрузки" url адреса - у реестра url адресов приоритет выше чем у системных адресов. Такой хак я использовал для добавления возможности кастомизации страницы благодарности, на которую пользователя редиректят после отправки заявки на расчет.
Результат
Поставленной задачи мы добились - наш сайт получился гораааздо более оптимизированным, нежели сайт конкурента.
Тест mosperegorodki.ru | Тест сайта конкурента | |
---|---|---|
|
|
Из-за использования кэша, оба сайта выдают примерно одинаковое количество запросов в секунду (Requests per second) - тут все уже упирается по большей части в пропускную способность канала к серверу.
Тестирование с помощью Chrome расширения app.telemetry показывает следующие данные:
А вот сравнительная таблица сервиса GTmetrix: