Como Otimizar o Uso de Tráfego do Seu Navegador ao Máximo?

Alex Johnson

Senior Web Scraping Engineer

26-Apr-2025

Visão Geral

Ao usar o Puppeteer para extração de dados, o consumo de tráfego é uma consideração importante. Especialmente ao utilizar serviços de proxy, os custos de tráfego podem aumentar significativamente. Para otimizar o uso de tráfego, podemos adotar as seguintes estratégias:

Intercepção de recursos: Reduzir o consumo de tráfego interceptando solicitações de recursos desnecessárias.
Intercepção de URL de solicitação: Reduzir ainda mais o tráfego interceptando solicitações específicas com base nas características da URL.
Simular dispositivos móveis: Usar configurações de dispositivos móveis para obter versões de páginas mais leves.
Otimização abrangente: Combinar os métodos acima para alcançar os melhores resultados.

Esquema de Otimização 1: Intercepção de Recursos

Introdução à Intercepção de Recursos

No Puppeteer, page.setRequestInterception(true) pode capturar cada solicitação de rede iniciada pelo navegador e decidir se deve continuar (request.continue()), terminar (request.abort()) ou personalizar a resposta (request.respond()).

Este método pode reduzir significativamente o consumo de largura de banda, especialmente adequado para cenários de extração, captura de tela e otimização de desempenho.

Tipos de Recursos Interceptáveis e Sugestões

Tipo de Recurso	Descrição	Exemplo	Impacto Após Intercepção	Recomendação
`imagem`	Recursos de imagem	Imagens JPG/PNG/GIF/WebP	Imagens não serão exibidas	⭐ Seguro
`fonte`	Arquivos de fonte	Fontes TTF/WOFF/WOFF2	Fontes padrão do sistema serão usadas no lugar	⭐ Seguro
`mídia`	Arquivos de mídia	Arquivos de vídeo/áudio	O conteúdo de mídia não pode ser reproduzido	⭐ Seguro
`manifesto`	Manifesto da Web App	Arquivo de configuração PWA	A funcionalidade PWA pode ser afetada	⭐ Seguro
`prefetch`	Recursos de pré-carregamento	`<link rel="prefetch">`	Impacto mínimo na página	⭐ Seguro
`folha de estilo`	Folha de estilo CSS	Arquivos CSS externos	Estilos da página são perdidos, pode afetar o layout	⚠️ Cuidado
`websocket`	WebSocket	Conexão de comunicação em tempo real	Funcionalidade em tempo real desativada	⚠️ Cuidado
`eventsource`	Eventos enviados pelo servidor	Dados de push do servidor	Funcionalidade de push desativada	⚠️ Cuidado
`preflight`	Solicitação de pré-verificação CORS	Solicitação OPTIONS	Solicitações entre origens falham	⚠️ Cuidado
`script`	Scripts JavaScript	Arquivos JS externos	Funcionalidade dinâmica desativada, SPA pode não ser renderizada	❌ Evitar
`xhr`	Solicitações XHR	Solicitações de dados AJAX	Incapacidade de obter dados dinâmicos	❌ Evitar
`fetch`	Solicitações Fetch	Solicitações AJAX modernas	Incapacidade de obter dados dinâmicos	❌ Evitar
`documento`	Documento principal	Página HTML em si	A página não pode ser carregada	❌ Evitar

Explicação do Nível de Recomendação:

⭐ Seguro: A intercepção quase não impacta a extração de dados ou a renderização da primeira tela; é recomendável bloquear por padrão.
⚠️ Cuidado: Pode quebrar estilos, funções em tempo real ou solicitações entre origens; requer julgamento de negócios.
❌ Evitar: Alta probabilidade de causar falha na renderização ou obtenção de dados normalmente em sites SPA/dinâmicos, a menos que você tenha certeza absoluta de que não precisa desses recursos.

