Joomla 4 существенно улучшена по сравнению с Joomla 3. Прямо из коробки вы получаете очень быструю CMS со встроенной поддержкой структурированных данных (которые ранее назывались «микроданными»), а также несколько типов кэширования, подходящих для любой сферы применения, от легковесных персональных сайтов до массивных, нагруженных порталов.

Cтарые версии Joomla имели неоправданно плохую репутацию медленной и плохой для SEO CMS. Но теперь это далеко от истины. Joomla 4 без каких-либо сторонних расширений превосходит своих конкурентов, даже если они используют специально созданные расширения.

В этой серии статей мы обсудим, как оптимизировать Joomla 4, чтобы ещё больше улучшить её производительность, и как избежать всех ловушек, когда разрабатываете сайт для себя или клиента. Наша цель — сайт, привлекательный как для поисковых систем, так и для реальных посетителей.

Эта серия из пяти статей представляет собой обновление моей прошлогодней серии о настройке производительности Joomla 3. Я счастлив поделиться этими статьями с помощью журнала сообщества Joomla. Большое спасибо замечательным волонтёрам, которые сделали это возможным.

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

Зачем вам вообще нужен быстрый сайт?

Перед тем как мы отправимся в путешествие по оптимизации Joomla сайта, нам надо ответить на самый простой вопрос: почему это так важно? В конце концов, мы говорим о том, что вам придется проделать большую работу, прежде чем объявить свой сайт готовым к публикации. Действительно ли это стоит усилий, даже если ваш сайт уже привлекает значительный объем трафика и кажется вам быстрым?

Я твёрдо уверен в том, что работа по улучшению сайта определённо стоит потраченного времени, как по философским, так и по практическим причинам.

Первая философская причина заключается в том, что медленный сайт расточителен во многих аспектах. Он впустую тратит время каждого из нас. Ожидание загрузки страницы в течение 4–5 секунд может показаться не такой уж большой тратой времени, но в течение года, когда каждый из нас ждет загрузки сотен тысяч страниц, мы коллективно тратим впустую целые человеко‑годы нашего времени. Все это время мы тратим электричество на рендеринг контента медленнее, чем нужно, передаем больше данных, чем необходимо, и обрабатываем их медленнее, чем требуется для отображения, что приводит к негативному воздействию вашего сайта на окружающую среду.

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

Будь то спутниковый Интернет, который является единственной возможной связью с внешним миром в африканской деревне, или слабый Wi‑Fi на парковке McDonald's в бедном школьном округе в США, медленный сайт может создавать неосязаемый, но вполне реальный барьер между своим контентом и потенциальными посетителями. Тот факт, что большинство из нас имеют возможность жить в городских центрах развитых стран с быстрым интернетом с малой задержкой, не означает, что мы ненароком должны выступать в роли привратников информации, упуская из виду относительно простые возможности сделать эту информацию доступнее. Это особенно важно, если вы создаёте некоммерческие, образовательные, правительственные или другие сайты.

Что касается практических соображений, начнём с очевидной проблемы: медленный сайт разочаровывает своих посетителей. Скорее всего, они откажутся от вашего сайта и посетят чей‑то другой. Если посетители останутся на сайте, то, скорее всего, будут находиться в негативном расположении духа после серии длительных и ненужных задержек. Это ослабляет позиции вашего сайта, препятствует повторным посещениям и снижает коэффициент конверсии.

Вторая и самая важная практическая причина заключается в том, что поисковые системы больше не ранжируют ваш сайт только на основе контента и связей с другими сайтами. Они принимают во внимание Core Web Vitals.

Core Web Vitals (CWV) — это набор метрик, разработанных Google для оценки пользовательского опыта на веб‑сайтах. Эти метрики измеряют такие ключевые аспекты, как скорость загрузки страницы, интерактивность и визуальную стабильность.

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

Исходные предпосылки

Большинство статей, которые вы, возможно, читали по теме оптимизации сайта, как правило, аксиоматичны. Они утверждают, что есть некий Единый Истинный Путь, и если вы не последуете ему, вас ждет вечное проклятие. Ирония того факта, что существует столько же взаимоисключающих аксиоматических взглядов, сколько и людей, пишущих статьи, по‑видимому, ускользнула от внимания этих авторов.

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

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

