Analyzing Resource Load Times in a Cocos Creator Web Build

A slow-loading Cocos Creator Web Mobile build creates a poor user experience. Before optimizing it, we first need to understand where the loading time is being spent.

Inspect requests with DevTools

Open browser developer tools with F12 and select the Network tab. It lists every request made by the project, including resource size and duration.

The Network panel shows the overall timing, but it can still be difficult to understand the loading process in detail.

Run an analysis script in the console

The following script categorizes Cocos Creator resources by file size, waiting time, and download time:

(function() {
    const resources = performance.getEntriesByType('resource');
    const result = resources.map(res => {
        const sizeKB = res.encodedBodySize / 1024;
        const totalTime = res.duration.toFixed(2);
        const waitTime = (res.responseStart - res.startTime).toFixed(2);
        const downloadTime = (res.responseEnd - res.responseStart).toFixed(2);
        return {
            name: res.name.split('/').pop(),
            type: res.initiatorType,
            sizeKB: sizeKB.toFixed(2),
            totalTime: parseFloat(totalTime),
            waitTime: parseFloat(waitTime),
            downloadTime: parseFloat(downloadTime)
        };
    });

    result.sort((a, b) => b.totalTime - a.totalTime);
    console.table(result);

    const smallFiles = result.filter(r => r.sizeKB < 50 && r.totalTime > 100);
    if (smallFiles.length > 0) {
        console.log('⚠️ Slow small files (<50 KB, total time >100 ms):');
        console.table(smallFiles);
    } else {
        console.log('✅ Small-file timings look normal');
    }
})();

The final check reports files smaller than 50 KB that take more than 100 ms. Adjust those thresholds for your project.

To use it:

1. Open the deployed Web Mobile project, preferably through a real or local web server.
2. Open DevTools → Console.
3. Paste the script and press Enter.
4. Review the filename, type, size, total time, waiting time, download time, and anomaly list.

If DevTools warns you not to paste code you have not reviewed, read and verify the script first. Then type allow pasting, press Enter, and paste it again.

Field	Meaning
name	Resource filename
type	Resource initiator type
sizeKB	Resource size in KB
totalTime	Time from request start to completion in milliseconds
waitTime	Time before the server starts responding; affected by latency and server response time
downloadTime	Actual transfer time; affected by file size and bandwidth

Interpret the results

• If waitTime is much higher than downloadTime, network latency or server response time is probably the main issue.
• If downloadTime dominates, investigate bandwidth, file size, and server throughput.
• Sort by totalTime to identify critical first-screen bottlenecks.
• If large images load quickly while small images take a long time, possible causes include browser concurrency limits, request latency, missing cache entries, or CDN cache misses.