Плагин [OzzModz] XFOptimize - Minify, Preconnect & Preload 1.0.2 Release Candidate 4

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

Характеристики:

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

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

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

• Выбирайте между библиотеками TinyMinify или HTMLMinifier
• Низкое, среднее и высокое сжатие пробелов
• Удалить комментарии HTML
• Удалить встроенные комментарии CSS
• Переместить встроенные теги стиля в заголовок страницы
  • Комбинируйте встроенные теги стилей
• Удалить комментарии JS
• Минимизировать теги скриптов
• Переместить все теги скрипта в нижний колонтитул
  • Объедините все теги скрипта в один тег
• Выберите, какие элементы игнорировать, например pre, code и textarea

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

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

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

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

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

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

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

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

Из-за вероятных частых обновлений и изменений функций вступительная цена предназначена для пользователей за участие в процессе бета-разработки.

Общие вопросы и ответы

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

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

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

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

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

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

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

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

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

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

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

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

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

Часто задаваемые вопросы по минимизации

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

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

Вопрос: Являются ли некоторые настройки минимизации более вероятными для ошибок? Какие из них лучше?
О: Каждый параметр в HTMLMinify указывает, является ли он низким, средним или высоким риском. Скорее всего, параметры вызывают вопросы такие, как сокращение содержания <script> tags, or combing all <script> tags into one. Вы должны тщательно проверить свой интерфейс на наличие проблем при использовании любого из этих параметров и отключить, если обнаружите какие-либо ошибки.

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

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

Часто задаваемые вопросы о предварительном подключении

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

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

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

Часто задаваемые вопросы о предварительной загрузке

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

Вопрос: Как мне использовать метод предварительной загрузки вручную?
О: инструкция предзагрузка может быть установлена путем добавления данных поджатие="истинный" атрибут либо <img> или <script> tags themselves, or to their container elements. Помните, что вы можете (и должны) использовать ручной метод, пока включен режим приоритета! Это связано с тем, что режим приоритета не всегда может угадать, какие пользовательские ресурсы вы можете использовать, которые, по вашему мнению, должны быть предварительно загружены.

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

Добавление атрибута к тегу изображения:
HTML:
<img src="image.jpg" data-preload="true">

Просто добавьте атрибут из примера выше в свои шаблоны, и XFOptimize обнаружит и предварительно загрузит изображение! , that we want to preload? " data-translation="Но что, если у нас есть несколько ресурсов в элементе контейнера, например
, которые мы хотим предварительно загрузить? " data-ch="0" data-type="trSpan" style="box-sizing: border-box; font-size: 15px; color: rgb(20, 20, 20); font-family: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(254, 254, 254); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Но что, если у нас есть несколько ресурсов в элементе контейнера, например <div>, которые мы хотим предварительно загрузить? Мы можем просто установить атрибут для элемента контейнера:
HTML:
<div class="block">
<div class="block-container">
<div class="block-row block-body" data-preload="true">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="funny-cat.jpg">
</div>
</div>
</div>
XFOptimize найдет и обнаружит изображения и предварительно загрузит их. Это просто!

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

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

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