Большинство из вас создают довольно небольшие или средние сайты для малого и среднего бизнеса или даже маленьких семейных магазинов. Вы не можете позволить себе одержимость достижением идеального результата. Это почти недостижимая цель, а не прагматичное ожидание для каждого сайта. Да, вы можете получить высший балл, но если это означает, что вам придется долго разрабатывать и поддерживать сайт, является ли это чем‑то положительным или вы невольно выдвинули свою кандидатуру на премию Дарвина?

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

Таков контекст данной серии статей. Это не аксиома, это практический факт. Я представляю различные способы оптимизации реальных сайтов с разумным компромиссом между максимальной производительностью и удобством поддержки. Это не абстрактные методы, которые прекрасно работают в теории, но на практике требуют гораздо больше ресурсов, чем реально доступно большинству наших читателей.

Давайте сформулируем это по‑другому. Да, вы всегда можете создать приложение на базе микросервисов и CDN, если захотите. Или использовать действительно продвинутые технологии, которые позволяют обойти множество ограничений, налагаемых универсальным подходом использования CMS, таких, как Joomla (или WordPress, или Drupal, или...), для того чтобы создать собственное приложение. Но я здесь не для того, чтобы рассказывать вам, почему или как не следует использовать CMS. Я здесь, чтобы рассказать вам, как лучше всего использовать имеющуюся у вас CMS для достижения лучших результатов, о которых вы раньше и близко не знали. Все эти приемы я практиковал на своих сайтах, и они сработали просто блестяще!

Абсолютно «очевидное»

Joomla впервые появилась в 2004 году под названием Mambo. За годы работы с ней у вас наверняка, как и у меня, наработались определенные подходы, которые кажутся совершенно очевидными. Но дело в том, что в действительности нет ничего «очевидного», все дело в опыте.

Раньше я думал, что люди, должно быть, сошли с ума, если не видят ряда очевидных на мой взгляд вещей. Но в конце концов я понял, что у меня есть немалый опыт работы с бэкендами множества сайтов, и я накопил уникальный набор навыков за долгую карьеру. Я имею в виду, что я понял: то, что очевидно для меня, может быть довольно загадочным для того, кто либо только начинает свой путь, либо привык делать все не так, как я. Честно говоря, если бы я мог обратиться к себе 16-летней давности, я бы, наверное, дал себе пощечину за то, что совершал поступки, которые, как я понял на собственном горьком опыте, либо бессмысленны, либо подрывают мою репутацию в долгосрочной перспективе.

Я расскажу о трех наиболее распространенных ошибках, которые я видел на сайтах, и о том, как их легко исправить. Кстати сказать, некоторые из них даже не имеют отношения к самой Joomla!

Хостинг

Самая распространенная ошибка, которую я вижу, — это когда люди выбирают дешевый виртуальный хостинг, а затем жалуются, что их сайт на Joomla работает медленно. Да, их сайт медленный, но Joomla не является причиной. Хостинг, который вы выбираете для своего сайта, имеет решающее значение. Не пытайтесь сэкономить на этом копейки!

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

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

Постарайтесь найти золотую середину между идеальной производительностью и рациональным бюджетом. Если вы не уверены, выбирайте виртуальный хостинг среднего уровня с хорошей репутацией и, возможно, вернитесь к этому вопросу через пару месяцев когда у сайта будет реальный трафик. Если ваш клиент настаивает на выборе бюджетного хостинга, важно провести с ним обстоятельную беседу. Объясните, что такой выбор, к сожалению, неизбежно отразится на производительности будущего сайта.

Готовые шаблоны

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

Я понимаю эту привлекательность готовых универсальных шаблонов, поскольку сам пользовался ими в прошлом. Универсальные шаблоны позволяют вам экспериментировать с макетом своего сайта и пробовать разные варианты, пока не найдете тот, который вам подходит. Я бы сказал, что вам следует заниматься этим, если вы чувствуете, что это ваш творческий процесс, но не обязательно придерживаться стандартного, готового шаблона, как только вы поймете, как должен выглядеть ваш сайт. Если вам сложно создать собственный шаблон, готовый вариант, безусловно, станет единственным выходом, но помните, что он ограничит ваши возможности в плане производительности.

