I just noticed that in chrome, if there are external resources to load like the background-image attribute, it delays the loading of the entire rest of the style sheet. Its really rather annoying since it causes the page to flicker even when loading just 4kB worth of images from localhost.
I could possibly work around it on any other page by placing image references at the end of my css but this particular page is too dependent on textures, it still looks bad.
This doesn't happen to images included directly in the loaded HTML like < img > tag or background images with inline CSS. Since I'm on asp.net, I could have the css inlined into the response but this would come at the cost of bandwidth.
Is there any other way to get around this?
Related
What ways are there to prioritize an <img> to load as soon as possible, with highest priority.
I am using the image in the middle of a quite large html document and im trying to get it loaded asap and also prevent layout shifting.
i have added the attribute and value loading="eager"
i have compressed the image as much as possible
i have added fetchpriority="high"
i have set the height and width
brotli enabled on server
Would i be able to load it first in the <head> tag some how? i know it will not be used there obviously, but it is higher up in the code? would it be downloaded and parsed before say, all external css, js and font files?
would loading it somehow via javascript be quicker?
is any of the ways above wrong? any other tricks?
Anyone know if adding a tracking pixel (just a transparent GIF with some logging going on at the server that's sending out the GIF) as a background-image in a linked stylesheet will work the same as if it was a regular <img> on a page?
From a simple test I did in Chrome's network inspector it looks like it's just pulling images from local cache if I go into the location bar and hit enter. If I actually click Reload then I see it go out to the server and get back a 304. And if I shift+reload it'll force it to go back to the server for real and I get 200s.
But, it looks like it's the same behavior for the <img> images on the page as well, so then the behavior as a background-image should match the behavior as if it was an <img>
It should work exactly the same way. But tracking pixels are not decorative, or are specific to a single page, so it is easier to put an img tag in the HTML and a little more reliable, it will work for text browsers, etc.
Having a tracking pixel called via CSS would be possible, but there would be some challenges compared to using a tracking pixel in HTML:
Tracking pixels commonly have visitor data detected by JavaScript (monitor size, for instance) added to the pixel's URL. JavaScript would be unable to (easily) do this if the pixel was called via stylesheet.
When in the page source, the tracking pixel can be at the bottom of the page and be modified by code that executes first. This would be difficult to do in a single-pixel-call via CSS.
I have a legacy site that has dozens of little images on it. In addition, a CSS sprite is used for a variety of styling components. My browsers are loading the CSS image after the slew of HTML images, so the styling is blocked by the number of pending HTTP requests. I really want the CSS to load first, as many of these HTML images area actually not displayed on page load.
Is there an effective way to cause a browser to load CSS background images before HTML images, or vice versa?
Is your CSS file loaded first? e.g. in your HEAD element? if so, it should queue those images before the other images in your pages.
I just started using the chrome developer tools for some basic html websites and I used the audit tool.
I had two identical images, one with the height and width attribute, and one without. On the Resources section, both the latency and the download time were identical. However, the Audit showed
Specify image dimensions (1)
A width and height should be specified for all images in order to speed up page display.
Does this actually help? And are there any other ways to speed up page time?
This is only a splash page for the website I am building and as such it is only html, no css or javascript or anything. I have already compressed the images but I want to speed up load time even more. Is there a way?
Generally speaking: If you specify the image dimensions in the <img> tag, the browser will know how much space to allot for it and will proceed to render the rest of the page while simultaneously downloading the image. Otherwise, the browser will have to wait a few more milliseconds to get the size of the image from the image itself before rendering the rest of the page.
Since you have only a splash page, I doubt that there will be anything else for the browser to render, so it doesn't much matter whether you specify dimensions or not.
I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.