Tilda Troubleshooting: Common Issues and Fixes | OpsBlu Docs

Tilda Troubleshooting: Common Issues and Fixes

Troubleshoot common Tilda issues including performance problems, tracking failures, and publishing issues.

Common issues you may encounter with your Tilda website and how to diagnose and fix them.

Performance Issues

Tilda website performance directly impacts user experience, conversion rates, and SEO. Core Web Vitals are critical metrics that affect both user experience and search rankings.

Largest Contentful Paint (LCP)

LCP measures loading performance. Tilda-specific LCP issues include:

  • Large hero images in blocks
  • Custom fonts loading slowly
  • Multiple embedded widgets
  • Heavy HTML blocks with external scripts
  • Zero Block animations blocking render
  • Third-party tracking scripts (analytics, pixels)

Target: LCP under 2.5 seconds

Cumulative Layout Shift (CLS)

CLS measures visual stability. Tilda-specific CLS issues include:

  • Images without explicit dimensions
  • Web fonts causing text reflow
  • Dynamic content in HTML blocks
  • Popup windows appearing unexpectedly
  • Embedded iframes (forms, videos) without reserved space
  • Lazy-loaded images shifting content

Target: CLS under 0.1

General Performance Best Practices

Block Management:

  • Use Tilda's built-in blocks when possible (optimized)
  • Avoid excessive HTML blocks with custom code
  • Minimize use of heavy widgets
  • Remove unused blocks from pages

Image Optimization:

  • Upload optimized images (< 500KB for heroes)
  • Use Tilda's image optimization features
  • Avoid oversized images
  • Use proper formats (WebP when supported)

Code Optimization:

  • Minimize custom JavaScript
  • Use async/defer for external scripts
  • Combine multiple HTML blocks into one when possible
  • Remove duplicate tracking codes

Zero Block Usage:

  • Avoid complex animations on page load
  • Use CSS animations instead of JavaScript when possible
  • Optimize Zero Block element count
  • Test performance after adding Zero Blocks

For general performance concepts, see the global performance hub.

Tracking & Analytics Issues

Events Not Firing

Common causes of tracking failures on Tilda:

  • Site not republished after adding tracking code
  • JavaScript errors in custom code
  • Ad blockers preventing pixel loads
  • Testing in preview mode instead of published site
  • jQuery not ready when code executes
  • Tilda event listeners not properly attached

Common scenarios:

  • Form submissions not tracked (event listener issue)
  • GA4/Meta Pixel not loading (code placement)
  • Duplicate events (multiple implementations)
  • Events work in test but not production (republishing issue)

Tracking Best Practices

Code Placement:

  • Use Site Settings → Analytics for global code
  • Use HTML blocks for page-specific tracking
  • Add event listeners after jQuery ready
  • Test on published site, not preview

Event Implementation:

  • Use Tilda's built-in events (tildaform:aftersuccess)
  • Leverage jQuery (already loaded by Tilda)
  • Add console logging for debugging
  • Test each event type individually

Monitoring:

  • Use browser extensions (GA debugger, Pixel Helper)
  • Check browser console for errors
  • Verify in platform real-time reports
  • Monitor data quality regularly

For general tracking concepts, see the global troubleshooting hub.

Common Tilda-Specific Issues

Publishing Problems

Problem: Changes don't appear on live site.

Cause: Forgot to republish site after changes.

Fix:

  1. Click Publish button (top right)
  2. Select pages to republish
  3. Wait for publishing to complete
  4. Clear browser cache
  5. Test on published URL

Verification:

  • Check timestamp on published site
  • View source to verify code changes
  • Test in incognito mode

Preview Mode Limitations

Problem: Tracking or custom code doesn't work in preview.

Cause: Preview mode has limited JavaScript execution.

Fix: Always test on published site, not preview mode.

What works in preview:

  • Visual design
  • Block layout
  • Basic functionality

What may not work in preview:

  • Custom JavaScript
  • External tracking pixels
  • Third-party widgets
  • Some form validations

Custom Code Not Loading

Problem: JavaScript in HTML blocks or Site Settings doesn't execute.

Diagnosis:

  1. Open browser console (F12)
  2. Look for JavaScript errors
  3. Check if code is present in page source
  4. Verify site has been republished

Common causes:

  • Syntax errors in JavaScript
  • Missing closing tags
  • Code in wrong location (inside vs outside script tags)
  • jQuery not ready when code runs

Fix:

// Always wrap custom code in document ready
$(document).ready(function() {
  // Your code here
});

Form Submission Issues

Problem: Forms don't submit or tracking doesn't work.

Diagnosis:

  1. Check browser console for errors
  2. Test form submission
  3. Check email receipt
  4. Verify tracking code

Common causes:

  • Required fields not filled
  • Email service not configured (Settings → Forms)
  • Event listener not attached properly
  • JavaScript errors blocking submission