Объективная проблема заключается в том, что универсальный шаблон создан для гибкости, а не скорости. По моему опыту, время загрузки вашей страницы (Time to First Byte — TTFB) может увеличиться на целых 1–3 секунды только из‑за лишнего кода, который вы тянете за собой, используя такой шаблон. Пользовательский шаблон на основе Joomla 4 Cassiopeia практически не влияет на производительность, задержка составляет доли миллисекунды.

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

Еще одна проблема с готовыми шаблонами и фреймворками шаблонов заключается в том, что они имеют тенденцию загружать все свои CSS и JavaScript в header HTML‑страницы, что отрицательно сказывается на Core Web Vitals, особенно на First Contentful Paint (FCP).

First Contentful Paint (FCP) — Первое существенное отображение. Это время, которое проходит с момента открытия страницы и до момента, когда посетитель увидит какое‑либо её содержимое (текст, изображение).

Пользовательский шаблон на основе Cassiopeia будет отложенно (атрибут defer) загружать эти статические файлы, что значительно ускорит отображение вашего сайта.

Если у вас есть навыки и время, вам будет лучше создать свой собственный шаблон. Это звучит пугающе, но это не так, если вы уже опытный разработчик сайтов на Joomla и основными навыками Joomla, такими как переопределение шаблонов. Вы можете использовать любой CSS‑фреймворк и начать с изменений стандартного шаблона Joomla 4, Cassiopeia.

Я ни в коем случае не являюсь фронтенд‑разработчиком. Но мне без проблем удалось взять созданный для моего сайта дизайн и «перевести» его в шаблон Joomla 4 на основе Cassiopeia. Bootstrap 5 — очень гибкий инструмент, заложенный в основу Joomla и шаблона Cassiopeia. Для реализации любых визуальных решений, в том числе адаптивных, потребуется понимать принципы работы CSS Flexbox.

Не переусердствуйте

Есть старая поговорка: «Можешь, не значит должен». В контексте Joomla, то, что вы можете установить сотни расширений, не означает, что вы должны это делать!

Имея в каталоге расширений Joomla более 7000 расширений, легко переборщить и установить все подряд. Плагин для этого, модуль для того, конструктор страниц вместо простого переопределения шаблона, и прежде чем вы это осознаете, на каждой странице вашего сайта уже будет загружено более 300 сторонних расширений. Как вы можете себе представить, это привело бы к существенному замедлению работы любого сайта.

Давайте поговорим о модулях. По моим мимолетным наблюдениям, 90% модулей, отображаемых на 90% сайтов, которые я посещал или над которыми работал, не имеют смысла существования. Никого не волнует погода в вашем городе. Если бы это было так, они бы спрашивали об этом Google, Alexa или Siri, вместо того чтобы посещать ваш сайт. Никого не интересуют три десятка кнопок, ссылок и баннеров на контент, которые есть на боковой панели. Людям нужна интуитивно понятная навигация, а не телефонная книга. Хуже того, социальные сети приучили посетителей вашего сайта входить в режим «слепоты к боковым панелям и баннерам», то есть они считают этот контент мусором, который им не нужен. Модули могут иметь реальное предназначение, но используйте их экономно. Не пытайтесь «заполнить пустое пространство» бесполезными модулями.

От переводчика:
Давным давно свой первый сайт на Joomla 1.0, я делал для городской газеты и главную страницу, я полностью заполнял модулями по аналогии с полосой газеты.

Это подводит нас к плагинам, особенно группы контента и системным плагинам, которые выполняют поиск и замену текста на всей странице. Плагины контента запускаются каждый раз, когда на вашем сайте отображается контент. Их задача выполнить какую‑то инициализацию и какую‑то замену текста. Эти операции требуют времени. Полностраничный поиск и замена системными плагинами, особенно если они используют регулярные выражения, занимают еще больше времени. Действительно ли поиск и замена на каждой странице, выводимой вашим сайтом, является лучшим решением по сравнению с переопределением шаблонов, переопределением языка или тратой времени на изменение контента либо в бэкэнде, либо непосредственно в базе данных?

