ブラウザのトラフィック使用量を最適化する方法は？

import puppeteer from 'puppeteer-core';

const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';

async function scrapeWithResourceBlocking(url) {
    const browser = await puppeteer.connect({
        browserWSEndpoint: scrapelessUrl,
        defaultViewport: null
    });
    const page = await browser.newPage();

    // リクエストインターセプションを有効にする
    await page.setRequestInterception(true);

    // ブロックするリソースタイプを定義
    const BLOCKED_TYPES = new Set([
        'image',
        'font',
        'media',
        'stylesheet',
    ]);

    // リクエストをインターセプト
    page.on('request', (request) => {
        if (BLOCKED_TYPES.has(request.resourceType())) {
            request.abort();
            console.log(`ブロックしました: ${request.resourceType()} - ${request.url().substring(0, 50)}...`);
        } else {
            request.continue();
        }
    });

    await page.goto(url, {waitUntil: 'domcontentloaded'});

    // データを抽出
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000)
        };
    });

    await browser.close();
    return data;
}

// 使用方法
scrapeWithResourceBlocking('https://www.scrapeless.com');

.then(data => console.log('スクレイピング結果:', data))
    .catch(error => console.error('スクレイピングに失敗しました:', error));

import puppeteer from 'puppeteer-core';

const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';

async function scrapeWithUrlBlocking(url) {
    const browser = await puppeteer.connect({
        browserWSEndpoint: scrapelessUrl,
        defaultViewport: null
    });
    const page = await browser.newPage();

    // リクエストのインターセプトを有効化
    await page.setRequestInterception(true);

    // ブロックするドメインとURLパターンを定義
    const BLOCKED_DOMAINS = [
        'google-analytics.com',
        'googletagmanager.com',
        'doubleclick.net',
        'facebook.net',
        'twitter.com',
        'linkedin.com',
        'adservice.google.com',
    ];

    const BLOCKED_PATHS = [
        '/ads/',
        '/analytics/',
        '/pixel/',
        '/tracking/',
        '/stats/',
    ];

    // リクエストをインターセプト
    page.on('request', (request) => {
        const url = request.url();

        // ドメインをチェック
        if (BLOCKED_DOMAINS.some(domain => url.includes(domain))) {
            request.abort();
            console.log(`ブロックしたドメイン: ${url.substring(0, 50)}...`);
            return;
        }

        // パスをチェック
        if (BLOCKED_PATHS.some(path => url.includes(path))) {
            request.abort();
            console.log(`ブロックしたパス: ${url.substring(0, 50)}...`);
            return;
        }

        // 他のリクエストを許可
        request.continue();
    });

    await page.goto(url, {waitUntil: 'domcontentloaded'});

    // データを抽出
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000)
        };
    });

    await browser.close();
    return data;
}

// 使用方法
scrapeWithUrlBlocking('https://www.scrapeless.com')
    .then(data => console.log('スクレイピング結果:', data))
    .catch(error => console.error('スクレイピングに失敗しました:', error));

const iPhoneX = {
    viewport: {
        width: 375,
        height: 812,
        deviceScaleFactor: 3,
        isMobile: true,
        hasTouch: true,
        isLandscape: false
    }
};

import { KnownDevices } from 'puppeteer-core';
const iPhone = KnownDevices['iPhone 15 Pro'];

最適化されていないコードを実行した後、印刷された情報からトラフィックの違いを非常に直感的に見ることができます：

| シナリオ      | 使用されたトラフィック (MB) |     削減率     |
|---------|:---------------:|:------------:|
| 最適化されていない     |      6.03       |      —       |
| **最適化された** |    **0.81**     | **≈ 86.6 %** |

上記の最適化手法を組み合わせることで、プロキシトラフィックの消費を大幅に削減し、スクレイピングの効率を向上させ、必要なコアコンテンツを確実に取得できるようになります。