You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
awaitsay(env,logger,slackContext,`🎯 Added ${totalIssuesAdded}generic CWV suggestions for opportunity ${opportunity.getId()}`);
220
-
logger.info(`Added ${totalIssuesAdded}generic CWV suggestions for opportunity ${opportunity.getId()}`);
248
+
logger.info(`Added ${totalIssuesAdded}demo CWV suggestions for opportunity ${opportunity.getId()} (regular CWV suggestions were not present)`);
249
+
awaitsay(env,logger,slackContext,`✅ Added ${totalIssuesAdded}demo CWV suggestions for opportunity ${opportunity.getId()} (regular CWV suggestions were not present)`);
221
250
}else{
222
251
awaitsay(env,logger,slackContext,`:x: No generic CWV suggestions added for opportunity ${opportunity.getId()}`);
223
252
logger.info(`No generic CWV suggestions added for opportunity ${opportunity.getId()}`);
"## **Optimize Image Delivery:**\n• Use next-gen formats (WebP, AVIF)\n• Implement lazy loading\n• Compress images appropriately\n• Use responsive images with srcset\n• Consider image sprites for icons\n• Preload critical above-the-fold images",
4
-
"## **Optimize CSS Loading:**\n• Inline critical CSS\n• Defer non-critical CSS\n• Use media queries conditionally\n• Minify CSS files\n• Consider CSS-in-JS for dynamic styling\n• Implement CSS containment",
5
-
"## **Optimize Server & Network:**\n• Use CDN for global distribution\n• Enable GZIP/Brotli compression\n• Implement HTTP/2 or HTTP/3\n• Use edge caching strategies\n• Consider service workers\n• Use resource hints (preconnect, dns-prefetch)"
3
+
"lcp1.md",
4
+
"lcp2.md",
5
+
"lcp3.md"
6
6
],
7
7
"cls": [
8
-
"## **Prevent Layout Shifts:**\n• Set explicit width/height on images/videos\n• Use aspect-ratio CSS property\n• Implement skeleton screens\n• Reserve space for dynamic content\n• Avoid inserting content above existing content\n• Use CSS Grid/Flexbox for predictable layouts",
9
-
"## **Optimize Animations:**\n• Use CSS transforms and opacity\n• Implement will-change property\n• Use transform3d for stacking context\n• Avoid changing layout properties during animations\n• Use requestAnimationFrame for smooth animations\n• Consider CSS transitions over JavaScript animations",
10
-
"## **Maintain Visual Stability:**\n• Implement skeleton screens\n• Reserve space for dynamic content\n• Use content-visibility CSS property\n• Implement CSS containment\n• Use CSS Grid and Flexbox\n• Avoid cumulative layout shifts"
8
+
"cls1.md",
9
+
"cls2.md"
11
10
],
12
11
"inp": [
13
-
"## **Break Up JavaScript Tasks:**\n• Use setTimeout or requestIdleCallback\n• Implement web workers for CPU-intensive operations\n• Use requestAnimationFrame for visual updates\n• Consider Intersection Observer API\n• Implement virtual scrolling for long lists\n• Use microtasks and macrotasks appropriately",
14
-
"## **Optimize Event Handling:**\n• Debounce input events\n• Use passive event listeners\n• Implement event delegation\n• Use AbortController to cancel operations\n• Consider ResizeObserver and MutationObserver\n• Optimize event listener registration",
15
-
"## **Optimize DOM Manipulation:**\n• Implement virtual scrolling\n• Use DocumentFragment for batch updates\n• Implement object pooling\n• Use Web Components for encapsulation\n• Implement progressive enhancement\n• Minimize DOM queries and mutations"
### Prevent Layout Shifts by Specifying Image Dimensions
2
+
3
+
-**Metric**: CLS
4
+
-**Category**: images
5
+
-**Priority**: High
6
+
-**Effort**: Easy
7
+
-**Impact**: Reduces CLS by 0.1-0.2
8
+
9
+
**Description**
10
+
11
+
Images on the page are loading without their dimensions being specified. This causes content to jump around as images load, creating a jarring user experience and a high Cumulative Layout Shift (CLS) score.
12
+
13
+
**Implementation**
14
+
15
+
Add `width` and `height` attributes to all `<img>` elements. This allows the browser to reserve the correct amount of space for the image before it loads, preventing content from shifting. Use CSS to ensure images remain responsive.
The switch between the fallback font and the custom web font causes a noticeable shift in layout because the two fonts have different sizes. This contributes to the CLS score and makes the page feel unstable.
12
+
13
+
**Implementation**
14
+
15
+
Use the `size-adjust` CSS descriptor in your `@font-face` rule to normalize the size of the fallback font to match the custom font. This minimizes the layout shift when the custom font loads. You can use online tools to calculate the correct `size-adjust` value.
16
+
17
+
**Code Example**
18
+
```css
19
+
/* Example for matching Arial to a custom font */
20
+
@font-face {
21
+
font-family: 'FallbackFont';
22
+
size-adjust: 95%; /* Adjust this value based on font metrics */
23
+
src: local('Arial');
24
+
}
25
+
26
+
body {
27
+
/* The browser will use the adjusted fallback font until YourAppFont loads */
### Improve Page Interactivity by Deferring Non-Essential JavaScript
2
+
3
+
-**Metric**: INP
4
+
-**Category**: javascript
5
+
-**Priority**: High
6
+
-**Effort**: Medium
7
+
-**Impact**: Reduces INP by 100ms-200ms
8
+
9
+
**Description**
10
+
11
+
A large JavaScript bundle is being downloaded and executed early during page load, which blocks the browser from responding to user interactions like clicks or typing. This leads to a poor Interaction to Next Paint (INP) score and makes the page feel sluggish.
12
+
13
+
**Implementation**
14
+
15
+
Split your JavaScript into smaller chunks. Load essential, interactive scripts with `defer` so they don't block parsing. Load scripts for non-critical features (e.g., social media widgets, analytics) after the page is interactive, either on a delay (`setTimeout`) or when the user scrolls them into view.
16
+
17
+
**Code Example**
18
+
```html
19
+
<!-- Critical interactive script, does not block HTML parsing -->
20
+
<scriptsrc="main-interactive.js"defer></script>
21
+
22
+
<!-- Non-critical script loaded after a 4-second delay -->
### Prioritize the LCP Image and Lazy-Load Other Images
2
+
3
+
-**Metric**: LCP
4
+
-**Category**: images
5
+
-**Priority**: High
6
+
-**Effort**: Easy
7
+
-**Impact**: Reduces LCP by 400ms-800ms
8
+
9
+
**Description**
10
+
11
+
The most important image on the page (the LCP element) is competing for network resources with other, less critical images. This delays the LCP and worsens the user experience. By explicitly telling the browser which image to load eagerly and which to load lazily, we can ensure the main content is visible much faster.
12
+
13
+
**Implementation**
14
+
15
+
Set `loading="eager"` on the LCP `<img>` element. While this is often the browser's default, explicitly setting it can help override other platform-level lazy-loading defaults. Crucially, set `loading="lazy"` on all other non-critical images that appear below the fold. This prevents them from being loaded until the user scrolls near them, freeing up bandwidth for the LCP image.
16
+
17
+
**Code Example**
18
+
```html
19
+
<!-- LCP Image (Above the fold): Prioritize with loading="eager" -->
### Split CSS into Critical and Non-Critical Files to Unblock Rendering
2
+
3
+
-**Metric**: LCP
4
+
-**Category**: css
5
+
-**Priority**: High
6
+
-**Effort**: Medium
7
+
-**Impact**: Reduces LCP by 300ms-600ms
8
+
9
+
**Description**
10
+
11
+
A large, single CSS file is blocking the page from rendering until it is fully downloaded and parsed. Much of this CSS is not needed for the initial view. This "render-blocking" behavior significantly delays when users can see content, negatively impacting LCP.
12
+
13
+
**Implementation**
14
+
15
+
Separate your CSS into two parts: "critical" and "non-critical". The critical CSS file should contain only the minimal styles required to render the content visible in the initial viewport (above the fold). Load this file synchronously in the `<head>`. The rest of the styles should be in a separate, non-critical CSS file that is loaded asynchronously, so it doesn't block the initial rendering of the page.
16
+
17
+
**Code Example**
18
+
```html
19
+
<head>
20
+
<!-- Load critical CSS synchronously to render above-the-fold content -->
21
+
<linkrel="stylesheet"href="/styles/critical.css">
22
+
23
+
<!-- Preload and then asynchronously load the main stylesheet -->
### Optimize Custom Font Loading to Speed Up Text Rendering
2
+
3
+
-**Metric**: LCP
4
+
-**Category**: fonts
5
+
-**Priority**: Medium
6
+
-**Effort**: Medium
7
+
-**Impact**: Reduces LCP by 200ms-400ms
8
+
9
+
**Description**
10
+
11
+
Custom fonts are blocking the display of important text, including the page's headline, until the font files are fully downloaded. This delay contributes to a higher LCP if the LCP element is a block of text.
12
+
13
+
**Implementation**
14
+
15
+
Host fonts on your own domain to avoid an extra connection to a third-party domain. Preload the most critical font files in the `<head>`. Use `font-display: swap;` in your `@font-face` declaration to allow the browser to show a fallback font immediately while the custom font loads.
0 commit comments