S.Tominoff

Fullstack JavaScript разработчик

mosperegorodki.ru

Сайт-визитка mosperegorodki.ru

Брифинг

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

Наши задачи:

  1. Провести анализ сайта конкурента
  2. Составить дизайн-макет
  3. Сверстать html-макет
  4. Разработать систему управления контентом (CMS)
  5. Разработать документацию пользователя и программиста

 

Анализ

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

 

После небольшого анализа выяснилось следующее:

 

Фронтенд сайта выполнен не на профессиональном уровне - налицо, что разработчики либо очень торопились, работая с фронтендом, либо просто плохо знали Javascript - кучи повторяющегося, не оптимизированного кода, даже в тех местах где можно было бы обойтись и без него, несколько мест где были явные ошибки, укладывающие парсер js ногами на восток. Никакой минификации, склеивания или сжатия нет и в помине.

 

На бэкенде также имеются некоторые проблемы. К примеру, разработчики не стали заморачиваться с серверной валидацией форм, т.е. если выключить js, то можно отправить любое содержимое в форме, и оно будет успешно отправлено.

 

Дизайн макет/верстка

Изначально сайт выглядел так:

 

Главная страница

 

Однако затем, дизайнер немного переделал заголовок и добавил логотип:

 

В итоге получаем очень симпатичную голову. Взгляните на другие страницы ниже:

 

Страница продукта

 

Прайс лист по категориям

 

Разработка

Разработка проекта велась на PHP фреймворке Yii. Для реализации админки, я использовал кастомизированный модуль YCM и несколько авторских виджетов разработанных под него (к примеру, редактор кода на основе CodeMirror или автогенератор url).

 

Изначально система управления контентом (cms) проектировалась так, чтобы внешний вид сайта можно было целиком изменить прямо из административного интерфейса. Это реализовано с помощью "управляемых" файлов представлений (views) и небольшого хэлпера для шаблонов.

 

ER-диаграмма управляемых представлений

 

Как видно на изображении выше, в системе имеется два вида шаблонов - шаблоны страниц (в терминах Yii - layout) и шаблоны контента (view).

 

А вот так выглядит редактирование шаблона

 

При создании страниц, пользователь выбирает эти шаблоны в выпадающем списке.

 

 

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

 

 

Страницы, которые невозможно было связать с этим интерфейсом (например, страницы используемые виджетами Yii), можно переопределить управляемыми страницами, посредством "перегрузки" url адреса - у реестра url адресов приоритет выше чем у системных адресов. Такой хак я использовал для добавления возможности кастомизации страницы благодарности, на которую пользователя редиректят после отправки заявки на расчет.

 


 

Результат

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

 


            Тесты в Apache Benchmark
Тест mosperegorodki.ru Тест сайта конкурента
Server Software:        nginx/1.8.1
Server Hostname:        mosperegorodki.ru
Server Port:            80

Document Path:          /
Document Length:        168 bytes

Concurrency Level:      100
Time taken for tests:   111.361 seconds
Complete requests:      10000
Failed requests:        0
Non-2xx responses:      10000
Total transferred:      3170000 bytes
HTML transferred:       1680000 bytes
Requests per second:    89.80 [#/sec] (mean)
Time per request:       1113.610 [ms] (mean)
Time per request:       11.136 [ms] (mean, across all concurrent requests)
Transfer rate:          27.80 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       60  946 2349.6    130   63223
Processing:    60  121  49.7    108     461
Waiting:       60  121  49.6    108     461
Total:        121 1067 2349.6    272   63322
 
Server Software:        nginx
Server Hostname:        peregorodi-ofice.ru
Server Port:            80

Document Path:          /
Document Length:        324 bytes

Concurrency Level:      100
Time taken for tests:   113.209 seconds
Complete requests:      10000
Failed requests:        0
Non-2xx responses:      10000
Total transferred:      5380000 bytes
HTML transferred:       3240000 bytes
Requests per second:    88.33 [#/sec] (mean)
Time per request:       1132.086 [ms] (mean)
Time per request:       11.321 [ms] (mean, across all concurrent requests)
Transfer rate:          46.41 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       47  867 2573.4    107   31188
Processing:    58  163 126.2    134    1368
Waiting:       58  162 126.1    133    1368
Total:        110 1030 2578.3    271   31359

 

Из-за использования кэша, оба сайта выдают примерно одинаковое количество запросов в секунду (Requests per second) - тут все уже упирается по большей части в пропускную способность канала к серверу. 

 

Тестирование с помощью Chrome расширения app.telemetry показывает следующие данные:

 

 

А вот сравнительная таблица сервиса GTmetrix: