🥳Scrapeless Communityに参加して、強力なWebスクレイピングツールキットにアクセスするために無料トライアルを取得してください!
ブログに戻ります

ヘッドレスブラウザトラフィックの最適化:効率的なデータスクレイピングのためのPuppeteerによるコスト削減戦略

Alex Johnson
Alex Johnson

Senior Web Scraping Engineer

26-Apr-2025

概要

Puppeteerを使用してデータスクレイピングを行う際、トラフィック消費は重要な考慮事項です。特にプロキシサービスを使用する場合、トラフィックコストが大幅に増加する可能性があります。トラフィックの使用を最適化するために、次の戦略を採用できます:

  1. リソースのインターセプト: 不要なリソースリクエストをインターセプトすることでトラフィック消費を削減します。
  2. リクエストURLのインターセプト: URLの特性に基づいて特定のリクエストをインターセプトすることで、さらにトラフィックを削減します。
  3. モバイルデバイスのシミュレーション: モバイルデバイスの設定を使用して、軽量のページバージョンを取得します。
  4. 包括的最適化: 上記の方法を組み合わせて最良の結果を得ます。

最適化方案1: リソースのインターセプト

リソースのインターセプトの紹介

Puppeteerでは、page.setRequestInterception(true)を使用することで、ブラウザによって開始されたすべてのネットワークリクエストをキャプチャし、続行request.continue())、中止request.abort())、または応答のカスタマイズrequest.respond())を決定できます。

この方法は、帯域幅の消費を大幅に削減でき、特にクロールスクリーンショット、およびパフォーマンス最適化のシナリオに適しています。

インターセプト可能なリソースの種類と提案

リソースタイプ 説明 インターセプト後の影響 推奨
image 画像リソース JPG/PNG/GIF/WebP画像 画像は表示されません ⭐ 安全
font フォントファイル TTF/WOFF/WOFF2フォント システムのデフォルトフォントが使用されます ⭐ 安全
media メディアファイル 動画/音声ファイル メディアコンテンツは再生できません ⭐ 安全
manifest Webアプリマニフェスト PWA構成ファイル PWA機能に影響が出る場合があります ⭐ 安全
prefetch プリフェッチリソース <link rel="prefetch"> ページへの影響は最小限 ⭐ 安全
stylesheet CSSスタイルシート 外部CSSファイル ページスタイルが失われ、レイアウトに影響が出る可能性があります ⚠️ 注意
websocket WebSocket リアルタイム通信接続 リアルタイム機能が無効になります ⚠️ 注意
eventsource サーバー送信イベント サーバープッシュデータ プッシュ機能が無効になります ⚠️ 注意
preflight CORSプレフライトリクエスト OPTIONSリクエスト クロスオリジンリクエストが失敗します ⚠️ 注意
script JavaScriptスクリプト 外部JSファイル 動的機能が無効になるため、SPAがレンダリングされない可能性があります ❌ 避ける
xhr XHRリクエスト AJAXデータリクエスト 動的データを取得できません ❌ 避ける
fetch Fetchリクエスト モダンAJAXリクエスト 動的データを取得できません ❌ 避ける
document メインドキュメント HTMLページそのもの ページが読み込まれません ❌ 避ける

推奨レベルの説明:

  • 安全: インターセプトはデータスクレイピングやファーストスクリーンのレンダリングにほとんど影響を与えません。デフォルトでブロックすることをお勧めします。
  • ⚠️ 注意: スタイル、リアルタイム機能、またはクロスオリジンリクエストが壊れる可能性があります。ビジネス上の判断が必要です。
  • 避ける: SPAや動的サイトが正常にレンダリングできない、またはデータを取得できない高い確率があります。これらのリソースが絶対に必要ない場合を除き、お勧めしません。

リソースのインターセプト例コード

javascript Copy
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));

最適化スキーム 2: リクエストURLのインターセプト

リソースタイプによるインターセプトに加えて、URLの特徴に基づいてより詳細なインターセプト制御を実施することができます。これは特に広告、分析スクリプト、その他の不要なサードパーティリクエストをブロックするのに効果的です。

URLインターセプト戦略

  1. ドメインによるインターセプト: 特定のドメインからのすべてのリクエストをブロックする
  2. パスによるインターセプト: 特定のパスからのリクエストをブロックする
  3. ファイルタイプによるインターセプト: 特定の拡張子のファイルをブロックする
  4. キーワードによるインターセプト: URLに特定のキーワードを含むリクエストをブロックする

一般的なインターセプト可能なURLパターン

