90 баллов в Pagespeed для сайта на Joomla

  • 15.07.2020
90 баллов в Pagespeed для сайта на Joomla

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

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

Делаем первоначальные замеры Pagespeed.

Результаты, весьма печальны, и я уверен, что многие шаманы говорили, что это нормально, и они ничего поделать не могут.

Теперь смотрим, что же рекомендует Google?

Куча не понятных строчек, давайте по порядку, сделаем, что зависит от нашего сервера:

  • Зададим правила эффективного использования кеша для статических объектов.
  • Включим сжатие текста.

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

У меня на хосте ISP панель проблем с этим нет. Идем в настройки домена и включаем вот такой конфиг.

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

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

Какой результат?

Баллов прибавилось, но явно не то, что мы ожидали. Это очень важный этап оптимизации в реальности он дает гораздо больше, чем все остальные.

Еще раз смотрим, что можно улучшить?

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

Для этого этапа и последующих я использую бесплатный плагин JsCssManipulate - он нам поможет удалить JS скрипты и CSS стили. Именно они мешают нашей странице отрендерить быстро.

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

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

Так же я считаю, что не нужные параметры в шаблоне и ряде плагинов:

  • Отключаем в плагине System - JCE в параметре "Load Column Styles" загрузку стилей.
  • Отключаем в настройках шаблона Аsteroid "Preloade".

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

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

Для этого мне опять нужен плагин JsCssManipulate.

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

В настройках плагина делаем настройки: "Позиция модифицированного JS и CSS" - "Подвал".

Расширяем список пунктов. И просто переносим все скрипты в подвал и модифицируем.

И это дает нам еще 4 балла. А рендер страницы еще ускоряется и снова тут происходит скачок, когда глаз начинает замечать изменения.

Опять анализируем, что можно улучшить для больших показателей Pagespeed?

Сравните на этом этапе на сколько улучшились цифры, это реальный рост загрузки сайта.

Теперь самое сложное как сделать из 64 баллов 90?

1. Весь ответ шрифты. Дело в том, что подключение шрифтов в Astroid ужасное, их огромное количество и они подключаются со шрифтов google. Что можно сделать?

Тут варианта два отключать шрифты Astroid и через вкладку Custom Code подключать их уже локально, но я очень смалодушничал и включил шрифты Arial, Halvetica, и это сразу дало 86 баллов.

2. Отключаем все, что может влиять на производительность в Яндекс метрике, выставляем все в позицию fasle, да мы теряем в функциональности метрики, но она перестает влиять на поток. И обязательно отключайте такие опции как вебвизор.

3. Переопределяем jquery (если у вас старая версия ) на последнюю актуальную версию. Кидаем последнюю версию модифицированного jquery в папку /ваш_шаблон/js/jui/jquery.min.js. Дело в том, что jquery используемый по умолчанию в Joomla очень древний и не оптимально работает с DOM. В чате подсказали, что Joomla рекомендует переопределять и не сжатую версию jquery.

4. Настроил ресайз изображений, долго искал специально для статьи подходящий плагин Joomla! Resize Image on the Fly and Cache. Сложность в том, что у меня изображения добавляются исключительно через вкладку Изображения и Ссылки, а таких плагинов оказалось мало.

5. Делаем предзагрузку шрифтов.

В настройках шаблона в HEAD добавляем предзагрузку шрифта.

<link href="/media/astroid/assets/fontawesome/webfonts/fa-regular-400.woff2" rel="preload" as="font" crossorigin="anonymous" type="font/woff2">

К сожалению, сделать нормальную предзагрузку шрифтов в Astroid не получилось. Дело в том, что надо добавить в стили подключения шрифтов font-display: swap; , а это к сожалению не реально. Кто знает, как решить эту проблемы, милости просим рецепт. Но это не значит, что рецепт нерабочий для других шаблонов.

Ну и какой наш результат? Та дам, заветная зеленая зона.

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

