Сайт Умма Тур: из гадкого утенка в прекрасные лебеди

Аватар пользователя ivnish ivnish 15 мая в 14:38
4

Немного о заказчике: «Умма Тур» (https://www.ummatour.ru) - один из ведущих туроператоров для мусульман в России. С 2006 года успешно занимаются организацией исламского туризма, паломничества для мусульман в Священную Мекку и Лучезарную Медину.

Изначально заказчик обратился с задачами по исправлению проблем и с задачами по доработкам.


Было:

  • ядро: Drupal 7
  • Контрибных модулей: 167
  • Шаблонов темы оформления: 158 (!)
  • Всё было захардкодено в шаблонах, клиент даже не мог самостоятельно сменить телефон или ссылки на соцсети в шапке сайта
  • PHP 5.6
  • Отключена агрегация JS и CSS
  • PageSpeed: 15-17 баллов на мобильном и 65-75 на десктопе
  • Адаптивность вроде была, но страница обновлялась при каждом изменении размера окна



Да, да, именно 158 шаблонов. Когда я начал вникать в структуру сайта, я был в ужасе. Сайт делали в разное время разные разработчики и поэтому: часть страниц была сделана с помощью полей ядра, еще часть была сделана с помощью Panels, что-то было сделано с помощью Display Suite, а что-то с помощью Views, и даже использовали модуль Bean, но большинство страниц было сделана с помощью шаблонов. В них же и хранилась основная логика. Огромные портянки кода на PHP, JS, HTML с кучей inline-стилей там же. К сайту однозначно прикладывали руки битриксоиды, потому что в шаблонах часто встречается термин «инфоблоки» Smile Неудивительно, что всё это дико тормозило и PageSpeed на это реагировал.

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


Стало:

  • ядро: Drupal 9 с использованием composer
  • Активных патчей: 5
  • Контрибных модулей: 65
  • Кастомных модулей: 2
  • Шаблонов темы оформления: 13
  • PHP 7.4
  • Включена агрегация JS и CSS
  • PageSpeed: 95-100 баллов на мобильном и 99-100 на десктопе
  • Настоящая адаптивность


Контрибные модули, которые были использованы:

  • admin_toolbar
  • antibot
  • back_to_top
  • better_exposed_filters
  • blazy
  • block_class
  • bootstrap_layout_builder
  • bootstrap_styles
  • colorbox
  • comments_order
  • config_filter
  • config_ignore
  • config_pages
  • config_split
  • csv_serialization
  • ctools
  • entity_reference_revisions
  • file_mdm
  • fivestar
  • fontawesome
  • geofield
  • geofield_map
  • httpswww
  • image_effects
  • imce
  • jquery_ui
  • jquery_ui_datepicker
  • jquery_ui_slider
  • jquery_ui_touch_punch
  • layout_builder_admin_theme
  • media_gallery
  • media_library_form_element
  • media_library_theme_reset
  • menu_breadcrumb
  • menu_link_attributes
  • metatag
  • noreqnewpass
  • page_specific_class
  • paragraphs
  • pathauto
  • rabbit_hole
  • rcr
  • redirect
  • redirect_after_login
  • responsive_menu
  • scn
  • selective_better_exposed_filters
  • slick
  • slick_lightbox
  • slick_views
  • smart_trim
  • superfish
  • toc_js
  • token
  • token_filter
  • transliterate_filenames
  • twig_tweak
  • video_embed_field
  • views_ajax_history
  • views_data_export
  • views_show_more
  • votingapi
  • webform
  • weight
  • xmlsitemap



Специально для этого сайта был написан модуль Russian currencies rates, о котором я уже делал пост


Выводы:

Клиент в восторге. Сайт стал быстрее, удобнее, а поддержка и доработки теперь стоят дешевле.

Комментарии

Аватар пользователя chelwolf chelwolf 8 июня в 10:55

Расскажите как оптимизировали производительность сайта до таких параметров PageSpeed?

Аватар пользователя ivnish ivnish 8 июня в 11:35
1

Ничего сложного
1) PHP 7.4
2) JS-библиотеки подгружаю только на тех страницах, где они используются
3) Включена агрегация JS и CSS
4) Все сторонние сервисы (youtube, jivosite и др) загружаются с небольшой задержкой (3 секунды)

Аватар пользователя chelwolf chelwolf 8 июня в 11:37

И ещё несколько вопросов:
1) Не возникло ли сложностей с установкой модуля blazy? Как его используйте?
2) Чем отличается поле weight от обычного поля с цифрой, где мы можем указать вес? В чем фишка?
3) Существенно сократили количество шаблонов в теме, как понял за счёт использования layout builder и paragraphs в связке с bootstrap? В итоге создаёте шаблоны для layout builder, потом создаёте типы параграфов и в связке получается удобный конструктор страниц? Какие сложности возникли при настройке, что в итоге не получилось сделать?

Аватар пользователя ivnish ivnish 8 июня в 11:44
1

1) Не возникло. Он шел как зависимость для slick и там же в первую очередь и используется.
2) Полагаю в том, что поле веса можно использовать в качестве сортировки во views. Не уверен, что поле с цифрой будет работать аналогично
3) За счет опыта и прямоты рук, в первую очередь Smile Да, использую bootstrap + LB. Параграфы использовались только в одном типе материала в качестве замены Field Collection. Шаблоны использовались только для очень сложной вёрстки со сложной логикой. В большинстве случаев хватало возможностей LB