# configurations
.idea

# crawlee and apify storage folders
apify_storage
crawlee_storage
storage

# installed files
node_modules

# git folder
.git


.dockerignore

root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf


.editorconfig

{
    "extends": "@apify",
    "root": true
}


.eslintrc

# This file tells Git which files shouldn't be added to source control

.DS_Store
.idea
node_modules
storage


.gitignore

# Specify the base Docker image. You can read more about
# the available images at https://crawlee.dev/docs/guides/docker-images
# You can also use any other image from Docker Hub.
FROM apify/actor-node-puppeteer-chrome:16

# Copy just package.json and package-lock.json
# to speed up the build using Docker layer cache.
COPY --chown=myuser package*.json ./

# Install NPM packages, skip optional and development dependencies to
# keep the image small. Avoid logging too much and print the dependency
# tree for debugging
RUN npm --quiet set progress=false \
 &amp;&amp; npm install --omit=dev --omit=optional \
 &amp;&amp; echo "Installed NPM packages:" \
 &amp;&amp; (npm list --omit=dev --all || true) \
 &amp;&amp; echo "Node.js version:" \
 &amp;&amp; node --version \
 &amp;&amp; echo "NPM version:" \
 &amp;&amp; npm --version \
 &amp;&amp; rm -r ~/.npm

# Next, copy the remaining files and directories with the source code.
# Since we do this after NPM install, quick build will be really fast
# for most source file changes.
COPY --chown=myuser . ./


# Run the image. If you know you won't need headful browsers,
# you can remove the XVFB start script for a micro perf gain.
CMD ./start_xvfb_and_run_cmd.sh &amp;&amp; npm start --silent

Dockerfile

main.js

{
 "name": "measure-downloaded-bytes-actor",
 "version": "0.0.2",
 "description": "",
 "author": "Jaroslav Hejlek",
 "license": "ISC",
 "type": "module",
 "engines": {
 "node": ">=16.0.0"
 },
 "dependencies": {
 "apify": "^3.1.0",
 "crawlee": "^3.1.1",
 "pretty-bytes": "^6.0.0",
 "puppeteer": "^19.2.2"
 },
 "devDependencies": {
 "@apify/eslint-config": "^0.3.1",
 "eslint": "^8.20.0"
 },
 "scripts": {
 "start": "node main.js",
 "lint": "./node_modules/.bin/eslint ./src --ext .js,.jsx",
 "lint:fix": "./node_modules/.bin/eslint ./src --ext .js,.jsx --fix",
 "test": "echo \"Error: oops, the actor has no tests yet, sad!\" &amp;&amp; exit 1"
 }
}

package.json

# Specify the base Docker image. You can read more about
# the available images at https://crawlee.dev/docs/guides/docker-images
# You can also use any other image from Docker Hub.
FROM apify/actor-node-puppeteer-chrome:16

# Copy just package.json and package-lock.json
# to speed up the build using Docker layer cache.
COPY --chown=myuser package*.json ./

# Install NPM packages, skip optional and development dependencies to
# keep the image small. Avoid logging too much and print the dependency
# tree for debugging
RUN npm --quiet set progress=false \
    && npm install --omit=dev --omit=optional \
    && echo "Installed NPM packages:" \
    && (npm list --omit=dev --all || true) \
    && echo "Node.js version:" \
    && node --version \
    && echo "NPM version:" \
    && npm --version \
    && rm -r ~/.npm

# Next, copy the remaining files and directories with the source code.
# Since we do this after NPM install, quick build will be really fast
# for most source file changes.
COPY --chown=myuser . ./


# Run the image. If you know you won't need headful browsers,
# you can remove the XVFB start script for a micro perf gain.
CMD ./start_xvfb_and_run_cmd.sh && npm start --silent


import { launchPuppeteer } from '@crawlee/puppeteer';
import { Actor } from 'apify';
import prettyBytes from 'pretty-bytes';

async function saveScreen(page, key = 'debug-screen.png') {
    const screenshotBuffer = await page.screenshot({ fullPage: true });
    await Actor.setValue(key, screenshotBuffer, { contentType: 'image/png' });
};

async function main() {
    try {
        const input = await Actor.getInput();
        const browser = await launchPuppeteer();
        const page = await browser.newPage();
        if (input.abortRequests) {
            await page.setRequestInterception(true);
            page.on('request', (request) => {
                const url = request.url();
                const filters = [
                    'livefyre',
                    'moatad',
                    'analytics',
                    'controltag',
                    'chartbeat',
                ];
                const shouldAbort = filters.some((urlPart) => url.includes(urlPart));
                if (shouldAbort) request.abort();
                else request.continue();
            });
        }
        const responses = [];
        page.on('response', async(response) => {
            const url = response.url();
            let size = 0;
            try {
                const buffer = await response.buffer();
                size = buffer.byteLength;
            } catch (e) {
                // Ignore error here, response can be empty
            }
            responses.push({
                url: url,
                type: response.request().resourceType(),
                size,
            });
        });
        const startedAt = Date.now();
        console.log('Opening page', input.url);
        await page.goto(input.url, { timeout: 5 * 60 * 1000, waitUntil: 'networkidle2' });
        await saveScreen(page);

        let totalSize = 0;
        const byResourceType = {};
        responses.forEach(({ type, size }) => {
            if (!byResourceType[type]) byResourceType[type] = { count: 0, size: 0 };
            byResourceType[type].count++;
            byResourceType[type].size += size;
            totalSize += size;
        });

        console.log('Page finished loading after', Date.now() - startedAt, 'ms');
        console.log(`Responses: ${responses.length} (${prettyBytes(totalSize)})`);
        console.log('----------------');
        console.log('By resource type');
        Object.keys(byResourceType).forEach(type => {
            const data = byResourceType[type];
            console.log(`${type}: ${data.count} (${prettyBytes(data.size)})`);
        });

        await page.close();
        await browser.close();
    } catch (error) {
        console.error(error.message);
    }
}

await Actor.init();

await main();

// Exit successfully
await Actor.exit();

measure-downloaded-bytes-actor

Example of how to measure downloaded data from network requests made by a webpage.

Measure Downloaded Bytes

Industries

Where next?