При чрезмерном использовании модулей и плагинов вы можете получить сайт, которому придется делать сотни запросов к базе данных и тратить несколько драгоценных секунд на замену информации в контенте, на создание которого ушла целая вечность. Да, этот сайт будет ужасно медленным. На самом деле это не вина Joomla, это прямой результат выбранного вами подхода к реализации. Я не скажу, что это обязательно плохо, но и не скажу, что это лучший выход.

Если у вас возникла проблема, требующая решения, установка расширения должна быть последним средством. Начните с пользовательских полей, переопределений шаблона и языковых переопределений в первую очередь. Если вы думаете что сайт выглядит пустым, делайте качественный контент. Основная директива — KISS: Keep It Stupidly Simple.

KISS (акроним для «Keep it simple, stupid» — «Делай проще, тупица») — принцип проектирования, принятый в ВМС США в 1960 году.

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

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

Переопределить вместо добавления хлама

Большинство людей подходят к разработке своих или клиентских сайтов так же, как пользователи Android или iPhone подходят к использованию своего устройства: если мне нужно что‑то сделать, мне нужно что‑то установить. Я называю это There's An App For That Syndrome или сокращенно «TAFTS». Звучит как диагноз, не так ли?

«There's An App For That Syndrome» — «Синдром: На все есть приложение» — это ироничное выражение, которое появилось в начале 2000-х годов с ростом популярности смартфонов и мобильных приложений. Оно указывает на то, что в современном мире для практически любой проблемы или потребности можно найти соответствующее мобильное приложение.

Люди, страдающие этим синдромом, в конечном итоге используют огромное количество расширений, которые замедляют работу сайта и становятся серьезным препятствием при обновлении Joomla или PHP через несколько месяцев.

Дело в том, что вам не нужно добавлять хлам на свой сайт. Joomla обладает высокой степенью гибкости из коробки. Когда вы хотите что‑то сделать, остановитесь и спросите себя: можно ли это сделать, используя только встроенные возможности?

В отличие от большинства CMS, Joomla позволяет вам переопределять способ отображения чего угодно и всего, используя языковые переопределения, переопределения шаблона/макета и настраиваемые поля. Используя эти простые инструменты, вы можете создавать невероятно сложный контент, которым очень легко управлять. В конце концов, Joomla произошла от CMS под названием Mambo, девизом которой было «сила в простоте».

Используя только переопределения макета и настраиваемые поля, я создал страницу с видеоуроками для своего бизнес‑сайта, самостоятельно разместив видео (без встраивания YouTube/Vimeo). Страница категорий видео, на которую вы попадаете, представляет собой блог категории Joomla с простым переопределением шаблона и добавлением пользовательских CSS. Когда вы кликаете на категорию вы видите список видео. Это просто блог категории с переопределением шаблона. Длина видео — это настраиваемое текстовое поле. Есть еще два настраиваемых поля URL, указывающих на видеофайл и изображение кадра постера. Они используются для отображения верхней части отдельной видеостраницы (видеоплеера). Эта страница — всего лишь статья. Содержание статьи — это расшифровка, которую вы видите ниже страницы. Расшифровка содержит атрибуты data‑timecode, которые анализируются JavaScript‑кодом страницы, загруженным в переопределение шаблона, что делает их кликабельными ссылками, указывающими на определенные моменты времени в видеоплеере. Решение аккуратное и полностью основано на ядре Joomla. Нет необходимости в сторонней галерее или специальном компоненте видеоуроков.

Я видел, как простой список тегов становился удобной панелью навигации по тематическим разделам некоммерческого проекта. Я видел материалы Joomla с настраиваемыми полями, определяющими содержимое в удобной для пользователя форме в роли веб‑приложения с сенсорным управлением, без стороннего кода, за исключением обработчика событий касания JavaScript. Я даже видел очень простые переопределения шаблона, которые превращают стандартную страницу профиля Joomla в профессиональный, высококлассный сервис вместо набора хаотично расположенных полей.

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

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

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

Продолжение следует

Это перевод первой из пяти статей серии. Оригинал доступен по ссылке.

Немецкий перевод оригинальной статьи: https://www.jug‑zueri.ch/artikel/performance‑tuning‑in‑joomla-4-teil-1

Испанский перевод оригинальной статьи: https://mejorconjoomla.com/noticias/magazine/puesta‑a-punto‑del‑rendimiento‑de‑joomla-4-parte‑i