Exemplo de Código de Intercepção de Recursos

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();

    // Habilita a intercepção de solicitações
    await page.setRequestInterception(true);

    // Define tipos de recursos a serem bloqueados
    const BLOCKED_TYPES = new Set([
        'imagem',
        'fonte',
        'mídia',
        'folha de estilo',
    ]);

    // Intercepta solicitações
    page.on('request', (request) => {
        if (BLOCKED_TYPES.has(request.resourceType())) {
            request.abort();
            console.log(`Bloqueado: ${request.resourceType()} - ${request.url().substring(0, 50)}...`);
        } else {
            request.continue();
        }
    });

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

    // Extrai dados
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000)
        };
    });

    await browser.close();
    return data;
}

// Uso
scrapeWithResourceBlocking('https://www.scrapeless.com')

javascript Copy

.then(data => console.log('Resultado da raspagem:', data))
    .catch(error => console.error('Raspagem falhou:', error));

Esquema de Otimização 2: Interceptação de URL de Requisição

Além de interceptar por tipo de recurso, um controle de interceptação mais granular pode ser realizado com base nas características da URL. Isso é particularmente eficaz para bloquear anúncios, scripts de análises e outras requisições de terceiros desnecessárias.

Estratégias de Interceptação de URL

Interceptar por domínio: Bloquear todas as requisições de um domínio específico
Interceptar por caminho: Bloquear requisições de um caminho específico
Interceptar por tipo de arquivo: Bloquear arquivos com extensões específicas
Interceptar por palavra-chave: Bloquear requisições cujas URLs contêm palavras-chave específicas

Padrões Comuns de URL Interceptáveis

Padrão de URL	Descrição	Exemplo	Recomendação
Serviços de publicidade	Domínios de redes de anúncios	`ad.doubleclick.net`, `googleadservices.com`	⭐ Seguro
Serviços de análises	Scripts de estatísticas e análises	`google-analytics.com`, `hotjar.com`	⭐ Seguro
Plugins de mídia social	Botões de compartilhamento social, etc.	`platform.twitter.com`, `connect.facebook.net`	⭐ Seguro
Pixels de rastreamento	Pixels que rastreiam o comportamento do usuário	URLs contendo `pixel`, `beacon`, `tracker`	⭐ Seguro
Arquivos de mídia grandes	Arquivos grandes de vídeo, áudio	Extensões como `.mp4`, `.webm`, `.mp3`	⭐ Seguro
Serviços de fonte	Serviços de fontes online	`fonts.googleapis.com`, `use.typekit.net`	⭐ Seguro
Recursos CDN	CDN de recursos estáticos	`cdn.jsdelivr.net`, `unpkg.com`	⚠️ Cuidado

Código de Exemplo de Interceptação de 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();

    // Habilitar interceptação de requisições
    await page.setRequestInterception(true);

    // Definir domínios e padrões de URL a serem bloqueados
    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/',
    ];

    // Interceptar requisições
    page.on('request', (request) => {
        const url = request.url();

        // Verificar domínio
        if (BLOCKED_DOMAINS.some(domain => url.includes(domain))) {
            request.abort();
            console.log(`Domínio bloqueado: ${url.substring(0, 50)}...`);
            return;
        }

        // Verificar caminho
        if (BLOCKED_PATHS.some(path => url.includes(path))) {
            request.abort();
            console.log(`Caminho bloqueado: ${url.substring(0, 50)}...`);
            return;
        }

        // Permitir outras requisições
        request.continue();
    });

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

    // Extrair dados
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000)
        };
    });

    await browser.close();
    return data;
}

// Uso
scrapeWithUrlBlocking('https://www.scrapeless.com')
    .then(data => console.log('Resultado da raspagem:', data))
    .catch(error => console.error('Raspagem falhou:', error));

Esquema de Otimização 3: Simular Dispositivos Móveis

