Stack Overflow
Stack Overflow

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.

215 questions
576
votes
11 answers

Max parallel HTTP connections in a browser?

I am creating some suspended connections to an HTTP server (comet, reverse AJAX, etc). It works ok, but I see the browser only allows two suspended connections to a given domain simultaneously. So if a user is looking at my website in Tab1 of their…
Mark
127
votes
21 answers

Tools to make CSS sprites?

Are there any good tools to make css sprites? IDEALLY I'd want to give it a directory of images and an existing .css file that refers to those images and have it create a big image optimized with all the little images AND change my .css file to…
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
29
votes
5 answers

Does 'display:none' improve or worsen performance?

I have a page with a lot of vertical scrolling and thousands of DOM elements. For improving performance, I thought about setting display: none; to the content of the divs above and below the viewport, that is, the divs which are not visible (while…
user12273078
18
votes
3 answers

Long time waiting Request to Service Worker

I have noticed that the time waiting for service workers to respond with items from the cache is not as fast as you would expect it to be. I have seen the same wait times with both sw-precache and a custom written service worker. What are the…
Kevin Farrugia
  • 6,431
  • 4
  • 38
  • 61
16
votes
2 answers

For responsive images with different aspect ratios, what's a good way to minimize Cumulative Layout Shift?

If you have a element with image sources at different aspect ratios at different breakpoints, what is the best way to minimize CLS by using aspect-ratio and media queries in CSS?
addyo
  • 2,798
  • 1
  • 14
  • 21
13
votes
2 answers

Under what circumstances would loading images individually with HTTP/2 be slower than loading all images at once with a sprite a la HTTP/1.1?

HTTP/2 makes it possible to multiplex connections, eliminating the need for more than one connection to a server. Over a single connection, many individual images can be sent down to the client. This obviates the old image sprite pattern of…
Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50
12
votes
1 answer

What is the VM prefix in the initiator column in Chrome Dev Tools Network Tab?

In the Chrome Developer Tools Network Tab Initiator Column, sometimes a script has an Initiator which is prefixed with a VM. My first thoughts are that this stands for Virtual Machine but what do the numbers then stand for? If I click to view the…
James
  • 1,233
  • 3
  • 13
  • 18
10
votes
3 answers

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=lazy and a fallback for older browsers. Answers…
Ingo Steinke
  • 766
  • 3
  • 11
  • 30
10
votes
4 answers

Self-hosted fonts using NextJS

I'm trying to self-host webfonts using my NextJS app and having trouble. This is the URL browser tries to access these fonts: localhost:3000/_next/static/css/fonts/Avenir.woff2 The actual path is: _project_dir/static/fonts/Avenir.woff2 I tried…
Alex
  • 1,210
  • 3
  • 21
  • 34
10
votes
3 answers

How can I check has link[rel=preconnect] done its job or not?

I append link[rel=preconnect] in my page's HTML code. But how can I check works preconnect or not? Preconnect does not appear in the Network panel of DevTools, I don't see it in chrome://tracing. Which tools can I use to see this event?
andre487
  • 1,261
  • 2
  • 18
  • 27
9
votes
6 answers

How to delay script/asset loading in Chrome Developer Tools

Is there any way to add a time delay to a script/asset loading in the Google Chrome Browser via the Chrome Developer Tools? Or to block a script loading entirely? The reason I want to do this is to see how a site performs when a script/asset suffers…
James
  • 1,233
  • 3
  • 13
  • 18
8
votes
4 answers

Is there a limit to how many domains we should "dns-prefetch preconnect" with Chrome?

When we want to make sure a blazing fast website who uses third-party widgets/plugins/add-ons/analytics etc.. One of the many requirements to achieve this is to "dns-prefetch preconnect" for each individual domain name (basically saving a little for…
dankilev
  • 720
  • 2
  • 10
  • 32
8
votes
1 answer

What is the life cycle of AuthorizeAttribute object? is it web per request or transient?

I just wanted to know the life cycle of AuthorizeAttribute and started debugging the default constructor of the AuthorizeAttribute but could't get any hit. here is the code of custom Authorize filter. public class CustomAuthorizeAttribute : …
Deepak
  • 1,510
  • 1
  • 14
  • 27
8
votes
4 answers

Web Components rendering performance

Is Web Components give better performance when compared to Native HTML elements. Since each elements getting mutated only when getting attached to DOM. So, expensive operations inside Element callbacks leads to poor performance. I wrote one sample…
john
  • 859
  • 2
  • 12
  • 25
8
votes
1 answer

How to use Network's Waterfall in Chrome Dev Tool to diagnose web rendering performance issue?

One of our web pages has a rendering performance issue, when the page is open, the spinner is freeze or loading very laggy, and after 6-12 seconds the page completes loading. So i'm using the Network's waterfall in chrome dev tool to diagnose the…
Zhemin Zhang
  • 127
  • 1
  • 2
  • 5
1
2 3
…
14 15