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 meerOverzicht 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 meerLangzame 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 meerMet 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 meerCumulative 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 meerOverzicht 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 meerBekijk 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 meerAfbeeldingen 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 meerOverzicht 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