jasperf · December 9, 2024 04:39
diff --git a/optimize-tiqets-widget-loading.php b/optimize-tiqets-widget-loading.php
 <?php
 /**
 * Optimize Tiqets widget loading by:
 * 1. Adding resource hints (preconnect/dns-prefetch) for faster initial connection
 * 2. Using Intersection Observer to detect when widgets come into viewport
 * 3. Loading the Tiqets loader script only once when first widget becomes visible
 * 4. Removing duplicate loader scripts from content
 * 
 * Benefits:
 * - Reduces initial page load by deferring widget loading
 * - Prevents multiple loader.js downloads
 * - Improves performance by loading resources just-in-time
 * - Maintains widget functionality while optimizing load time
 * 
 * Usage: Simply add Tiqets widgets to content without script tags:
 * <div data-tiqets-widget="availability" data-product-id="1030327" ...></div>
 */
 function optimize_tiqets_loading() {
    echo <<<HTML
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Remove individual loader scripts
        document.querySelectorAll('script[src*="widgets.tiqets.com/loader.js"]').forEach(script => {
            script.remove();
        });

        let isLoading = false;

        // Initialize Intersection Observer
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && !isLoading) {
                    isLoading = true;
                    
                    // Create preconnect link for cdn.tiqets.com
                    const preconnect = document.createElement('link');
                    preconnect.rel = 'preconnect';
                    preconnect.href = 'https://cdn.tiqets.com';
                    preconnect.crossOrigin = 'anonymous';
                    document.head.appendChild(preconnect);

                    // Load main Tiqets script
                    const script = document.createElement('script');
                    script.src = 'https://widgets.tiqets.com/loader.js';
                    script.defer = true;
                    document.body.appendChild(script);
                    
                    // Stop observing all widgets once we start loading
                    document.querySelectorAll('[data-tiqets-widget]').forEach(widget => {
                        observer.unobserve(widget);
                    });
                }
            });
        }, {
            rootMargin: '50px 0px', // Start loading slightly before widgets come into view
            threshold: 0.1
        });

        // Observe all Tiqets widgets
        document.querySelectorAll('[data-tiqets-widget]').forEach(widget => {
            observer.observe(widget);
        });
    });
    </script>
 HTML;
 }

 // Hook into wp_head with lower priority to ensure it loads after other critical resources
 add_action('wp_head', 'optimize_tiqets_loading', 99);

 // Filter the content to remove individual loader scripts
 function remove_tiqets_inline_scripts($content) {
    return preg_replace('/<script[^>]*widgets\.tiqets\.com\/loader\.js[^>]*><\/script>/', '', $content);
 }
 add_filter('the_content', 'remove_tiqets_inline_scripts', 10);
	<?php
	/**
	* Optimize Tiqets widget loading by:
	* 1. Adding resource hints (preconnect/dns-prefetch) for faster initial connection
	* 2. Using Intersection Observer to detect when widgets come into viewport
	* 3. Loading the Tiqets loader script only once when first widget becomes visible
	* 4. Removing duplicate loader scripts from content
	*
	* Benefits:
	* - Reduces initial page load by deferring widget loading
	* - Prevents multiple loader.js downloads
	* - Improves performance by loading resources just-in-time
	* - Maintains widget functionality while optimizing load time
	*
	* Usage: Simply add Tiqets widgets to content without script tags:
	* <div data-tiqets-widget="availability" data-product-id="1030327" ...></div>
	*/
	function optimize_tiqets_loading() {
	echo <<<HTML
	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// Remove individual loader scripts
	document.querySelectorAll('script[src*="widgets.tiqets.com/loader.js"]').forEach(script => {
	script.remove();
	});

	let isLoading = false;

	// Initialize Intersection Observer
	const observer = new IntersectionObserver((entries, observer) => {
	entries.forEach(entry => {
	if (entry.isIntersecting && !isLoading) {
	isLoading = true;

	// Create preconnect link for cdn.tiqets.com
	const preconnect = document.createElement('link');
	preconnect.rel = 'preconnect';
	preconnect.href = 'https://cdn.tiqets.com';
	preconnect.crossOrigin = 'anonymous';
	document.head.appendChild(preconnect);

	// Load main Tiqets script
	const script = document.createElement('script');
	script.src = 'https://widgets.tiqets.com/loader.js';
	script.defer = true;
	document.body.appendChild(script);

	// Stop observing all widgets once we start loading
	document.querySelectorAll('[data-tiqets-widget]').forEach(widget => {
	observer.unobserve(widget);
	});
	}
	});
	}, {
	rootMargin: '50px 0px', // Start loading slightly before widgets come into view
	threshold: 0.1
	});

	// Observe all Tiqets widgets
	document.querySelectorAll('[data-tiqets-widget]').forEach(widget => {
	observer.observe(widget);
	});
	});
	</script>
	HTML;
	}

	// Hook into wp_head with lower priority to ensure it loads after other critical resources
	add_action('wp_head', 'optimize_tiqets_loading', 99);

	// Filter the content to remove individual loader scripts
	function remove_tiqets_inline_scripts($content) {
	return preg_replace('/<script[^>]widgets\.tiqets\.com\/loader\.js[^>]><\/script>/', '', $content);
	}
	add_filter('the_content', 'remove_tiqets_inline_scripts', 10);