Questions tagged [web-performance]
Related to the discipline of improving the performance of web pages. Performance may be measuring page load time, memory usage, UI jankiness, Rendering time, etc.
web-performance
229
questions
0
votes
0
answers
73
views
Chrome marked existing animation as invalidated when starting new animation
I found chrome will do a huge Recalculate Style and Pre-Paint for existing animations when I start a new animation wherever on the page. Is this by design or a Chromium bug? Imagine my real web page ...
- 387
0
votes
0
answers
27
views
+50
Delay between layout and first paint in webPageTest result
When I run a webpagetest on a simplified page, where it has only a css file and couple of images (no JS, no iframes etc), then in the waterfall diagram, i can see that the css was loaded at around 1s ...
- 3,818
0
votes
0
answers
78
views
Improving INP on Pages with Anchor Links
I'm working on optimizing the Interaction to Next Paint (INP) metric i discover there is a hight INP on the page with a summary of anchor links. These anchors allow users to jump to specific sections ...
- 1
1
vote
1
answer
80
views
Search Console and PageSpeed Insights shows 0.2 CLS on mobile but when running Lighthouse it shows 0, how to identify the issue?
I noticed that Search Console shows and average CLS of almost 0.2 for mobile and the same thing is shown in PageSpeed Insights. When I try to identify the issue running Lighthouse, it shows however 0 ...
- 43
0
votes
1
answer
69
views
Lighthouse detecting multiple LCPs
In the react website that I built, I have multiple images that keep shuffling in the hero section in a nice animation, as you can see. The problem is that lighthouse, and many other performance metric ...
- 35
1
vote
1
answer
68
views
Capture chrome performance report programmatically with JavaScript? [closed]
We've been running a CPU intensive web application and there are some challenges debugging the performance issues as the hardware and CPU availability is different per user.
Although, we tried ...
- 3,431
1
vote
1
answer
205
views
103 Early hints response not sending properly with HTTP/2 request
I have implemented simple proxy server with using node js.
So the proxy will send Early hints response once it receives the request, it works well for HTTP/1.1 request but when I try with HTTP/2 ...
- 23
0
votes
1
answer
88
views
TBT but for the whole life of the page
In web we have PerformanceLongTaskTiming API which represents job units that occupy the UI thread.
And we have TBT metric, which measures how long browser had been blocked during page load. But we ...
- 117
0
votes
1
answer
69
views
Why long frame intervals do not the same as long tasks?
In browser API, we can measure the distance between two frames by calling requestAnimationFrame recursively. If we start to collect all requestAnimationFrame calls while the page is loading, we can ...
- 117
0
votes
1
answer
136
views
How to measure First Screen Paint?
Web Vitals comes with two well known metrics: FCP and LCP. It is good ideas to measure paint time. But I have different problem.
I have to implement a metric which describes when the first screen ...
- 117
0
votes
1
answer
189
views
High Lighthouse Total Blocking Time despite no long task
According to Google document the main criteria for the Google Chrome Lighthouse tool to calculate the Total Blocking Time (TBT) is long task.
From my understanding, a Long task is any JavaScript that ...
- 103
0
votes
1
answer
28
views
Re-evaluation of scripts in SSR PWAs vs SPA PWAs?
Let's say I have a PWA where two routes are SSR'ed (/dashboard and /logs) and each of those pages load a script preact.bundle.mjs.
When the user visits first /dashboard the script gets downloaded, ...
- 2,566
1
vote
1
answer
293
views
Does lazy-loading of CSS trigger a recalculation of styles for the whole page and is it important?
In the recently open-sourced by Facebook style engine StyleX there's a following claim
When dealing with a large amount of CSS, lazy-loading CSS is a way to speed up the initial load time of a page. ...
- 1,274
0
votes
1
answer
26
views
To imitate render blocking and why this attempt has not succeed?
<!DOCTYPE html>
<html>
<head>
<script>
const delay = ms => new Promise(res => setTimeout(res, ms));
const yourFunction = async () => {
...
- 3,717
0
votes
0
answers
67
views
High-Res profiling using DevTools
Im trying to work with the DevTools performance profiler to analyse the performance of a web application. But the sample rate is not high enough for my needs. It is sampling the stacks around every ~...
- 47