Is it possible for Penthouse to retrieve critical CSS while using javascript?

I am currently utilizing the laravel-mix-criticalcss npm package to extract the critical CSS of my website.

This package leverages Penthouse under the hood, and you can configure Penthouse settings in your webpack.mix.js within the critical options.

The Penthouse documentation states:

Typically, all elements that need styling in the critical CSS must be present (visible) in the HTML of your page with Javascript disabled.

However, achieving this requirement on our site may not be feasible. I understand that some Puppeteer settings can be provided in the penthouse configuration. Is there a way to enable JavaScript for this process?

javascriptcssnpmlaravel-mixcritical-css

Answer №1

One of the features includes a special setting called blockJSRequests.

When utilizing the mix.criticalCss() method, you can configure the options to include the following:
    penthouse: {
        blockJSRequests: false,
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty populating the token in the h-captcha-response innerHTML and g-recaptcha-response innerHTML

I am attempting to use 2captcha along with Selenium and Python to bypass an Hcaptcha. After receiving my 2captcha token, I attempt to input it into the textareas labeled 'h-captcha-response' and 'g-captcha-response'. However, this app ...

javascriptpythonselenium2captchahcaptcha

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...

javascripthtmlangulartypescript

How can I collapse the dropdown menu in typeahead.js?

I am currently utilizing typeahead.js for a typeahead functionality. My goal is to achieve the opposite of what was discussed in this thread: Programmatically triggering typeahead.js result display Despite attempting to trigger a blur event on the typeah ...

javascriptjquerytypeaheadtypeahead.js

Managing multiple arrays in asynchronous functions in node.js

I am facing an issue with a large array (10K) that I need to split. I tried following this method: and it worked perfectly. However, I now need to pass the separated arrays to a request function and await the response before passing it to savetodb. Could ...

javascriptarraysnode.jsasynchronous

Is ajax testing with therubyracer (or execjs) worth trying out?

I'm looking to challenge myself by integrating and testing JavaScript code within a Ruby environment. My main goal is to utilize Ruby to set up the database, interact with it using my JavaScript model, and verify the JavaScript state without resorting ...

javascriptrubyajaxtestingexecjs

Transfer the data in the columns of Sheet1 to Sheet2 and eliminate any duplicates using Google App Script

Is there a way to transfer only unique rows from a SOURCE Spreadsheet to a DESTINATION spreadsheet? Spreadsheet #1 (SOURCE) - This sheet contains ID's and Names, but has duplicate rows. There are over 500k rows in this sheet and it is view-only. Spre ...

javascriptarraysgoogle-apps-scriptgoogle-sheets

Is there a way to retrieve a large number of users through an API using async await?

I am trying to retrieve all users from an API and I want to identify which user receives the highest payment. For instance let users=['tom','jenny','smith','Joe'] async function getUsers() { let response = awa ...

javascriptnode.jsrestfetch

Encountering an issue while trying to establish a React application

C:\Users\KARTHIKA\React>npx create-react-app part2 npx: installed 67 in 6.481s Creating a new React app in C:\Users\KARTHIKA\React\part2. Installing packages. This might take a couple of minutes. Installing react, re ...

reactjsreact-nativenpmyarnpkg

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Below is the HTML and JavaScript code that I am working with: function changeResult() { x = document.getElementById("dropdown-list").value; console.log((x)); } var qq; <select id="dropdown-list" onchange="changeResult()"> <option value="4 ...

javascripthtml

Determine whether the specified date falls on a public holiday within the selected

I'm currently working with Angular 12 and I need to determine whether today is a regular workday or a day off for employees, including weekends and public holidays. I attempted to use the date-holidays package by importing it like this: import Holida ...

javascriptangularwebpackbabeljs

Conceal specific pages within the DataTable without deleting them

Currently, I am facing an issue where the dataTable paginates and removes the DOM pages along with the data. My goal is to extract all the data from the dataTable and convert it to JSON without losing access to the DOM when pagination occurs. I want to m ...

javascriptjqueryhtmljsondatatables

Guide to setting up an express route to utilize passport for secure authentication

I've recently made some adjustments to a boilerplate I created in es6 by downgrading it to an older version, es5. During this process, I had to modify the way I handle exports and requires instead of using imports, but now the routing is working smoot ...

javascriptnode.jsexpressexpress-jwtpassport-jwt

What is the best way to resize my hamburger menu and achieve a flawlessly circular border for it?

I've been struggling to reduce the size of my hamburger menu (both height and width) for some time now. I managed to make it a bit smaller, but I can't seem to figure out how to shrink it further. Additionally, I'm having trouble creating a ...

javascriptcssreactjsanimation

How can I effectively refresh the provider_token / access token for Discord in NextJS with Supabase Auth?

Currently, I have encountered an issue with my NextJs project using Supabase Auth for authentication. I am currently utilizing the Discord provider and everything works fine initially. However, after a few minutes, the session object gets updated and the p ...

javascriptsessionnext.jsoauth-2.0supabase

What is the best way to initiate JavaScript using a button click in WordPress?

I need to add a button to a WordPress page that triggers a JavaScript function when clicked. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <title></title> </head> <body> < ...

javascriptjquerywordpress

Can a single link have a customized background color and different properties set for when it is clicked on?

I need assistance with setting the background-color of this <ul> to none while also adjusting the link's background-color to black. Here is the CSS code I have used: a:link { background-color: black } And here is the HTML code snippet: <di ...

cssbackground-color

How can I parse a JSON string in a node.js environment?

My current challenge involves sending a JSON string and parsing it on the server-side in node js. The specific value I am trying to extract is the title, but I keep encountering undefined when attempting to parse it. This is my current approach: Home.ejs ...

javascriptjsonnode.js

Identifying tick markers in the event loop of JavaScript and Node.js

Is there a way to determine if a function is called in the current tick or if it will be called in the next tick of Node.js event loop? For instance: function exampleFunction(callback){ // we can call callback synchronously callback(); // or we c ...

javascriptnode.js

Tips for identifying when v8 heap utilization in Node.js is nearing its limit

Currently, my script includes the following code: const v8 = require('v8'); let heap = v8.getHeapStatistics(); let usage = 100 / heap.heap_size_limit * heap.used_heap_size; if (usage > 90) { console.log(`V8 heap usage close to the limit ...

javascriptnode.jsout-of-memoryv8

"The text() or json() methods in Javascript's fetch function never seem to resolve, leaving the operation in a perpetual

In my new nextjs 13 project, I'm attempting to perform a fetch operation (unsure if it's related to JavaScript or nextjs) and using console.logs to monitor the code execution. let url = `${BASE}/${module}/${path}`; url += "?" + ne ...

javascriptnext.jsfetch-api