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.
207
questions
0
votes
0
answers
19
views
html input placeholder tag causing CLS (Layout Shift) and seo
while i was studing the performance impact of my scripts in my webapp i saw a interesting fact.
Basically when i open a modal filled of input fields everything is rendered ok, but the placeholders are ...
0
votes
0
answers
14
views
How to add network throttling in lighthouse programatically as node module
I want to add different network throttling conditions like slow 3g, fast 4g, etc to check the web vitals metrics scores like FCP, LCP, and TBT depending on different network conditions.
const fs = ...
1
vote
1
answer
19
views
How to measure Speed Index using Navigation Timing Api?
I want to measure the speed index of a website using Navigation Timing Api but not understanding what all properties represent for the calculation of the speed index in the Navigation Timing API
0
votes
1
answer
36
views
How to deal with long task Layout?
I have high blocking time on my page and I'd like to reduce it.
My problem is: how to deal with long task on layout ?
I know there is also issue long task on JS but regarding to this Optimize Long ...
0
votes
0
answers
28
views
dynamically loading content in a single modal or repeating the modal for each row, which approach is faster and lighter
creating a single bootstrap modal and populating the data of each row with the help of javascript or jQuery, or creating the modal for each row in a loop and each row or record has its own modal ...
0
votes
0
answers
16
views
One big server response API delaying the another API time [duplicate]
There are 2 requests,
a.com/apiRequest1 - receives response in chunk by chunk for a period of 10seconds ( handled using progress callback
in jquery)
a.com/apiRequest2 - receives response without ...
0
votes
1
answer
76
views
Total network waiting time for all http requests
Not sure whether anybody has similar query here, assume we do a performance tracing on a single page application completely loaded on a url, how to get the total waiting time on networking time for ...
0
votes
0
answers
39
views
Using preconnect in Chrome in advance of injected Script
I am trying to use a preconnect link (or a dns-prefetch link) to get Chrome to perform DNS resolution and ideally open the connection to the remote server. From the network timeline this does not seem ...
-2
votes
4
answers
108
views
performance issues because a lot of image in website
I have a lot of images on my website and that makes my website load too slowly. should I create a small image with low quality and small size and make a blur effect on it and make the real images ...
0
votes
0
answers
245
views
Intersection Observer not working as expected for horizontal scroll (X-axis)
I'm using lozad.js which internally uses intersection observer for lazy loading images. I have a carousel where I need the images on next slide which are not on viewport yet to be loaded to better the ...
0
votes
1
answer
111
views
Why does pagespeed throw different performance scores on different browsers?
I'm testing my site on PSI and see varying results on Edge vs Chrome (both are on incognito).
This difference could be based on other factors - which I haven't been able to determine. But for now, it ...
0
votes
2
answers
142
views
What is the most complete way to gather the largest contentful paint metric in the field?
I would like to gather the "Largest Contentful Paint" metric programmatically in the "field" on actual user page loads and report it to a data collection tools.
I know that I can ...
0
votes
1
answer
305
views
Which parameters influence Lighthouse performance in desktop and mobile applications?
I am building a personal blog using Hugo and deploying it to Netlify, and I ran it, out of curiosity, through the Chrome Lighthouse. To my surprise, the results for desktop and mobile differ ...
2
votes
0
answers
94
views
Web Performance: How to Flush / Stream HTML Document with NodeJS
Let's say we are using server-side rendering for a website.
The website has a static header, but for the body we need to fetch a product list from a 3rd party.
Let's say fetching the product list ...
0
votes
0
answers
209
views
See the call stack or origin from Performance Observer long task entry
I want to use the Performance observer to debug the long tasks. It gives me every registered tong task but I can't find its origin.
I want to know is there a way to see the origin of the task or even ...
2
votes
1
answer
611
views
Cumulative Layout Shift problem - how to fix an element from horizontally shifting?
I have a basic header that has a max-width and margin applied (standard stuff) in order to position it horizontally in the middle of the page.
However, when I run a lighthouse report, it shows a ...
0
votes
1
answer
901
views
Chrome Devtools Perfomance profiler dump json file parser
I'm trying to parse the results of the performance profiler tool, but I've googled everything and I cannot find anything. Where to dump profiler jsonfile Sample picture
The only documentation I've ...
0
votes
0
answers
20
views
When does pixels-to-screen pipeline happens?
I was reading Rendering Performance by Paul Lewis, and learnt about the pixel to screen pipeline. (shown below)
pixel to screen pipeline
But I started to wonder when this process happens in the whole ...
0
votes
1
answer
394
views
new PerformanceObserver(cb).observe({ type: 'paint', buffered: true }) doesn't work in Safari
new PerformanceObserver((list) => {
list.getEntries().forEach(console.log);
}).observe({ type: 'paint', buffered: true });
performance.getEntriesByType('paint').forEach(console.log);
These two ...
0
votes
1
answer
702
views
How to debug and fix Largest Contentful Paint LCP probem due to div with text loaded in initial HTML document?
The Largest Contentful Paint (LCP) score varies around 2.5s to 2.7s for below web page, as per both Lighthouse report from Chrome Incognito as well as WebPageTest.org.
Web Page with this LCP problem = ...
4
votes
1
answer
584
views
Lazy load components in react
I'm working on a legacy react-app, hence lot of pieces cannot be reasoned about but simply accepted.
So, I have a couple of components that load a lot of dependencies and are obviously not important ...
1
vote
1
answer
150
views
How can I link a stylesheet with a media query such that it is downloaded only when the media query is satisifed
I include 2 stylesheets in a page, one is the version for mobile that is alwys required. on larger screens i would like to load desktop.css in addition. So I link the desktop style so:
<link href=&...
0
votes
0
answers
48
views
Why the TBT is "Unavailable" in ChromeDev Tools?
The TBT might be "Unavailable" in ChromeDev Tools. Why is that?
Is that because the TTI cannot be calculated accurately? I guess maybe the recording from the performance timeline does not ...
0
votes
2
answers
300
views
Google font is blocking render despite using media=print
I am using the below code to fetch Google font. Despite of using media="print", lighthouse detects the font to be render-blocking. How do I make it non-blocking?
<link rel="...
0
votes
1
answer
57
views
Load RequireJS in head
My web site uses RequireJS for loading other scripts. Unfortunately the pages are compositions of independent little applications that are provided as HTML fragments (actually it's a Java portal) and ...
0
votes
1
answer
48
views
jQuery Speed up adding tooltips to table cells according to row and column name
I currently use this function to add tooltips to each table cell according to their row name (left-most cell in the row) and column name (value of top-most cell in the column). It works as intended, ...
0
votes
1
answer
175
views
New way of measuring Cumulative Layout Shift
Google has launched a new way of measuring Cumulative Layout Shift (CLS). But somehow I am not able to understand the new definition from the articles on web.dev and https://web.dev/evolving-cls/.
...
0
votes
1
answer
61
views
Google Lighthouse Metrics do not match speed index score
I am currently testing the performance of my site with Google Lighthouse on Chrome Debugger.
I am getting several orange indicators despite their numbers falling into the green coding based on web.dev....
0
votes
0
answers
43
views
Optimizing 1500 images (100kb) each on a single web page? [duplicate]
I am building a web page and its is a product customizer. So I need many images. On average if I compress the photo of each combination it is going to be 100kb. They are JPG. Any more compression and ...
4
votes
4
answers
3k
views
Pagespeed warning - Use explicit width and height on image elements
I want to set a responsive image in my webpage using tailwind css. I have provided sufficient classes to make it work on different screen sizes. Now I am getting the following error in page-speed.
...
0
votes
1
answer
70
views
What happens to performance.mark entries when the resource buffer gets full
I am building a large private (ie used behind a firewall) PWA and wondering how to improve the diagnostics if/when my users hit issues. I already have an error manager which uses navigator.sendBeacon ...
-2
votes
1
answer
42
views
Why my website keeps requesting resources from server even after the website is fully loaded
I am working on the web vitals for a website and I was checking the Chrome Developer Tools the Network tab. The website loads fully, but I see that in the network tab, the server requests keep on ...
0
votes
1
answer
5k
views
Jmeter: Getting 502 bad gateway error for some of the requests in suite
I have created a performance test suite in Jmeter. The suite contains one thread group:
Thread properties:
Number of threads: 100
Ramp-up period: 5
Loop count: 1
Clearing cache and cookies on each ...
1
vote
1
answer
244
views
Different TTFB value on Chrome vs Web Vitals
I am noticing different TTBF values in Chrome network tab vs logged by WebVitals. Ideally it should be exactly same value, but sometimes seeing large difference as much as 2-3 seconds for certain ...
-1
votes
1
answer
1k
views
How to remove unused CSS/JS and Improve server response time for WordPress website?
I've optimized my WordPress site performance and also checked its performance using web.dev
But still, have the following issues that I couldn't solve:
Remove unused CSS
Remove unused JS
Initial ...
0
votes
3
answers
48
views
how to lower kb load on webpages when pulling info from api
I made a weather webpage that uses an API to pull array information and display it on my webpage. It pulls weather data such as conditions, temperature, wind speed, and weather icon images. The code ...
0
votes
0
answers
141
views
Does the rendering process of Chrome browser really have the step of Render-tree Construction? Why is there no such step in devtools performance?
I have read a post, link here: Render-tree Construction, Layout, and Paint
A demo page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" /&...
0
votes
2
answers
63
views
Will chunk/bundle optimisations help on my website if first Input delay(FID) is already less?
According to core web vitals there are only 3 core vitals for measuring the user experience of any website LCP(Largest contentful paint), FID(First input delay) and CLS(Cumulative Layout shift). ...
0
votes
1
answer
1k
views
Does GTM really load all tags Asyncronously?
One of the big benefits and features of Google Tag Manager from their website:
Fire tags asynchronously, so they load independently from one another and don’t slow down your pages.
Consider this ...
0
votes
0
answers
2k
views
Common.js, Vendor.js and App.js too big on Build (Nuxt)
I am working on an existing project and I noticed the JavaScript files fetched from the server are way too big.
I am having 50MB Resources fetched on some pages and this page just consist of text and ...
0
votes
1
answer
97
views
Does CSS content-visibility improve image decode times?
Does the CSS content-visibility property improve image decode times in browsers like Chrome?
2
votes
0
answers
1k
views
Changing position from fixed to relative or the opposite cause layout shift (CLS)
I'm using the following code to make some of my widgets on the sidebar to be sticky for a specific scroll and it works very well
<script>
window.onscroll = function () {
...
0
votes
1
answer
42
views
How not to request for sidebar elements if the sidebar is not visible
Let's imagine a blog.
For example: https://around.createx.studio/blog-grid-rs.html
Here we can see that there is a content area and a sidebar. The sidebar is not visible at narrow screens. In other ...
-3
votes
1
answer
181
views
Which Javascript framework is best for my fast loading image rich portfolio website [closed]
I want to rewrite my portfolio. I want my website to load faster than the current version. Also my portfolio will contain lots of images and I have used CDN for it. For my current version I used ...
1
vote
1
answer
1k
views
Looping causes forced reflow while the same code doesn't cause reflow without loop
I found a weird case of forced reflow when we use loop. Example here
In the first case, I have looped through 200 elements and change its class using for loop.
function resize1(){
let children ...
10
votes
3
answers
2k
views
Lazy loading images with accessibility and printer support
I am looking for a proper way to implement lazy loading of images without harming printability and accessibility, and without introducing layout shift (content jump), preferrably using native loading=...
0
votes
3
answers
103
views
Will console block the page rendering
I wrote a html page with code below。
<html>
<header>
<div class="logo"><a href="index.html" title="Coyle Appliance Repair"></a></div&...
0
votes
1
answer
3k
views
Will switching to React Hooks affect my app's bundle size?
I wrote my website with a mixture of React classes and functional components. Now I am considering rewriting it using React Hooks. It's critical to me to keep my compiled bundle small. Should I expect ...
1
vote
2
answers
941
views
How to preload custom fonts with webpack/rails 6
I would like to preload a custom font. I'm using rails 6 with webpack.
In config/_fonts.scss :
@font-face {
font-family: 'customfont';
src: font-url('customfont.eot?81236734');
src: font-url('...
0
votes
1
answer
222
views
Preload Key Request for font files
I have searched on internet and found if i Consider doing something <link rel=preload> it will fix the problem.
but i dont find these resources in my code files can one help me to find source of ...