load website without images for more efficency

Question

I have a chrome extension where where when I press a button it goes to a url where It is going to click on buttons and search for things. I want it to run as fast as possible so I want to go to the url and not load any images so It can run faster I tried

$('img').remove();

in the console of the website ( https://www.supremenewyork.com/shop/all )

which does remove all the images but I want to know if there is a better way to do this because It seems as if I have to load the website when I go to it and then it will remove all the images.

Is there anyway to make it go to this website but somehow remove the images before it loads the website to save time?

Answer 1

One option would be to create a userscript in Tampermonkey/Greasemonkey (or custom stylesheet in an addon like Stylish) that ensures that img s always get display: none . For example:

// ==UserScript==
// @name         Hide Images
// @namespace    CertainPerformance
// @version      1
// @match        https://stackoverflow.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

document.head.appendChild(document.createElement('style')).textContent = `
img {
  display: none !important
}
`;

Install this userscript, open your browser's Network tab, then navigate to somewhere on stackoverflow.com that you haven't visited before - that is, somewhere where your browser hasn't loaded the posters' images before. With this userscript, you'll see that the avatar image requests to www.gravatar.com never get sent out - nothing unwanted gets downloaded.

Note that the

// @run-at       document-start

is important - without that, the userscript will run after initial page load, which will give the browser a few milliseconds to start downloading the images in preparation to display them, before the script runs.

Of course, customize as you need - change the

// @match        https://stackoverflow.com/*

to whichever URLs you want to hide images on.

That said, if you want to run an automatic script on that other page to gather data, it would probably be more efficient to use plain requests like with fetch , and then parse the response text into a document, and search through the document, instead of loading up a whole new page in your browser.