Overview
KineticHub is designed to work with standard WordPress caching and performance tools.
However, aggressive CSS or JavaScript optimization can change:
- The order in which scripts run
- When interactive blocks initialize
- When block styles become available
- Whether inline configuration is preserved
- How generated files are cached
- Whether old plugin assets remain active after an update
When a KineticHub block works before optimization but stops working after optimization is enabled, the optimization configuration should be tested first.
Do not immediately remove and recreate the block. Its saved content is usually not the cause.
How KineticHub loads its assets
KineticHub uses several types of frontend assets.
These include:
- A shared motion engine
- Shared animation styles
- Shared global CSS variables
- Block-specific frontend scripts
- Block-specific styles
- Optional custom CSS saved through the KineticHub dashboard
Individual blocks register their own frontend files through WordPress block metadata.
This means an optimization plugin may process both shared KineticHub files and files belonging to individual blocks.
Shared KineticHub script
The shared KineticHub motion engine is registered under the WordPress script handle:
kinetichub-core-engine
Its frontend file is:
build/core.js
KineticHub also places its global frontend configuration before this script.
That configuration may include settings such as:
- Global motion smoothing
- Mobile motion behavior
- Performance mode
- Free or PRO runtime status
An optimization plugin must preserve the correct order between the inline configuration and the shared engine.
If the engine runs before its configuration is available, motion behavior may not initialize as expected.
Shared KineticHub stylesheet
KineticHub uses a shared animation stylesheet with the handle:
kinetichub-global-animations
Its file is:
assets/css/global-animations.css
When Asset Optimization is enabled in the KineticHub dashboard, this stylesheet is loaded through the normal page head.
When the setting is disabled, KineticHub loads the shared stylesheet later through the footer as a compatibility option.
For most websites, keep Asset Optimization enabled.
Use the compatibility behavior only when you have confirmed a stylesheet-order conflict.
Global CSS variables
KineticHub adds shared CSS variables through an inline stylesheet registered under:
kinetichub-global-variables
These variables can include values such as:
- Global accent color
- Shared glass blur intensity
Optimization tools that remove, relocate, or incorrectly combine inline styles may prevent blocks from receiving these global values.
If KineticHub colors or shared visual settings disappear, check whether inline CSS is being removed or delayed.
Custom KineticHub CSS
When custom CSS is saved through the KineticHub dashboard, it is added through the handle:
kinetichub-custom-css
After changing custom CSS, clear all generated CSS and page caches.
A performance plugin may continue serving an older combined stylesheet even after the KineticHub setting has been updated.
Block-specific assets
Each KineticHub block can register its own:
- Frontend script
- Frontend style
- Editor script
- Editor style
- Server-side render file
The exact files depend on the selected block.
Interactive blocks may require their frontend script for:
- Pointer tracking
- Dragging
- Modal controls
- Audio playback
- Scroll progress
- Sticky or pinned layouts
- Canvas or WebGL rendering
- Media transitions
Delaying or removing a block-specific script can leave the block visible but non-interactive.
Recommended starting configuration
Begin with conservative optimization settings.
A safe starting point is:
- Page caching enabled
- Browser caching enabled
- Image optimization enabled
- CSS minification enabled only after testing
- JavaScript minification enabled only after testing
- CSS combination disabled initially
- JavaScript combination disabled initially
- JavaScript delay disabled initially
- Remove Unused CSS disabled initially
- KineticHub Asset Optimization enabled
After confirming that the page works, enable additional optimization features one at a time.
Test the frontend after every change.
Page caching
Normal page caching should not prevent KineticHub from working.
However, cached pages may continue serving old KineticHub markup, styles, or scripts after:
- Updating the plugin
- Changing dashboard settings
- Editing a block
- Switching between Free and PRO
- Activating a license
- Changing responsive settings
- Updating custom CSS
Clear the page cache after these changes.
Also clear any server or CDN cache when the website uses one.
CSS minification
CSS minification normally removes whitespace and comments without changing the visual result.
Problems can occur when a tool:
- Rewrites CSS incorrectly
- Changes the order of stylesheets
- Removes CSS variables
- Processes modern CSS syntax incorrectly
- Serves an old minified file
- Combines frontend and editor styles unexpectedly
When a block loses styling after CSS minification is enabled:
- Purge all generated CSS
- Temporarily disable CSS minification
- Reload the page in a private browser window
- Confirm whether the original styling returns
- Re-enable minification and create a targeted exclusion if necessary
CSS combination
Combining many stylesheets into one file can change their original loading order.
This may affect:
- Shared KineticHub animations
- Block-specific styles
- Theme overrides
- Global CSS variables
- Responsive rules
- Hover and focus states
Modern browsers do not normally require all stylesheets to be combined into one file.
When combination causes a conflict, keep CSS minification enabled but disable CSS combination.
Remove Unused CSS
Remove Unused CSS tools scan a page and attempt to keep only selectors they believe are required.
This can be risky for interactive blocks because some classes or states appear only:
- After JavaScript initializes
- During hover
- While dragging
- When a modal opens
- When a block enters the viewport
- At a mobile breakpoint
- During an animation
- After a user starts audio or video playback
A scanner may classify these selectors as unused even though they are required later.
Possible symptoms include:
- Missing animations
- Invisible modal layouts
- Incorrect slider handles
- Broken hover effects
- Missing active states
- Incorrect mobile presentation
- Elements appearing without transitions
When this occurs, exclude the affected KineticHub stylesheet or selector namespace from unused-CSS removal.
Regenerate the optimized CSS after creating the exclusion.
Asynchronous or delayed CSS
Loading CSS asynchronously may cause KineticHub blocks to appear briefly without their final styles.
This is sometimes called:
- Flash of unstyled content
- FOUC
- Late style application
- Layout shift
Keep the shared KineticHub animation stylesheet in the normal page head when possible.
If a critical-CSS tool is used, confirm that the generated critical CSS includes the visible KineticHub section above the fold.
JavaScript minification
JavaScript minification should be tested on pages containing interactive KineticHub blocks.
When a minifier changes or removes required code, symptoms may include:
- Animations not starting
- Modal buttons doing nothing
- Audio controls not responding
- Slider dragging not working
- Pointer effects remaining static
- Canvas backgrounds not appearing
- Browser console errors
Clear all generated JavaScript before retesting.
Do not assume that the block content itself is corrupted.
JavaScript combination
Combining JavaScript files may change dependency and execution order.
KineticHub’s shared configuration must remain available before the shared motion engine runs.
Block-specific scripts must also run after their required dependencies are available.
When combination causes a problem:
- Disable JavaScript combination
- Clear all caches
- Confirm that the page works
- Re-enable other optimizations separately
- Leave combination disabled unless it provides a confirmed benefit
Minification and combination are separate features. You can keep minification enabled while leaving combination disabled.
JavaScript defer
Defer normally allows scripts to download without blocking HTML parsing and then execute after the document has been parsed.
KineticHub scripts registered for footer loading may already load late in the page lifecycle.
Additional defer processing should still be tested because optimization plugins may:
- Change script order
- Move inline configuration
- Rewrite dependencies
- Apply defer inconsistently
- defer one script but not its related inline data
When a block initializes inconsistently, test with defer disabled.
Delay JavaScript until interaction
Some optimization tools postpone JavaScript until the visitor:
- Clicks
- Taps
- Scrolls
- Moves the pointer
This can affect KineticHub blocks that are expected to initialize when the page loads or when they enter the viewport.
Possible symptoms include:
- Animations begin only after a click
- Hero backgrounds remain blank
- Scroll effects start late
- Modal controls do not work immediately
- Audio controls initialize after interaction
- Before/After dragging is unavailable at first
- Pointer effects begin only after scrolling
Temporarily disable JavaScript delay to confirm the cause.
When delay is the cause, exclude the required KineticHub frontend script rather than disabling all page optimization.
Creating script exclusions
The exact exclusion field depends on the caching or optimization plugin.
Useful KineticHub identifiers include:
kinetichub-core-engine
/wp-content/plugins/kinetichub/build/core.js
Block-specific frontend files may appear under:
/wp-content/plugins/kinetichub/build/blocks/
For KineticHub PRO, the plugin folder name may be different depending on the generated premium package.
Use the actual file URL shown in the page source or browser developer tools.
Do not exclude every JavaScript file on the site when only one file is affected.
Creating CSS exclusions
Useful stylesheet identifiers include:
kinetichub-global-animations
/wp-content/plugins/kinetichub/assets/css/global-animations.css
Block-specific styles may appear under:
/wp-content/plugins/kinetichub/build/blocks/
The exact premium plugin directory may differ from the Free package.
Exclude only the affected stylesheet or KineticHub path when possible.
Exclusion identifiers versus file URLs
Some optimization plugins accept:
- WordPress handles
- Partial file names
- Complete file URLs
- Directory paths
- Selector patterns
A WordPress handle may not work in a field that expects a URL.
When an exclusion has no effect, inspect the field instructions and use the actual frontend file path instead.
Recommended troubleshooting order
When a KineticHub block stops working after optimization:
- Save the page
- Purge all caches
- Test in a private browser window
- Disable JavaScript delay
- Disable JavaScript combination
- Disable CSS combination
- Disable Remove Unused CSS
- Disable JavaScript minification
- Disable CSS minification
- Test after each change
Stop when the affected block works again.
The last disabled feature is the likely source of the conflict.
Then re-enable the other features and create a targeted exclusion.
Clear every relevant cache
Depending on the website, you may need to clear:
- WordPress page cache
- Generated CSS cache
- Generated JavaScript cache
- Object cache
- Server cache
- Hosting cache
- CDN cache
- Browser cache
Purging only the WordPress page cache may not remove generated CSS or JavaScript files.
Use a private browser window when checking whether the old asset is still being served.
Test while logged out
Administrators may receive a different version of the page than normal visitors.
Some caching plugins:
- Do not cache pages for logged-in users
- Apply guest optimization only to logged-out visitors
- Create separate mobile caches
- Generate different CSS for guests
- Delay scripts only for anonymous visitors
Always test the final page while logged out or in a private browser window.
Test desktop and mobile caches
Some systems generate separate caches for desktop and mobile devices.
After changing KineticHub responsive or mobile settings:
- Clear the desktop cache
- Clear the mobile cache
- Purge generated CSS and JavaScript
- Test on a real mobile device
- Test in a private desktop browser window
A mobile problem may continue even when the desktop cache has been cleared.
After a KineticHub update
After updating KineticHub Free or PRO:
- Purge the WordPress page cache
- Delete generated CSS and JavaScript
- Purge the server or hosting cache
- Purge the CDN cache
- Reload the editor
- Test important frontend pages
- Verify interactive controls
- Test mobile layouts
The plugin version is used when KineticHub registers shared assets, but external optimization tools may still retain older generated files.
Browser developer tools
Browser developer tools can help identify optimization conflicts.
Check the Console for JavaScript errors.
Check the Network panel to confirm that:
- KineticHub scripts return a successful response
- KineticHub stylesheets are loaded
- Files are not blocked
- Old cached versions are not being served
- The expected block-specific script is present
A missing or blocked file is different from a script that loads but produces an error.
Common symptoms
The block is styled but does not move
The block stylesheet is available, but its frontend JavaScript may be delayed, removed, or failing.
Disable JavaScript delay and check the browser console.
The block works but looks unstyled
The frontend script may be running while the shared or block-specific stylesheet is missing, delayed, or removed.
Disable CSS optimization temporarily and regenerate all CSS.
The block starts only after clicking
JavaScript delay until interaction is the most likely cause.
Exclude the affected KineticHub script from delayed execution.
The editor works but the frontend does not
Editor assets and frontend assets are registered separately.
A frontend caching or optimization rule may affect only the public page.
Test while logged out and inspect the frontend files.
The frontend works for administrators but not visitors
Guest optimization or cached pages may be active only for logged-out visitors.
Purge the guest cache and test in a private browser window.
The mobile version is still outdated
Clear any separate mobile cache and CDN cache.
Also regenerate responsive or unused CSS files.
Styling changes are not visible
The website may still be serving an old combined stylesheet.
Delete generated CSS, purge all caches, and reload the page without browser cache.
A modal or interactive state has no styling
An unused-CSS tool may have removed selectors that appear only after interaction.
Exclude the relevant KineticHub styles from unused-CSS processing.
Avoid changing many settings at once
Changing several performance settings simultaneously makes diagnosis difficult.
Use this process:
- Confirm that the page works without aggressive optimization
- Enable one feature
- Purge caches
- Test the complete interaction
- Keep or revert the change
- Continue with the next feature
Document any required exclusions for future site maintenance.
Information to collect for support
Before contacting KineticHub support, collect:
- KineticHub version
- Free or PRO status
- WordPress version
- PHP version
- Active theme
- Optimization plugin name
- Enabled optimization features
- Affected KineticHub block
- Affected page URL
- Browser console errors
- A screenshot or short recording
- Whether the block works when optimization is disabled
Do not send passwords, payment information, or complete license keys.
Next step
Continue with Theme and Nested-Block Compatibility to learn how parent containers, overflow, transforms, stacking contexts, and theme styles can affect KineticHub blocks.