Encountering issues with Google Lighthouse and AMP Pages https://i.sstatic.net/EXiha.png
I have attempted various solutions but none seem to be working
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700,900&display=swap" as="font" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Cairo:300,400,600,700&subset=arabic,latin-ext&display=swap" as="font" crossorigin>
This information was beneficial for me (inserted in the HTML index):
<link>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;600;700;800&display=swap');
</style>
To change the attribute from preload to stylesheet, you can add an onload listener.
Here's a simple example:
<link
rel="preload"
href="https://example.com/styles.css"
onload="this.onload=null;this.rel='stylesheet'"
as="style"
>
For more information on this topic, check out this resource: Example Website
According to information from web.dev, it is recommended to preload CSS in the following manner:
<link rel="preload"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700,900&display=swap"
as="style"
onload="this.onload=null; this.rel='stylesheet'; document.body.classList.add('fonts-loaded')">
To ensure a seamless experience, you can also specify an alternate font until the desired fonts are fully loaded:
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body.fonts-loaded {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Consider the example below: Line1 <br /> Line2 To create a line break between Line1 and Line2, I have utilized <br />. However, due to lack of cross-browser compatibility in setting the height of br, I am seeking an alternative approach. Any ...
I am looking to showcase a collection of fruits and vegetables through images, with the names displayed centered underneath each image. Additionally, I want to implement jQuery append functionality so that the names only appear when a specific button is cl ...
Can anyone help me position the trophy inside the circle, just below the number 2000? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e352835 ...
I am attempting to design a badge that hovers above my cart icon and shows the total number of items currently in the cart. However, I have encountered an issue where the badge appears as an oval shape rather than a perfect circle. Can anyone assist with ...
While hovering over a child element in Firefox using the rule .parent:hover > .child { /*style*/ }, the child element is considered separate from the parent element and does not receive styling. For example, in Firefox when you hover over the button, on ...
I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or au ...
I set up this form to automatically submit once the page has finished loading. However, I seem to be encountering a problem where the page gets stuck in a continuous loop of reloading. HTML <body onload="document.getElementById('filters').su ...
Looking to create a slideshow that transitions between images every two seconds? Check out the code snippet below: HTML: <div class="fadeIn"> <img src="img/city.png" class="remimg" id="city"> <img src="img/shop.png" class="remimg" ...
Imagine this scenario: <div hidden>blah blah blah</div> If I hide the <div> element like that, can CSS be used to make it visible again? Alternatively, is there an HTML-only method to hide a <div> that can later be reversed with ...
export class ComponentOne { array_all_items: Array<{ page_details: any }> = []; array_page_details: Array<{ identifier: number, title: string }> = []; initial_item: Array<{ identifier: number, title: string }> = [ { ...
I have a collection of items: a = ['apple', 'mango', 'grape', 'papaya', 'banana', 'cucumber']. An input element is present with a placeholder stating select from fruits (the array elements should ...
I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...
In an HTML table, the data is structured as follows: Header 1 has Row 1, Header 2 has Row 2 and Row 3, while Header 3 has Row 4, Row 5, and Row 6. <table> <thead> <tr> <th>Header 1</th> </tr> </thead& ...
My HTML code includes a select tag, and when the value changes, I want to retrieve data from the database based on this new value. The data is then displayed in a new div. This new div contains a close sign that should hide the div when clicked by the user ...
I am looking to create an "Email" button that will send the user-entered text to my email address. Here is the code snippet: <form method="post" action="malto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cb ...
Here is some javascript code that I am having trouble with: var newAmount = parseInt(amount) var price = data[0]['Product']['pris']; var id = data[0]['Product']['id']; var dat ...
I am in search of a way to style my datasheets using tr:nth-child(odd). Below is the code snippet I am currently using: My main concern lies in adjusting the width. I aim for it to occupy a space that measures 200px by 400px The depth does not pose an is ...
We are currently working on a web app using React JS. Our goal is to have an image and a description show up when the link is shared on social media platforms as well as Skype. Currently, when the URL link gets shared, it only displays the URL itself lik ...
When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...
When the button '1' is clicked, it displays the value "1" inside a <!p> tag. However, the second button '2' does not display the value "2" in the input box. Even though both functions are identical. //Function with working func ...