Fix for tracking:

$(document).ready(function() {
  $(document).on('tildaform:aftersuccess', function(e, data) {
    console.log('Form submitted:', data);
    // Add your tracking here
  });
});

Zero Block Not Loading

Problem: Zero Block content doesn't appear or appears broken.

Common causes:

  • Browser compatibility issues
  • JavaScript errors
  • Missing dependencies
  • Complex animations causing issues

Fix:

  1. Check browser console for errors
  2. Test in different browsers
  3. Simplify animations
  4. Check element z-index conflicts

Embedded Content Issues

Problem: iframes, videos, or widgets don't load.

Common causes:

Fix:

  • Ensure embed URLs use HTTPS
  • Verify embed code from source
  • Check if content allows embedding
  • Test with ad blocker disabled

Debugging Tools

Browser Developer Tools

Chrome DevTools (F12):

  • Console: Check for JavaScript errors
  • Network: Verify resource loading
  • Elements: Inspect HTML structure
  • Application: Check cookies, localStorage

Tilda-Specific Tools

Page Info:

  • View page record ID in editor URL
  • Check block IDs in page source
  • Verify jQuery version loaded

Testing Commands:

// Check if jQuery is loaded
console.log(typeof jQuery);
// Should return "function"

// Check Tilda version
console.log(window.tildaVersion);

// Test form event listener
$(document).trigger('tildaform:aftersuccess', [{
  formId: 'test',
  formname: 'Test Form'
}]);

Analytics Debugging Tools

Browser Extensions:

Platform Tools:

  • GA4 DebugView
  • Meta Events Manager Test Events
  • GTM Preview Mode

Performance Testing Tools

Tilda Support Resources

Official Tilda Help

Tilda Help Center:

Tilda Community:

Tilda Support:

When to Contact Support

Tilda Support is best for:

  • Publishing issues
  • Form delivery problems
  • Domain connection issues
  • Billing questions
  • Feature requests

Not for Tilda Support:

  • Custom code debugging
  • Third-party integrations
  • Analytics setup
  • Advanced JavaScript issues

When to Hire a Developer

Consider hiring a web developer when:

  • Complex custom functionality needed
  • Advanced tracking requirements
  • Multiple integrations needed
  • Performance optimization required
  • Zero Block customization beyond basics
  • API integrations

Where to find developers:

  • Tilda Experts
  • Freelance platforms (Upwork, Fiverr)
  • Web development agencies

Common Error Messages

"Please publish the website to see changes"

Cause: Changes saved but not published.

Fix: Click Publish button.

"jQuery is not defined"

Cause: Code runs before jQuery loads.

Fix:

$(document).ready(function() {
  // Your code here
});

"Uncaught TypeError: Cannot read property"

Cause: Trying to access element that doesn't exist.

Fix:

// Check if element exists first
if ($('.element').length > 0) {
  // Your code here
}

"Mixed Content" warning

Cause: Loading HTTP resources on HTTPS site.

Fix: Change all resource URLs to HTTPS.

"gtag is not defined" or "fbq is not defined"

Cause: Analytics script not loaded.

Fix:

  • Verify code in Site Settings → Analytics
  • Check site has been republished
  • Verify script loads in Network tab
  • Disable ad blockers for testing

Debugging Workflow

Step-by-Step Troubleshooting

  1. Identify the Issue

    • What's not working?
    • When did it start?
    • What changed recently?

  2. Check Basic Setup

    • Site published recently
    • Browser cache cleared
    • Testing on published site (not preview)
    • No JavaScript errors in console

  3. Isolate the Problem

    • Disable other custom code temporarily
    • Test in different browser
    • Test in incognito mode
    • Check on different device

  4. Review Code

    • Check syntax errors
    • Verify selectors match page elements
    • Ensure jQuery ready wrapper
    • Add console logs for debugging

  5. Test Fix

    • Make one change at a time
    • Republish site
    • Clear cache
    • Verify fix works
    • Test on multiple pages

  6. Document Solution

    • Note what was wrong
    • Record how you fixed it
    • Save working code snippets
    • Update documentation

Prevention Best Practices

Before Making Changes

  • Document current working state
  • Test on duplicate page first
  • Keep backup of working code
  • Plan changes before implementing

During Development

  • Test incrementally
  • Use console logs for debugging
  • Comment your code
  • Validate code syntax

After Changes

  • Always republish site
  • Test on published URL
  • Check browser console
  • Verify tracking still works
  • Test forms and interactions

Regular Maintenance

  • Review performance monthly
  • Check analytics data quality
  • Test forms regularly
  • Update external libraries/widgets
  • Remove unused code/blocks

Next Steps

Performance Issues:

Tracking Issues:

Prevention:

  • Document your setup
  • Test before deploying
  • Monitor regularly
  • Keep backups of working code
शीर्ष पर वापस जाएँ