URLパターン 説明 推奨
広告サービス 広告ネットワークのドメイン ad.doubleclick.net, googleadservices.com ⭐ 安全
分析サービス 統計および分析スクリプト google-analytics.com, hotjar.com ⭐ 安全
ソーシャルメディアプラグイン ソーシャル共有ボタンなど platform.twitter.com, connect.facebook.net ⭐ 安全
トラッキングピクセル ユーザー行動を追跡するピクセル pixel, beacon, trackerを含むURL ⭐ 安全
大容量メディアファイル 大きな動画、音声ファイル .mp4, .webm, .mp3のような拡張子 ⭐ 安全
フォントサービス オンラインフォントサービス fonts.googleapis.com, use.typekit.net ⭐ 安全
CDNリソース 静的リソースCDN cdn.jsdelivr.net, unpkg.com ⚠️ 注意

URLインターセプト例コード

javascript Copy
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));

最適化スキーム 3: モバイルデバイスのシミュレーション

モバイルデバイスのシミュレーションは、トラフィック最適化の別の効果的な戦略で、モバイルウェブサイトは通常、軽量のページコンテンツを提供します。

モバイルデバイスシミュレーションの利点

  1. 軽量なページバージョン: 多くのウェブサイトはモバイルデバイス向けにコンパクトなコンテンツを提供
  2. 小さな画像リソース: モバイル版は通常、小さな画像を読み込む
  3. 簡素化されたCSSおよびJavaScript: モバイル版は通常、簡素化されたスタイルおよびスクリプトを使用
  4. 広告や非コアコンテンツの削減: モバイル版はしばしば一部の非コア機能を削除
  5. 適応応答: 小さな画面に最適化されたコンテンツレイアウトを取得

モバイルデバイスシミュレーションの設定

一般的に使用されるモバイルデバイスの構成パラメータは以下の通りです:

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

または、puppeteerの組み込みメソッドを使用してモバイルデバイスをシミュレートすることもできます。

javascript Copy
import { KnownDevices } from 'puppeteer-core';
const iPhone = KnownDevices['iPhone 15 Pro'];
javascript Copy
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulate(iPhone);
javascript Copy
const scrapelessUrl = 'wss://browser.scrapeless.com/browser?token=your_api_key&session_ttl=180&proxy_country=ANY';

async function optimizedScraping(url) {
  console.log(`最適化されたスクレイピングを開始します: ${url}`);

  // トラフィック使用量を記録
  let totalBytesUsed = 0;

  const browser = await puppeteer.connect({
    browserWSEndpoint: scrapelessUrl,
    defaultViewport: null
  });

  const page = await browser.newPage();

  // リクエストのインターセプションを設定
  await page.setRequestInterception(true);

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

  // ネットワークトラフィックを監視
  page.on('response', async (response) => {
    const headers = response.headers();
    const contentLength = headers['content-length'] ? parseInt(headers['content-length'], 10) : 0;
    totalBytesUsed += contentLength;
  });

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

  // 遅延読み込みコンテンツをトリガーするためにスクロールをシミュレート
  await page.evaluate(() => {
    window.scrollBy(0, window.innerHeight);
  });

  await new Promise(resolve => setTimeout(resolve, 1000))

  // データを抽出
  const data = await page.evaluate(() => {
    return {
      title: document.title,
      content: document.body.innerText.substring(0, 1000),
      links: Array.from(document.querySelectorAll('a')).slice(0, 10).map(a => ({
        text: a.innerText,
        href: a.href
      }))
    };
  });

  // トラフィック使用状況統計を出力
  console.log(`\nトラフィック使用状況統計:`);
  console.log(`使用量: ${(totalBytesUsed / 1024 / 1024).toFixed(2)} MB`);

  await browser.close();
  return data;
}

// 使用例
optimizedScraping('https://www.scrapeless.com')
  .then(data => console.log('スクレイピング完了:', data))
  .catch(error => console.error('スクレイピング失敗:', error));

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

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

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

Scrapelessでは、適用される法律、規制、およびWebサイトのプライバシーポリシーを厳密に遵守しながら、公開されているデータのみにアクセスします。 このブログのコンテンツは、デモンストレーションのみを目的としており、違法または侵害の活動は含まれません。 このブログまたはサードパーティのリンクからの情報の使用に対するすべての責任を保証せず、放棄します。 スクレイピング活動に従事する前に、法律顧問に相談し、ターゲットウェブサイトの利用規約を確認するか、必要な許可を取得してください。

最も人気のある記事

カタログ