XF 2 XFOptimize - Minify, Preconnect & Preload 1.0.1 Release Candidate 2

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

Функции:

• Минификация и сжатие HTML, inline CSS и JS
• Изменение вложений на адаптивные уменьшенные копии для мобильных устройств
• Предварительное подключение внешних ресурсов для уменьшения блокировки загрузки страницы
• Предварительная загрузка важных ресурсов, таких как изображения, CSS или JS.
• Предварительнаая загрузка основных ресурсов XenForo
• Автоматические или ручные настройки для различных функций

XFOptimize объединяет мощные библиотеки минимизации для удаления пробелов, комментариев HTML, комментариев CSS и JS из исходного кода вашей страницы. Сжимая HTML-код, вы можете доставлять файлы страниц меньшего размера в браузер пользователя.

Настройте функции минификации Xenforo, такие как:

• Выбор между библиотеками TinyMinify или HTMLMinifier
• Низкое, среднее и сильное сжатие пробелов
• Удаление HTML-комментариев
• Удаление CSS-комментариев
• Перенос inline CSS в шапку страницы (+ их комбинирование)
• Удаление JS-комментариев
• Минификация JS
• Перенос всех js скриптов в подвал (+ их комбинирование)
• Выбор тегов, которые будут игнорироваться, например pre, code и textarea.

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

Если вашей странице необходимо загрузить шрифты с fonts.google.com и файл Javascript с adsense.google.com, эти поиски домена вызывают так называемую «блокировку» загрузки вашей страницы, когда дальнейшая загрузка не может быть завершена до тех пор, пока эти задачи не будут выполнены.

XFOptimize «предварительно подключается» к этим доменам, чтобы они выполнялись одновременно с загрузкой остальной части вашей страницы. Более того, XFOptimize может автоматически сканировать всю вашу страницу и предварительно подключать любой внешний ресурс. Поставить и забыть? Вот это отличная идея!
Еще одна чрезвычайно мощная функция — это возможность предварительной загрузки ресурсов для вашей страницы. Вы, наверное, слышали о «контенте верхней части страницы», то есть в той области, которую пользоатель видит без необходимости прокручивать страницу вниз. XFOptimize может предварительно загружать большие ресурсы, такие как большие библиотеки Javascript или CSS, изображения или даже мультимедиа, и делать их доступными раньше. Это позволяет вашей странице отображаться быстрее и улучшать показатели, такие как показатели Google Core Web Vitals или Lighthouse.

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

Более того, XFOptimize предлагает три метода предварительной загрузки:

• Ручная: Управляйте тем, какие ресурсы или изображения предварительно загружаются, добавля атрибут data-preload="true" в HTML-код вашего шаблона.
• Только сообщения: Предварительно загрузите первые вложения из сообщений форума.
• Приоритет: самый мощный инструмент XFOptimize. Режим приоритета интеллектуально выбирает ключевой контент, такой как ранние изображения вложений из сообщений, встроенные изображения на страницах менеджера ресурсов, полноразмерные изображения Xenforo Media Gallery и многое другое. Благодаря поддержке других популярных дополнений Xenforo, таких как DragonByte eCommerce, функция Приоритет со временем будет расширяться с учетом отзывов.

XFOptimize имеет большие амбиции по улучшению скорости и загрузки Xenforo, и многие другие функции еще предстоит реализовать, поэтому на данный момент дополнение находится в бета-версии.
FAQ

Вопрос: Где я могу найти настройки? Что делать после установки?
Ответ: Просто зайдите в админ-панель -> Настройки -> [Nulumia] XFOptimize. Каждая группа помечена отдельным заголовком, т.е. Минификация, предварительная загрузка, предварительное подключение и т. д.

Вопрос: Безопасна ли минификация? Может ли это сломать мой сайт?
Ответ: Минификация, включая самые расширенные настройки дополнения, по умолчанию отключены. Вы можете включить их на странице настроек, упомянутой выше.