Simular dispositivos móveis é outra estratégia eficaz de otimização de tráfego, pois websites para dispositivos móveis geralmente fornecem conteúdo de página mais leve.

Vantagens da Simulação de Dispositivos Móveis

Versões de página mais leves: Muitos websites fornecem conteúdo mais conciso para dispositivos móveis
Recursos de imagem menores: Versões móveis geralmente carregam imagens menores
CSS e JavaScript simplificados: Versões móveis geralmente usam estilos e scripts simplificados
Redução de anúncios e conteúdo não fundamental: Versões móveis frequentemente removem algumas funcionalidades não essenciais
Resposta adaptativa: Obter layouts de conteúdo otimizados para telas pequenas

Configuração de Simulação de Dispositivos Móveis

Aqui estão os parâmetros de configuração para vários dispositivos móveis comumente usados:

javascript Copy

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

Ou use diretamente os métodos embutidos do puppeteer para simular dispositivos móveis

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

Exemplo de Código de Simulação de Dispositivo Móvel

javascript Copy

import puppeteer, {KnownDevices} from 'puppeteer-core';

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

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

    const page = await browser.newPage();

    // Configurar simulação de dispositivo móvel
    const iPhone = KnownDevices['iPhone 15 Pro'];
    await page.emulate(iPhone);

    await page.goto(url, {waitUntil: 'domcontentloaded'});
    // Extrair dados
    const data = await page.evaluate(() => {
        return {
            title: document.title,
            content: document.body.innerText.substring(0, 1000)
        };
    });

    await browser.close();
    return data;
}

// Uso
scrapeWithMobileEmulation('https://www.scrapeless.com')
    .then(data => console.log('Resultado da raspagem:', data))
    .catch(error => console.error('Raspagem falhou:', error));

Exemplo Completo de Otimização

Aqui está um exemplo abrangente combinando todos os esquemas de otimização:

javascript Copy

import puppeteer, {KnownDevices} from 'puppeteer-core';

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

async function optimizedScraping(url) {
    console.log(`Iniciando raspagem otimizada: ${url}`);

    // Registrar uso de tráfego
    let totalBytesUsed = 0;

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

    const page = await browser.newPage();

    // Configurar simulação de dispositivo móvel
    const iPhone = KnownDevices['iPhone 15 Pro'];
    await page.emulate(iPhone);

    // Configurar interceptação de requisições
    await page.setRequestInterception(true);

    // Definir tipos de recursos a serem bloqueados
    const BLOCKED_TYPES = [
        'image',
        'media',
        'font'
    ];

    // Definir domínios a serem bloqueados
    const BLOCKED_DOMAINS = [
        'google-analytics.com',
        'googletagmanager.com',
        'facebook.net',
        'doubleclick.net',
        'adservice.google.com'
    ];

    // Definir caminhos de URL a serem bloqueados
    const BLOCKED_PATHS = [
        '/ads/',
        '/analytics/',
        '/tracking/'
    ];

    // Interceptar requisições
    page.on('request', (request) => {
        const url = request.url();
        const resourceType = request.resourceType();

        // Verificar tipo de recurso
        if (BLOCKED_TYPES.includes(resourceType)) {
            console.log(`Tipo de recurso bloqueado: ${resourceType} - ${url.substring(0, 50)}...`);
            request.abort();
            return;
        }

        // Verificar domínio
        if (BLOCKED_DOMAINS.some(domain => url.includes(domain))) {
            console.log(`Domínio bloqueado: ${url.substring(0, 50)}...`);
            request.abort();
            return;
        }

        // Verificar caminho
        if (BLOCKED_PATHS.some(path => url.includes(path))) {
            console.log(`Caminho bloqueado: ${url.substring(0, 50)}...`);
            request.abort();
            return;
        }

        // Permitir outras requisições
        request.continue();
    });

    // Monitorar tráfego de rede
    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'});

    // Simular rolagem para ativar conteúdo de carregamento preguiçoso
    await page.evaluate(() => {
        window.scrollBy(0, window.innerHeight);
    });

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

    // Extrair dados
    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
            }))
        };
    });

    // Exibir estatísticas de uso de tráfego
    console.log(`\nEstatísticas de Uso de Tráfego:`);
    console.log(`Usado: ${(totalBytesUsed / 1024 / 1024).toFixed(2)} MB`);

    await browser.close();
    return data;
}

// Uso
optimizedScraping('https://www.scrapeless.com')
    .then(data => console.log('Raspagem completa:', data))
    .catch(error => console.error('Raspagem falhou:', error));

Comparação de Otimização

Tentamos remover o código otimizado do exemplo abrangente para comparar o tráfego antes e depois da otimização. Aqui está o exemplo de código não otimizado:

javascript Copy

import puppeteer from 'puppeteer-core';

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(`Iniciando scraping otimizado: ${url}`);

  // Registrar uso de tráfego
  let totalBytesUsed = 0;

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

  const page = await browser.newPage();

  // Definir interceptação de requisições
  await page.setRequestInterception(true);

  // Interceptar requisições
  page.on('request', (request) => {
    request.continue();
  });

  // Monitorar tráfego da rede
  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'});

  // Simular rolagem para acionar o carregamento lazy-loading de conteúdo
  await page.evaluate(() => {
    window.scrollBy(0, window.innerHeight);
  });

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

  // Extrair dados
  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
      }))
    };
  });

  // Exibir estatísticas de uso de tráfego
  console.log(`\nEstatísticas de Uso de Tráfego:`);
  console.log(`Usado: ${(totalBytesUsed / 1024 / 1024).toFixed(2)} MB`);

  await browser.close();
  return data;
}

// Uso
optimizedScraping('https://www.scrapeless.com')
  .then(data => console.log('Scraping completo:', data))
  .catch(error => console.error('Scraping falhou:', error));

Após executar o código não otimizado, podemos ver a diferença de tráfego de forma muito intuitiva a partir das informações impressas:

Cenário	Tráfego Usado (MB)	Razão de Economia
Não Otimizado	6.03	—
Otimizado	0.81	≈ 86.6 %

Ao combinar os esquemas de otimização acima, o consumo de tráfego de proxy pode ser significativamente reduzido, a eficiência do scraping pode ser melhorada e a garantia de que o conteúdo principal necessário seja obtido.

Na Scorretless, acessamos apenas dados disponíveis ao público, enquanto cumprem estritamente as leis, regulamentos e políticas de privacidade do site aplicáveis. O conteúdo deste blog é apenas para fins de demonstração e não envolve atividades ilegais ou infratoras. Não temos garantias e negamos toda a responsabilidade pelo uso de informações deste blog ou links de terceiros. Antes de se envolver em qualquer atividade de raspagem, consulte seu consultor jurídico e revise os termos de serviço do site de destino ou obtenha as permissões necessárias.

Artigos mais populares

Scrapeless Deep SerpApi: A API de dados de busca do Google mais rápida para SEO, LLMs e RAG

O Scrapeless Deep SerpApi está online. Descubra mais sobre esta poderosa ferramenta.

Alex Johnson

05-Mar-2025

Apresentamos o Scrapeless: O Kit de Ferramentas Inteligente para Web Scraping foi Lançado Oficialmente — Libere uma Nova Era de Raspagem de Dados!

Scrapeless está sendo lançado globalmente! É uma solução avançada de extração de dados da web, projetada para ajudar empresas a simplificar a aquisição de dados com velocidade, inteligência e estabilidade.

Alex Johnson

06-Jan-2025

Scrapeless — Liberte uma Nova Era de Raspagem de Dados!

Como rastrear um site sem ser bloqueado

Se também procura soluções para este desafio, as informações fornecidas abaixo serão certamente úteis e satisfatórias.

James Thompson

03-Sep-2024

Catálogo