Performance Modes and Asset Loading

Overview

KineticHub includes global performance settings that help you balance animation quality, responsiveness, and browser resource usage.

These settings are available from the KineticHub dashboard and apply across the website.

They do not replace normal WordPress performance practices such as image optimization, page caching, reliable hosting, or reducing unnecessary third-party scripts.

Open the performance settings

Sign in to your WordPress dashboard and select:

KineticHub

Locate the global performance and asset-loading options.

After changing a setting, save the dashboard configuration and reload the frontend page you want to test.

Clear cached CSS and JavaScript when the previous behavior remains visible.

Performance modes

KineticHub provides three global performance modes:

• Balanced
• Eco
• Performance

These modes affect the shared KineticHub motion engine. Individual blocks may also use their own animation, media, scroll, or interaction logic.

Balanced mode

Balanced is the recommended default for most websites.

The shared motion engine runs without the reduced update-rate limit used by Eco mode.

Use Balanced for:

• Business websites
• Portfolio websites
• Landing pages
• Agency websites
• Pages using several KineticHub blocks
• General desktop and mobile use

Start with Balanced unless testing shows that Eco is more appropriate for the page.

Eco mode

Eco reduces the update rate of the shared KineticHub motion ticker to approximately 30 frames per second.

This can reduce browser workload on pages containing several animated elements or on lower-powered devices.

Use Eco when:

• A page contains several animated blocks
• Mobile performance is a priority
• The website targets lower-powered devices
• Other plugins already run significant JavaScript
• Motion feels unnecessarily demanding

Eco mode does not compress media, optimize third-party scripts, or automatically simplify every block-specific animation.

Performance mode

Performance runs the shared motion engine without the reduced update-rate limit used by Eco mode.

In the current KineticHub release, both Balanced and Performance run without the Eco frame-rate cap. The final result still depends on the selected blocks, browser, device, media, and other scripts running on the page.

Do not assume that Performance mode will always produce a visible improvement over Balanced.

Test both modes on the actual frontend page and keep Balanced when there is no measurable or visual benefit.

Choosing the correct mode

Use this starting point:

Website type	Recommended mode
Standard business website	Balanced
Portfolio or landing page	Balanced
Resource-sensitive or animation-heavy page	Eco
Lower-powered mobile devices	Eco
Testing without the Eco update-rate limit	Balanced or Performance

Balanced remains the recommended starting point for most websites.

The best mode depends on the complete page, not only on one KineticHub block.

Asset optimization

KineticHub includes an Asset Optimization setting for its shared frontend styles.

When enabled, the shared KineticHub animation stylesheet is loaded in the normal document head.

This helps the browser receive the styles before rendering the visible page.

For most websites, Asset Optimization should remain enabled.

Compatibility loading

When Asset Optimization is disabled, KineticHub can load the shared frontend stylesheet later through the footer.

This compatibility behavior may help when:

• A theme creates a stylesheet ordering conflict
• A performance plugin changes CSS loading order
• KineticHub content briefly appears unstyled
• Combined or delayed CSS causes incorrect rendering
• You are diagnosing a frontend asset conflict

Loading styles later is not automatically faster.

In some situations, it can create a brief visual delay before the final KineticHub styles are applied.

Use the compatibility option only when it solves a confirmed issue.

What KineticHub loads

KineticHub uses shared assets for common motion and visual behavior.

Individual blocks also register the scripts and styles required for their own functionality.

The total page impact depends on:

• Which KineticHub blocks are present
• How many instances are used
• Whether the block uses WebGL, media, sticky behavior, or pointer interaction
• The size of images, audio, and video
• Other active theme and plugin assets
• Browser and device capabilities

The installed plugin ZIP size does not determine how much data is loaded on every frontend page.

Using cache and optimization plugins

KineticHub can be used with caching and performance plugins, but aggressive optimization may change script execution or stylesheet order.

Features that may require testing include:

