Wordpress kennisbank

Overzicht van alle interne en externe geladen scripts in Chrome

Open met de inspector tools van je browser de console tab en plak de onderstaande code. // ex: katespade.com - list firsty party subdomains in HOSTS array const HOSTS = ; function getScriptInfo() { const resourceListEntries = performance.getEntriesByType("resource"); // set for first party scripts const first = []; // set...

Lees meer

Overzicht laadtijd van alle scripts in Google Chrome

Open met de inspector tools van je browser de console tab en plak de onderstaande code. function createUniqueLists(firstParty, thirdParty) { function getUniqueListBy(arr, key) { return , item])).values()]; } const firstPartyList = getUniqueListBy(firstParty, ); const thirdPartyList = getUniqueListBy(thirdParty, ); return { firstPartyList, thirdPartyList }; } const { firstPartyList, thirdPartyList } =...

Lees meer

Langzame taken zoeken in Chrome console

Open met de inspector tools van je browser de console tab en plak de onderstaande code. try { // Create the performance observer. const po = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { // Log the entry and all associated details. console.table(entry.toJSON()); } }); // Start listening...

Lees meer

Met Chrome Console Largest Contentful Paint vinden

Open met de inspector tools van je browser de console tab en plak de onderstaande code. Het resultaat wordt met een blauwe stippellijn weergegeven in je browser. /** * PerformanceObserver */ const po = new PerformanceObserver((list) => { let entries = list.getEntries(); entries = dedupe(entries, "startTime"); /** * Print all...

Lees meer

Cumulative Layout Shift opzoeken met Chrome Console

Open met de inspector tools van je browser de console tab en plak de onderstaande code. try { let cumulativeLayoutShiftScore = 0; const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } } }); observer.observe({ type: "layout-shift", buffered: true });...

Lees meer

Overzicht van geladen scripts in Chrome overzicht

Open met de inspector tools van je browser de console tab en plak de onderstaande code. const scripts = document.querySelectorAll('script'); const scriptsLoading = .map((obj) => { let newObj = {}; newObj = { src: obj.src, async: obj.async, defer: obj.defer, 'render blocking': obj.async || obj.defer ? '' : '🟥' }; return...

Lees meer

Bekijk alle geladen bronnen in Google Chrome

Open met de inspector tools van je browser de console tab en plak de onderstaande code. const rels = ; rels.forEach((element) => { const linkElements = document.querySelectorAll(`link`); const dot = linkElements.length > 0 ? "🟩" : "🟥"; console.log(`${dot} ${element}`); linkElements.forEach((el) => console.log(el)); });  

Lees meer

Afbeeldingen zoeken die lazyload krijgen met Chrome Console

Open met de inspector tools van je browser de console tab en plak de onderstaande code. function findATFLazyLoadedImages() { const lazy = document.querySelectorAll(''); let flag = false; lazy.forEach((tag) => { const position = parseInt(tag.getBoundingClientRect().top); if (position < window.innerHeight && position !== 0) { console.log(tag, position); flag = true; } });...

Lees meer

Overzicht van alle afbeeldingen die geladen worden

Open met de inspector tools van je browser de console tab en plak de onderstaande code. function getImgs(sortBy) { const imgs = []; const resourceListEntries = performance.getEntriesByType("resource"); resourceListEntries.forEach( ({ name, transferSize, encodedBodySize, decodedBodySize, initiatorType, }) => { if (initiatorType == "img") { imgs.push({ name, transferSize, decodedBodySize, encodedBodySize, }); } }...

Lees meer