Вадим Куницын
Россия , Калининград , 38 лет
id datеtime user_name message
27716662021-08-18T12:57:55+00:00Аноним 245Ещё:
- загрузка webp сервером
- внедрение svg
- lazy load
- шрифты с своего сервера (гугл фонтс сейчас не кешируются)
- прелоад для больших изображений на первом экране
- прелоад для шрифтов
- шаблон полностью с нуля без лишнего кода и лишнего php
27716482021-08-18T12:54:03+00:00Аноним 245Есть сайт на joomla+k2. В этом месяце натянул новый шаблон, убрали бутстрап. Убрали jch optimize. Результат - 93 по мобилке и 95-98 на десктопе. Это главная, на ней штук 30 изображений и много разных блоков.
25646422021-06-17T21:57:05+00:00Аноним 587Аноним 907, А какой в нем смыл? Большую часть можно сделать вручную и гораздо корректней. Одно из самых вредных расширений на сайте.
25645872021-06-17T19:59:11+00:00Аноним 907Было бы не плохо, если бы разобрали на примере плагина JCH Optimize
22776192021-03-30T08:03:10+00:00Аноним 798Ну еще можно блин чисто пустую страницу грузить ) сайт по сути вообще визуально пустой.
13011742020-10-27T11:58:11+00:00Куницын ВадимAnonymous 381, На скрол метрику цеплять не очень хорошая идея.
12959762020-10-25T09:12:10+00:00Anonymous 381Noname, Вот что улучшит показатели:
Отложенная загрузка метрики:
https://shevelev.design/blog/otlozhennaya-zagruzka-metriki/

Кэширование css, images, js и т.д.
https://stackoverflow.com/questions/13028990/htaccess-leverage-browser-caching-for-images-and-css
12781702020-10-18T08:28:23+00:00Anonymous 381Noname, "Загрузку Метрики можно отложить на 3-5 секунд без отключения ее функционала."

Как этого добиться?

Кстати, еще можно попробовать плагин webp от dj-extensions.
12781652020-10-18T08:27:12+00:00Anonymous 381Noname, Удалите предыдущее сообщение, плиз. случайно запостил.
По теме:

"Загрузку Метрики можно отложить на 3-5 секунд без отключения ее функционала."
Каким образом это сделать?

еще можно внедрить поддержку webp. есть плагин: https://dj-extensions.com/dj-webp
10311712020-07-17T12:39:53+00:00Куницын ВадимNoname, В этой статье был рассмотрен самый простой вариант, когда человек не умеет работать с CSS кодом, и у него клубный шаблон, который крайне тяжело поддается выпиливанию шрифтов и скриптов...
А так я полностью с вами согласен. HTTP/2 и как следствие HTTPS обязательны.
10297882020-07-16T18:32:52+00:00Alex RevoNoname, Забыл еще сказать, что font-display: swap; можно получить если подключить шрифты в своем css файле.
10297662020-07-16T18:27:09+00:00NonameДобавлю свои пять копеек:
Загрузку Метрики можно отложить на 3-5 секунд без отключения ее функционала.
Еще можно поискать какие-то плагины для ленивой загрузки изображений (lazy load), кажется в том же JCH Optimize это есть.
Сам хостинг тоже должен быть очень быстрым, обязательна поддержка HTTP/2. Если у вас VPS то можно получить зеленую даже без кропотливой работы со скриптами.
И, кстати, сами скрипты вроде того же jquery можно подключать с CDN, иногда это дает прирост скорости, а иногда нет, смотрите по резульатам.

Комментарии  

CleverAd
+4 # CleverAd 17.07.2020 23:09
я имспользую в работе шаблоны от yootheme. они без танцев с бубнами ооочень быстрые и хорошо оптимизированы https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdemo.yootheme.com%2Fthemes%2Fjoomla%2F2020%2Fcreative-hub%2F&tab=mobile
Вадим Куницын
+3 # Вадим Куницын 21.07.2020 11:21
Это да :-) но у них кстати тоже проблема с подключением и оптимизацией шрифтов, как это не печально.
Алексей Гневышев
+3 # Алексей Гневышев 19.09.2020 13:47
Цитата:
Кто знает, как решить эту проблемы, милости просим рецепт.
Если говорить о шрифтах из Google Fonts - сейчас они уже итак идут с font-display: swap;
Надо просто обновить код вставки шрифта.

Но тут дело даже не в "font-display: swap;", я думаю.
Дело в предзагрузке.

Надо посмотреть в PageSpeed href файла шрифта, для которого он предлагает внедрить предзагрузку.
А потом в налаче head добавить мета тег, наподобии:


;-)
Алексей Гневышев
-1 # Алексей Гневышев 19.09.2020 13:50
Кажется метатег в предыдущем комменте вырезан )
Попробую написать так:
link rel="preload" href="/templates/___/fonts /fontawesome-webfont.woff 2?v=4.7.0" as="font" type="font/woff2" crossorigin
Вадим Куницын
+1 # Вадим Куницын 21.09.2020 09:35
Да действительно почему-то вырезало.

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Логотип Joomla

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

Мы рады пригласить вас в ряды нашего сообщества!

Свернуть

Коротко о главном в Joomla

Новости портала

Новое в блогах

Видео