Closed thetwopct closed 2 weeks ago
cjyabraham
commented
11 months ago Regarding GTM, we are loading GAnalytics UA and GA4 properties. Soon we will be able to take down the UA tag.
There is also some kind of Zoominfo tag that LF Marketing installed. I am inquiring about it...
cjyabraham
commented
11 months ago Reply from Chip: "ZoomInfo is a sales tool. This was deployed to support Mike Woster’s team. It gives them sales intelligence on who is visiting the site"
thetwopct
commented
2 weeks ago Our INP is passing, so I think the work we did on this early on was worth it. Will keep monitoring but will class this as done for now.
What is INP
INP - Interaction to Next Paint - is a new Core Web Vital coming in March 2024
INP measures how quickly a webpage reacts to user interactions.
An ‘interaction’ refers to any action a user takes on a webpage, like clicking a button, tapping on a touchscreen, or pressing a key.
'Next Paint’ denotes the next visual update of the UI following the interaction.
i.e. if a user clicks a button, INP measures the time it takes for the page to respond to that click visually.
INP focuses on three main types of user interactions:
It does not include:
How to reduce it
Minimize JavaScript execution
Keep your JavaScript execution time to a minimum. Heavy JavaScript tasks can block the main thread and delay the response to user input.
Give feedback to user
If you need to do for instance heavy JavaScript processing in response to user input, consider updating the UI before starting the CPU task - i.e. show a spinner.
Break up Long Tasks
Split large JavaScript tasks into several smaller tasks. This keeps the main thread free more often and reduces input delay.
Keep Event Handlers Lightweight
Try to keep the code in your event handlers as light as possible. Heavy computations can increase processing time and lead to higher INP.
Use Web Workers
Web Workers allow you to run JavaScript in the background on a separate thread. This can free up the main thread and reduce processing time.
Use GPU Acceleration
Transitions and animations that can be handled by the GPU should be. This can make rendering more efficient and reduce presentation delay.
Optimize Images
High-resolution images can slow down the rendering of the website.
Utilize Content-Visibility for Off-Screen Elements
By applying content-visibility: auto; to off-screen elements, you instruct the browser to skip rendering of those elements until they’re needed.
Use requestIdleCallback
You can use the requestIdleCallback function to schedule non-essential work to run when the browser is idle. This helps to keep the main thread free.
Using Content-Visibility
Off-screen content within a content-visibility: auto property remains in the document object model and the accessibility tree. This allows improving page performance with content-visibility: auto without negatively impacting accessibility.
Based on the CNCF.io site and how it works, I feel like the 3 main focus areas should be:
1) Minimize JavaScript execution
We have implemented Flying Scripts to delay the loading of heavy tracking scripts until after the page and UI has loaded.
This works pretty well to reduce INP and keep pages loading very fast without impacting tracking.
We disable Flying Scripts on pages matching the following patterns:
This correlates with some reported INP page issues ("certification"):
The certification pages (and others mentioned above) use a Hubspot form above the fold, so they need to prioritise HubSpot script loading otherwise there is large CLS issues. Even prioritising the script loading there is a delay with layout:
Other tasks:
2) Using Content-Visibility
Content-Visibility allows for sections of the page to be "lazy loaded" and helps render times of the page. I've implemented this on a few pages of the site already.
Issues with Content-Visibility
Since styles for off-screen content are not rendered, elements intentionally hidden with
display: noneorvisibility: hiddenwill still appear in the accessibility tree. If you don't want an element to appear in the accessibility tree, usearia-hidden="true".3) Optimise Images
Our images are already mostly well optimised. Images we cannot optimise are typically hosted outside the cncf.io website - i.e. pictures of "People" are pulled in from GitHub.
The images we do have could be further optimised by implementing webP versions of them. We have previously discussed this as a task - https://github.com/cncf/cncf.io/issues/599 - and it may well be worth testing it out. I believe we had issues with webP before - on LF events? - but I would hope by now any issues with the plugin / pantheon have been resolved.
Update: We have applied webp manually to some images
Monitoring results
Deploying JS optimisations, page optimisations and content-visibility experiments, our INP scores have improved already: