How to click on an input before loading the pupeteer page

Question

I have a script that goes to the Nike website and selects the shoe size and clicks on the add to cart button, I use a cookie saved in a json file so I don't need to log in, the problem is that the size of the shoe and the button to put in the cart is only clicked after all the loading of the page is finished, does anyone know if you have how to select the size of the shoe and click on the button to put in the cart before the complete loading of the page?

This is my code:

const puppeteer = require('puppeteer');         
const fs = require('fs').promises;                                                                                                              
(async () => {
 console.log("Iniciado!")                        
 const browser = await puppeteer.launch({         
  executablePath: '/usr/bin/chromium',            
  headless:false,
 });
 const page = await browser.newPage();
 await page.setViewport({ width: 1920, height: 1080 });
 await page.setRequestInterception(true);
 page.on('request', (req) => {
  if(req.resourceType() === 'image' || req.resourceType() === 'stylesheet' || req.resourceType() === 'font'){
   req.abort();
  }                                               
  else {                                           
   req.continue();
  }                                              
});
const cookiesString = await fs.readFile('./cookies.json');
const cookies = JSON.parse(cookiesString);     
await page.setCookie(...cookies);
await page.goto('https://www.nike.com.br/chuteira-nike-premier-2-sala-unissex-153-169-171-309321', { timeout:0});
await page.waitForXPath('//label[@for="tamanho__idM40F395"]',{visibility:true, timeout:0});    
const tamanho = await page.$x('//label[@for="tamanho__idM40F395"]')
await tamanho[0].click('//label[@for="tamanho__idM40F395"]');
await page.waitForSelector('button#btn-comprar')                                                
await page.click('button#btn-comprar')
console.log("Adicionado ao carrinho!")

What should I change to instead of waiting for the entire page to load, just wait until the input and button are available to do what I have to do? because I lose a lot of speed waiting for the page to load completely and I don't want to have to wait since the element can already be clicked.

Now I would like to take the opportunity to ask if it is possible to remove the loading of certain texts or html tags from the loading of the page, no need to say how, I just want to know if it is possible

Answer 1

You can try to wait till domcontentloaded event, not till load (default). But this may fail since scripts to process element clicking may be not ready yet.

await page.goto(
  'https://www.nike.com.br/chuteira-nike-premier-2-sala-unissex-153-169-171-309321',
  { timeout: 0, waitUntil: 'domcontentloaded' }
);

// they wait for the element.