• Combine CSS
• Remove unused CSS
• Load CSS asynchronously
• Delay JavaScript
• Defer JavaScript
• Combine JavaScript
• Minify inline scripts
• Guest optimization
• CDN rewriting

After enabling one of these options, test every page containing interactive KineticHub blocks.

Do not enable several aggressive optimization settings simultaneously without testing after each change.

JavaScript delay and interaction

Some KineticHub blocks initialize after the page loads or when the block enters the viewport.

A performance plugin that delays JavaScript until the first click or pointer movement may prevent an effect from appearing immediately.

This can affect blocks using:

• Pointer tracking
• Scroll progress
• Sticky or pinned media
• Modal interactions
• Audio controls
• Before-and-after dragging
• WebGL backgrounds

When an effect starts only after clicking the page, delayed JavaScript is a likely cause.

Exclude the relevant KineticHub frontend script from delay rather than disabling all optimization.

Media performance

Large media files often have a greater effect on page performance than the animation code itself.

Use appropriately sized media:

• WebP or AVIF for photographs when supported
• Compressed PNG only when transparency is required
• Optimized poster images for video
• YouTube or Vimeo for documentation videos
• Compressed audio files
• Images close to their actual displayed dimensions

Do not upload a very large image when the block displays it in a small card or mobile column.

Avoid excessive motion

A page can technically contain many animated blocks, but that does not mean every section should animate continuously.

For better performance and usability:

• Use one main visual effect per section
• Avoid several WebGL backgrounds on the same page
• Limit continuously running animations
• Do not stack multiple pointer-following effects in the same area
• Use static mobile fallbacks where appropriate
• Keep important text readable without animation
• Respect reduced-motion preferences

Motion should support the page content rather than compete with it.

Recommended configuration

For most websites, begin with:

• Performance Mode: Balanced
• Asset Optimization: Enabled
• Mobile Motion: Enabled
• Only required KineticHub blocks enabled
• Optimized images and media
• Page cache enabled
• Conservative JavaScript delay settings

Change one setting at a time and test the actual frontend result.

Verify performance changes

After configuring KineticHub:

1. Open the page in a private browser window
2. Scroll through the complete page
3. Test every interactive block
4. Resize the browser
5. Test on a real mobile device
6. Check that content remains accessible without animation
7. Confirm that no layout or styling appears late
8. Check the browser console for errors

Automated performance scores are useful, but visual stability and correct interaction are also important.

Troubleshooting

Animations feel choppy

Try these steps:

1. Switch from Performance to Balanced
2. Test Eco mode
3. Reduce the number of continuously animated blocks
4. Compress large background images
5. Disable unnecessary third-party scripts
6. Test without aggressive JavaScript delay
7. Check the page on another device

A single complex block is not always the cause. The total page workload matters.

KineticHub content appears unstyled briefly

Keep Asset Optimization enabled so shared styles load in the page head.

Also check whether an optimization plugin is delaying CSS or generating critical CSS incorrectly.

Clear all generated CSS after changing the setting.

A block starts only after clicking the page

A performance plugin may be delaying the KineticHub script until user interaction.

Temporarily disable JavaScript delay to confirm the cause.

Then create a targeted exclusion for the affected KineticHub script.

Changes are not visible

Clear:

• Browser cache
• WordPress page cache
• Generated CSS and JavaScript
• Server cache
• CDN cache

Then reload the page in a private browser window.

Performance mode does not fix a slow page

The main cause may be unrelated to KineticHub.

Check:

• Large images
• Autoplay video
• Third-party embeds
• Advertising scripts
• Chat widgets
• Multiple sliders
• Large web fonts
• Slow hosting
• Excessive theme scripts

Performance mode adjusts KineticHub motion behavior, but it cannot optimize unrelated page resources.

Next step

Continue with Responsive and Visibility Controls to learn how KineticHub blocks adapt across desktop, tablet, and mobile layouts.