Каждый сайт Xenforo уникален, со многими переменными, такими как стиль, который вы используете, или количество установленных дополнений. Хотя система минификации была тщательно протестирована на нескольких крупных веб-сайтах с множеством дополнений, есть вероятность, что часть функция минимизации не будет работать на вашем сайте. Однако именно поэтому XFOptimize позволяет настраивать минификатор, поэтому вы можете установить или снять флажки с определённых настроек, которые лучше всегоподойдут для вас.

Вопрос: Что такое настройка «Заменять вложения миниатюрами на мобильных устройствах»?
Ответ: На мобильных устройствах полноразмерные вложения будут заменены миниатюрами вложений с использованием свойства srcset. Это значительно ускорит доставку изображений за счет предоставления уменьшенных копий.

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

Дополнительное примечание. Если ваши миниатюры очень маленькие, при использовании этого параметра они могут отображаться в низком качестве. Вы можете рассмотреть возможность изменения размеров миниатюр вложений, чтобы они соответствовали свойству responsiveNarrow вашего стиля (рекомендуется: 480 пикселей). Это потребует восстановления миниатюр вложений, что потребует ресурсов сервера, особенно на форумах с большим количеством вложений.

Вопрос: Могу ли я по-прежнему использовать это с Cloudflare?
Ответ: Да, XFOptimize был разработан и протестирован на нескольких крупных веб-сайтах, использующих Cloudflare.

Вопрос: Сделает ли это дополнение мой сайт быстрее??
Ответ: Очевидно, каждый захочет узнать ответ на этот вопрос. Важно отметить, что XFOptimize не является заменой чистого, компактного и эффективного веб-сайта. Это включает в себя проблему раздутых стилей, беспорядочных дополнений или даже пользовательской разработки, которая добавляет слишком много беспорядка.

XFOptimize поможет оптимизировать и сделать все максимально эффективным, но не может волшебным образом исправить раздувание веб-сайта, если он действительно раздут.

При этом XFOptimize уже некоторое время запускался и тестировался на нескольких крупных веб-сайтах, которые используют множество крупных дополнений и пользовательских систем. Аддон изначально был создан для того, чтобы максимально приблизить баллы Google Core Web Vitals и Lighthouse к 100/100 для этих сайтов, и до сих пор он все еще используется с большим успехом!

Вопрос: Я использую аддон, но мои баллы Lighthouse или GTMetrix все еще низкие. Что делать?
Ответ: Вероятно, существует явная существующая проблема, которая замедляет работу вашего сайта. Вы должны потратить время, чтобы определить виновника.

Наиболее распространенные причины замедления работы и плохой оценки форумов Xenforo (которые не может исправить XFOptimize):

• Плохо разработанные стили
• Большое количество дополнений
• Разрешение слишком больших вложений на вашем сайте, таких как 1600px+. Темы, особенно с большим количеством полных вложений, оказывают наибольшее влияние на ваши форумы.
• Слишком много библиотек Javascript (подумайте о Google Adsense, метриках, Facebook Pixel, пакетах Jquery и т. д.)
• Запуск большего количества вариантов шрифтов Google, которые вам действительно нужны
• Медленное получение первого байта (TTFB)
• Проблемы с CLS (смещение макета содержимого) или LCP (наибольшая содержательная отрисовка). Это также может быть связано с вашим стилем, CSS или дополнениями.

Минификация FAQ

Вопрос: Какой метод минификации лучше?
Ответ: По возможности вместо TinyMinify рекомендуется использовать метод HTMLMinifier. Хотя HTMLMinifier с большей вероятностью столкнется с проблемами при минимизации ваших страниц, он предлагает гораздо больше возможностей. Вы должны попробовать запустить HTMLMinifier и включить как можно больше настроек, проверяя ваш Front-End на наличие проблем.

Вопрос: Я запускаю минификатор и вижу ошибки / мой форум работает неправильно. Что я должен делать?
Ответ: Во-первых, любые проблемы, которые могут возникнуть из-за минификатора, носят временный характер и могут быть немедленно исправлены путем отключения минификации. Тем не менее, вы должны снять отметку с каждой настройки в HTMLMinifier, пока у вас не исчезнут какие-либо проблемы. Опять же, это зависит от конкретного случая, в зависимости от того, какой стиль или дополнения вы используете.

