XF 2.1 / 2.2 XFOptimize - Minify, Preconnect & Preload 1.0.2 Release Candidate 4

1.jpg

2.jpg

XFOptimize speeds up your Xenforo forum and delivers pages faster, thanks to its powerful minification, preconnect and preloading features. By optimizing the page load process, you can shave precious time and improve your page speed scoring via Google or other services.

Features :
  • Minify & compress HTML, inline CSS and JS
  • Change attachment full size images to responsive smaller copies for mobile devices!
  • Preconnect external resources for less page load blocking
  • Preload important resources, such as images, CSS or JS
  • Preload core Xenforo resources
  • Automatic or manual settings for various features
  • Deep intelligent detection of page source assets
3.jpg


XFOptimize bundles powerful minification libraries to strip whitespace, HTML comments, CSS & JS comments from your page source. By compressing your HTML, you can deliver smaller page files to your visitor's browser.

Customize Xenforo minification features such as :
  • Choose between TinyMinify or HTMLMinifier libraries
  • Low, medium and high whitespace compression
  • Remove HTML comments
  • Remove inline CSS comments
  • Move inline style tags to the page head
    • Combine inline style tags
  • Remove JS comments
  • Minify script tags
  • Move all script tags to footer
    • Combine all script tags into a single tag
  • Choose which elements to ignore, such as pre, code, and textarea
4.jpg


You've probably seen all those pesky files that need to load whenever accessing your forum. From Javascript libraries, external images, analytics scripts or font files, all those small files add time to your page load by requiring your browser to look up the domain names where they're held.

If your page needs to load fonts from fonts.google.com, and a Javascript file from adsense.google.com, these domain lookups cause what is known as "blocking" to your page load, where more loading cannot complete before these tasks are done.

XFOptimize "pre-connects" to these domains so they are done in tandem with loading the rest of your page. What's more, XFOptimize can automatically scan your entire page and pre-connect any external resource. Set it and forget it? That's the idea here !

5.jpg


Another vastly powerful feature is the ability to preload resources for your page. You've probably heard of "above-the-fold" content, which is the area your visitor sees without having to scroll down. XFOptimize can preload large assets, such as hefty Javascript or CSS libraries, images, or even media, and make them available sooner. This allows your page to render faster and improve scoring such as Google Core Web Vitals or Lighthouse metrics.

Plus, faster loading means less waiting time for your visitors!

What's more, XFOptimize offers three preloading methods:
  • Manual: Control which assets or images are preloaded by adding the data-preload="true" attribute to your template HTML
  • Posts only: Preload the first attachments from forum posts
  • Priority: XFOptimize's most powerful tool, Priority mode intelligently selects key content such as early attachment images from posts, embedded images within Resource Manager pages, Xenforo Media Gallery full sized images and more. With support for other popular Xenforo addons such as DragonByte eCommerce, the Priority feature is aimed to grow over time with feedback.
6.jpg


XFOptimize has great ambitions to improve Xenforo speed and loading, with many more features still to be implemented. Early adopters who purchase XFOptimize will have the introduction price available. As XFOptimize grows in features and improvements, the price will likely increase.

Because of likely frequent updates and feature changes, the introductory price is aimed at users for participating in the beta development process.

7.jpg


General FAQ

Q: Where can I find the settings? What do I do after install ?

A: Simply go to Admin -> Options -> [Nulumia] XFOptimize for all the different settings. Each group is labelled by a different heading, ie. Minifcation, Preload, Preconnect etc

Q: Is the minification safe? Can it break my site ?
A: Minification, including most advanced settings in the addon, are disabled by default. You can enable them through the settings page mentioned above.

Every Xenforo site is different, with many variables such as the style you're using or the number of addons installed. While the minification system has been heavily tested on several large websites with many addons, there is a chance part of the minify features won't work well on your site. However, that's why XFOptimize allows customization of the minifier, so you can check or uncheck settings to best work for you.

Q: What is the "Swap attachments with thumbnails on mobile" setting ?
A: On mobile devices, full size attachments will be replaced by the attachment thumbnail version instead, by utilizing the srcset property. This will dramatically speed up delivery of images by serving smaller copies.

Depending on your thumbnail dimension settings, this should be much closer to typical mobile screen size and can save considerable bandwidth, rather than displaying full images. Visitors can still see the full resolution image by tapping to trigger the lightbox popup.

