@needle-tools/engine/src/engine/analytics/lcp.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

// https://web.dev/articles/lcp
export namespace LCP {
    export function observe() {
        const observer = new PerformanceObserver((list) => {
            const perfEntries = list.getEntries();
            const lastEntry = perfEntries[perfEntries.length - 1] as PerformanceEntry & { url?: string };
            // Process the latest candidate for largest contentful paint
            console.log('LCP candidate:', lastEntry);

            const el = createElementFromUrl(lastEntry.url);
            if (el) document.body.appendChild(el);
        });
        observer.observe({ entryTypes: ['largest-contentful-paint'] });
    }


    function createElementFromUrl(str: string | null | undefined) {
        if (!str) return null;

        if (!str.startsWith('data:image/')) {
            return null;
        }
        else if (!str.includes("base64")) {
            return null;
        }
        const img = document.createElement('img');
        img.src = str;
        img.onerror = err => {
            console.error(err);
            img.remove();
        };
        return img;
    }
}