Вопрос: Могут ли некоторые настройки минимизации вызывать ошибки? Какие лучше?
Ответ: В каждом параметре HTMLMinify упоминается, является ли он низким, средним или высоким риском. Наиболее вероятными настройками, вызывающими проблемы, являются такие параметры, как минимизация содержимого тегов <script> или объединение всех тегов <script> в один. Вы должны тщательно проверить свой Front-End на наличие проблем при использовании любого из этих параметров и отключить, если обнаружите какие-либо ошибки.

Вопрос: Как я узнаю, что минификация работает?
Ответ: Прежде чем включить минификацаию, щелкните правой кнопкой мыши в любом месте вашего сайта и выберите «Просмотреть исходный код страницы». Должно появиться столько сотен строк HTML-кода.

После включения выберите «Повторно просмотреть исходный код страницы». Теперь исходный код вашей страницы должен состоять только из одной строки кода!

Preconnect FAQ

Вопрос: Предварительное подключение ресурсов страницы? Я не знаю, что происходит на моей странице! Звучит сложно..
Ответ: Нет, просто установив Preconnect на «Автоматическое обнаружение», XFOptimize позаботится обо всем за вас! Автоматическое предварительное подключение происходит после того, как все на вашей странице Xenforo будет обработано из ваших шаблонов, что означает окончательный вывод страницы. Это означает, что XFOptimize улавливает практически все, что добавляется дополнениями, настройками шаблонов, модификациями шаблонов и динамическим кодом!

Вопрос: Какие типы контента получают предварительное соединение?
Ответ: Любой тип ресурсов, поступающих с внешнего домена или веб-сайта, будет обнаружен и загружен в очередь предварительного подключения. Сюда входят файлы шрифтов, мультимедиа, изображения, скрипты, библиотеки CSS, граватары и многое другое.

Вопрос: Я бы хотел больше контролировать то, что предварительно подключается. Могу ли я сделать это сам?
Ответ: Хотя мы верим, что XFOptimize выполняет свою работу, вы можете отключить автоматическое обнаружение и использовать параметр «Глобальные ресурсы предварительного подключения» либо в настройках [Nulumia] XFOptimize, либо установить URL-адреса предварительного подключения для каждого стиля в свойствах стиля!

Preload FAQ

Вопрос: Какой из трех режимов предварительной загрузки мне следует использовать?
Ответ: Режим приоритета рекомендуется, если у вас нет причин выбирать только вручную или только сообщения. Приоритет будет предварительно загружать важные ресурсы на многих других типах страниц и в разделах, а также включает ручное и сообщения!

Вопрос: Как использовать метод предварительной загрузки вручную?
Ответ: Предварительную загрузку вручную можно настроить, добавив атрибут data-preload="true" либо к самим тегам <img> или <script>, либо к их элементам-контейнерам. Помните, что вы можете (и должны) использовать ручной метод при включенном приоритетном режиме! Это связано с тем, что режим приоритета не всегда может угадать, какие пользовательские ресурсы вы можете использовать, которые, по вашему мнению, должны быть предварительно загружены.

Рассмотрим использование ручного метода:

Добавление атрибута к тегу изображения:

HTML:

Please, Log in or Register to view codes content!

Просто добавьте атрибут из приведенного выше примера в свои шаблоны, и XFOptimize обнаружит и предварительно загрузит изображение! Но что, если у нас есть несколько ресурсов в элементе-контейнере, таком как <div>, который мы хотим предварительно загрузить? Мы можем просто установить атрибут для элемента контейнера:
XFOptimize найдет и обнаружит изображения и предварительно загрузит их. Так просто!

Вопрос: Но... как насчет более сложных вещей, таких как фоновые изображения из встроенных атрибутов тега?
Ответ: Ага! XFOptimize тоже найдет их, например, из style="background-image: url('image1.jpg');"

Вопрос: Серьезно?
Ответ: Да, XFOptimize анализирует HTML и также получает эти изображения. Текущее ограничение заключается в том, что XFOptimize еще не может предварительно загружать узлы, установленные в основных или пользовательских шаблонах .less в Xenforo, таких как extra.less или core.less.

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