Advanced note: If your thumbnails are very small, they may appear with poor quality while using this setting. You might consider changing attachment thumbnail dimensions to match your style's responsiveNarrow property (recommended: 480px). This will then require rebuilding attachment thumbnails, which will consume server resources, especially on boards with large number of attachments.

Q: Can/should I still use this with Cloudflare ?
A: Yes, XFOptimize was developed and testing on several large websites running Cloudflare CDN

Q: Will this addon make my site faster??
A: Obviously everyone will want to know the answer to this question. It's important to note, that XFOptimize is not a replacement for having a clean, lean and efficient website. This includes the problem of bloated styles, messy addons or even custom development which adds too much clutter.

XFOptimize will help streamline and make things as efficient as possible - but cannot magically fix website bloat if your website is indeed bloated.

That being said, XFOptimize has already been run and tested at several large websites for some time, which utilize many large addons and custom systems. The addon was originally created to boost Google Core Web Vitals and Lighthouse scores as close to 100/100 as possible for these sites, and so far it's still being used to great success!

Q: I'm using the addon but my Lighthouse or GTMetrix scores are still low. What gives ?
A: There is likely a clear existing problem which is slowing down your site. You should take time to learn how to read the reports for these type of services, and identify the culprit issues.

The most common causes of slow-down and poor scores for Xenforo forums (which XFOptimize can't fix) are :
  • Poorly developed styles
  • Too many addons
  • Allowing too large attachments at your site - such as 1600px+. Threads especially with many large full attachments have the biggest impact on your forums.
  • Too many Javascript libraries (Think Google Adsense, Tracking codes, Facebook Pixel, those fancy Jquery bundles, etc)
  • Running more Google font variations that you really need
  • Having a slow or shared server (identified by a long TTFB, or "time to first byte")
  • CLS (Content layout shift) or LCP (Largest contentful paint) issues. These are also likely to do with your style, CSS, or addons
Minification FAQ

Q: Which minify method is better ?

A: If possible, the HTMLMinifier method is recommended over TinyMinify. While HTMLMinifier is somewhat more likely to run into trouble minifying your pages, it offers much more power and features. You should try running HTMLMinifier and enabled as many settings as possible while checking your front-end for issues.

Q: I'm running the minifier and I'm seeing bugs / my forum isn't behaving right. What should I do ?
A: First, any issues you may experience due to the minifier are temporary and can immediately be fixed by disabling Minification. However, you should uncheck each setting under HTMLMinifier until you no longer experience any issues. Again, this is a case-by-case basis due to which style or addons you're using.

Q: Are some minify settings more likely to cause bugs? Which are best ?
A: Each setting under HTMLMinify mentions whether it's Low, Medium, or High risk. The most likely settings to cause issues are those such as minifying the contents of <script> tags, or combing all <script> tags into one. You should check your front-end thoroughly for issues if using either of these settings, and disable if you encounter any bugs.

Q: How do I know the minify is working ?
A: Before enabling minify, right click anywhere on your site and select "View page source". It should appear as many hundreds of lines of HTML code.

After enabling, select "View page source again". Your page source should now only be a single line of code!

Preconnect FAQ

Q: Preconnecting page resources? I don't know what's running on my page! Sounds complicated..

A: Nope, simply by setting Preconnect to "Automatic detection", XFOptimize will take care of everything for you! Automatic preconnection occurs after everything on your Xenforo page has rendered from your templates, meaning the final output of the page. That means XFOptimize catches virtually everything added by addons, template customizations, template modifications and dynamic code!

Q: What kind of things get preconnected ?
A: Any type of asset coming from an external domain or website will be detected and loaded into the preconnect queue. This includes font files, media, images, scripts, CSS libraries, gravatars and more.

Q: I'd like more control over what gets preconnected. Can I do it myself ?
A: While we have faith in XFOptimize to get the job done, you can disable automatic detection and use the "Global preconnect resources" option either in Admin -> Options -> [Nulumia] XFOptimize, or set preconnect URLs on a per-style basis in style properties!

Preload FAQ

Q: Which of the three preload modes should I use ?

A: Priority mode is recommended unless you have a reason to choose either Manual or Posts only. Priority will preload important assets on many other page types and sections, but also includes Manual and Posts as well!

Q: How do I use the Manual preload method ?
A: Manual preloading can be set by adding the data-preload="true" attribute to either <img> or <script> tags themselves, or to their container elements. Remember, you can (and should) use Manual method while Priority mode is enabled! This is because priority mode can not always guess which custom assets you may be using that you feel should be preloaded.

Let's take a look at using the Manual method :

Adding the attribute to an image tag :

HTML:
<img src="image.jpg" data-preload="true">

Simply add the attribute from the example above in your templates, and XFOptimize will detect and preload the image! But what if we have multiple assets in a container element, such as a <div>, that we want to preload? We can simply set the attribute to the container element :
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 will find and detect the images and preload them. That simple!

Q: But... what about more complex things, like background images from inline styles ?
A: Yup! XFOptimize will find those too, such as from style="background-image: url('image1.jpg');"

Q: Seriously ?

A: Yup, XFOptimize parses the HTML and nabs these images as well. The current limitation is XFOptimize cannot yet preload assets set in core or custom .less templates within Xenforo, such as extra.less or core.less.

The manual method is aimed at targeting custom content, such as Page nodes, HTML widgets, or any other content that uses the Xenforo template syntax.

RECOMMENDED ALONG WITH XFOPTIMIZE :

Nulumia submitted a new resource: GA-Lite - Lightweight, cacheable version of the Google Analytics library This simple addon replaces the Google Analytics library with the GA-Lite library, a small cacheable version which can help slim your page size and load by a small amount. GA Lite is...

This simple addon collapses long areas of content on mobile devices into an expandable block and "Read more..." button. This feature is very similar to the widely seen "Read more" links on Wordpress blogs and many articles on the web. How else...

XenForo uses the icon font Font Awesome Pro 5 that contains over 7.000 icons of which XenForo typically uses only a few hundred. But as all icons are included in the CSS and font files, browsers have to download the full font files and CSS which...

Download V1.0.1 Beta 7 :

Version 1.0.1 Release Candidate 1 Bugfixes, Preconnect URL errors, Visual settings layout, Label colors

Changelog


  • Fixed a bug which could cause appended preconnect URLs from appearing in some webmaster tools (Bing, Google etc)
  • Fixed a bug which could cause an error "Trying to access array offset of type bool"
  • Fixed several bugs which could occur when using the TinyMinify library
  • Added a new simple regex minification method
  • Adjusted minify PHP listener for slightly better efficiency
  • Minify listener now bails much earlier if no optimization methods are required
  • Risk level labels are now color coded for HTMLMinifier library (Lowest-High)
  • Added a new visual settings page layout with quicklinks to various speed testing sites (GTMetrix etc)
To update your theme, please download the latest version at:


You must select "Overwrite files during install/upgrade" when upgrading to this version.

Overview

This update fixes a number of bugs reported by users, including PHP errors when using the TinyMinify library. Also, a new visual header has been added to the settings page, with quicklinks for speed testing tools.

A note on using <!CDATA> tags
Some users have reported front-end breakage when using the HTMLMinifier library and when CDATA tags are present. The following is an example of CDATA script:

JavaScript:
<script type="text/javascript">
    <![CDATA[
        alert("Hello World");
    ]]>
</script>

While a method is currently being worked on to fix this, it's still recommended to disable the "Minify script tags" option. A solution will be noted in a future release when added.

New visual settings page

33.jpg


Color coded labels !

34.jpg


Version 1.0.1 Release Candidate 2 Disable LCP Lazy Loading (Metric) | Efficiency Improvements | Compatibility
  • Added new feature to not lazy load the first post attachment (now recommended by Page Speed Insights & GTMetrix)
  • Made numerous improvements to template modifications in order to prevent conflict with third-party addons and styles
  • Moved several search & replace functions to more reliable REGEX
  • Improved efficiency of some PHP handlers
  • Fixed an issue which could affect the head/title area in UI.X
  • Fixed an issue which could cause preload or preconnect URLs not to render in the head section of certain themes
  • Established base code for future shared UI & recommendations system with other Nulumia addons for a future update
  • Added several important compatibility fixes with [Nulumia] SEO & Index Tools
  • Added compatibility fixes for [Nulumia] Cloudflare Image Resizing
  • Added compatibility fixes for [XON] Lazy Image Loading
  • Updated option group order in the Admin -> Options list to be alphabetized among [Nulumia] addons
To update your theme, please download the latest version at:


You must select "Overwrite files during install/upgrade" when upgrading to this version.

Overview

This update adds multiple small improvements, conflict fixes and greater efficiency for the PHP handlers. Additionally, a new feature is available via the settings page to disable lazy loading for the first post attachment (Above the fold / LCP) image of thread pages.

This is a new recommendation reported by both GTMetrix and Page Speed Insights, and can affect speed scoring. As such, this addon has been updated to reflect this metric.

Lazy loading your LCP image (e.g., hero image, main slider, etc.) can have a detrimental effect on your page's LCP timing. While you should lazy load offscreen images on your page, it's not recommended to lazy load above-the-fold content like your LCP image in the interest of achieving a fast...
gtmetrix.com

Further, several key compatibility issues have been added for [Nulumia] SEO & Index Tools and [XON] Lazy Image Loading.

Finally, there are several tweaks to make XFOptimize work hand in hand with the new [Nulumia] Cloudflare Image Resizing addon.

New feature to disable LCP Lazy Load + note to disable switching mobile attachments when using Cloudfare Image Resizing :

.png



Download V1.0.1 Release Candidate 2 :

Source :

Version: 1.0.2 Release Candidate 1

Changelog :

  • Fixed an issue where script tags entered in post content via BBCodes could be rendered in the footer via the Schema application/ldjson markup
  • Improved handling of ldjson script tags
  • Improved various aspects of the HTMLMinifier library
  • Improved accuracy of template modification fixes for [rellect] Favicon for Links addon
  • The addon now correctly fixes Javascript introduced by the [rellect] Favicon for Links addon
  • Temporarily disabled the HTMLMinifier "Minify script tags" option due to some third-party addon conflicts
  • Improved compatibility of all custom filters/settings with HTMLMinifier's settings
  • Improved HTML markup validation for deferred scripts
  • Improved existing defer scripts feature
  • Improved ordering and execution of scripts moved to footer
  • Added new feature to move render-blocking CSS file into inline style tag in the header (common recommended fix by Lighthouse/GTMetric)
  • Improved handling of the Responsive Avatars feature
  • Improved efficiency of PHP listeners
  • Added further compatibility with [OzzModz] Push Notification Improvements & SEO & Index Tools
Overview

This release contains major bug-fixes and improvements, including a security fix where scripts entered via BBCode could be replicated in the footer through the page Schema.org markup. In addition, numerous aspects of the addon's minifiers have been improved with greater accuracy and efficiency.

Several new features have been introduced, such as the ability to change Xenforo's secondary loaded CSS URL into an inline style tag within the head of the document. This is often reported by page testing services as a way to reduce render blocking.

Before :

standard-darkHeader.png


After :


minimal.png


It is recommended to check your browser console for errors, test your site for front-end issues, and perform updated speed audits when enabling the following features for the first time :

Defer scripts
Defer CSS
Move blocking CSS to inline style
Use responsive avatars

Version: 1.0.2 Release Candidate 2

XFOptimize

Version: 1.0.2 Release Candidate 2

Changelog
  • Fixed an issue where the reply editor would not appear when deferred scripts is enabled and a user in the thread was ignored
  • Fixed an issue where the "View ignored content" link would not render during the same conditions
  • Improved handling of the deferred scripts feature
  • Made several tweaks which should prevent a rare mobile issue regarding reactions
  • Improved deferred scripts feature involving third-party services which inject script tags using cfasync loading attribute
Overview
This update improves the Deferred Scripts feature to prevent several bugs and work better with Cloudflare served asynchronized assets.
Due to the wide variety of custom themes, scripts, plugins and configurations on users' websites, the Deferred Scripts feature will continue to be refined to work as best as possible with feedback. Please occassionally check your front-end and browser console and report any issues you may find - we appreciate your help and understanding.
Version: 1.0.2 Release Candidate 4 Changelog :
- Added improved compatibility for /View/ class extensions when other addons extend those same classes.

Download V1.0.2 Release Candidate 4 :
 

Attachments

  • 8.jpg
    8.jpg
    58.1 KB · Views: 2
  • 9.jpg
    9.jpg
    108.1 KB · Views: 2
  • 10.jpg
    10.jpg
    43 KB · Views: 2
  • 11.jpg
    11.jpg
    108.7 KB · Views: 2
Back
Top