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.
Related
I have the following images/slides on the home page of my website;
Home page: https://www.atlasestateagents.co.uk/
Images:
https://www.atlasestateagents.co.uk/img/Liverpool-Slide.png
https://www.atlasestateagents.co.uk/img/Landlord-Slide.png
https://www.atlasestateagents.co.uk/img/Vendor-Slide.png
Having used some online SEO tools I can see they are considerably adding to the page load time which apparently can have a negative affect on SEO performance.
The images have to be large in size as the site uses the Bootstrap framework and scales up/down depending on screen size.
Is there anything I can do to reduce the file size and/or load time?
File Types
The first and simplest thing to consider when optimizing images is file type. Certain image file types are better suited for specific images. For example, JPGs are best suited for photographic images. PNGs, on the other hand, are best suited for simple images with few colors or for images using transparency. 24-bit PNGs are best suited for images containing both photographic elements and simple graphics. 8-bit PNGs can further reduce file size in images with fewer than 256 colors.
Sprites and Preloaders
A helpful practice for reducing load time is the use of CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often employed for mouse-over states on buttons. For example, with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over it.
Though sprites are frequently used for interactive menus and buttons, they can also be used to display multiple site images from a single image file. This would require the browser to only download one image instead of, say, three or four.
In addition to sprites, images can be preloaded using JavaScript, jQuery, Ajax, or CSS. When an image is preloaded, the browser downloads or “preloads” the image and then instantly displays it when the user goes to access it. Preloading can greatly decrease load times with image heavy websites, especially sites with photo galleries.
Using CSS Instead of Images
Sometimes the best way to decrease image load time is not to use an image at all. Improvements to CSS have made it possible for the browser to render certain “images” using pure CSS. It is now possible to generate rounded rectangles, gradients, drop shadows, and transparent images using CSS. Be warned, every browser won’t always support these techniques and browser compatibility should be carefully considered before replacing an image with CSS.
Suggesting some good reads on image optimization and reducing load time if using images.
http://www.getsnappy.com/web-optimization/improving-page-load-times.html
http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience
http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times
Do Images Load Faster in HTML or CSS?
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?
A website that I'm currently working on has a number of slideshows. The issue is that the page loads and then the slideshow loads a second later. How do I improve loading speeds of the images? The site is hosted on Amazon. The url is http://gatehouse75.com to see what I mean.
There are a few ways you can do this:
Optimise image sizes. For example, images used on the front banner are 1920x1610. However, most screens are not that large. Use different sizes based on view port (screen size).
Reduce image sizes by changing compression and/or using a different format.
Preload images when the users visit certain parts of the site. That way when users get to a page with a gallery the images get served from the browser cache.
Finally, you can put a "loading" notice while images load if none of the above suggestions help. This is good for usability.
Convert your jpgs to lower quality and your logo (in png) to gif in grayscale. This should save a lot of space.
Right now the home page slideshow images are scaled to 1349 X 429 for me. I am using a laptop. The actual size of the images on the server is 1920 X 610 (at least the one that I inspected). This means two things: (1)The image served is a larger filesize than need be which takes bandwidth, and (2)that the served image needs to get scaled down which takes client time.
What is the max width for this slideshow? It is a fullscreen slideshow, so I understand why the chose to use the bigger image. Though maybe you can take the original compress and resize in a way that is acceptable?
You can also consider having a loading .gif in place while the content loads.
Also, go through and minify linked files... css, js.
1. Follow image file optimization best practices.
2. Use a fast CDN combined with a smart caching strategy.
3. Put your above-the-fold image refs (especially large "hero" images) in an inline stylesheet, immediately inside the <head> tag, in the html element selector, like this:
<head>
<style> html { background: url(/hero.jpg) no-repeat -9999px -9999px; }
</style>
This will get you the fastest time-to-visible for the images that impact perceived page speed the most.
after logging in to facebook, if you right-click on the image meant to show friend requests just beside the facebook logo at the top left side of the page, and inspect the result in google chrome, you find the css rules as #fbRequestsJewel.hasNew a.jewelButton. This is the background image url there.
Number of images inside it and i think those individual images are used in different places in FB,
How is that done? Is it image mapping or what? Why to do in that way instead of using separate images? What are the advantages?
It's called a CSS sprite and is basically an element that uses background-image and background-position to reuse a single image to show many different smaller images.
It's done to speed up the time taken for a page load load, as each resource the browser requests adds an overhead of an additional HTTP request.
A List Apart has a great article on the usage of CSS sprites.
It's called Sprite may be you have to check this answer
How to make a single image, treated as three different images?
check this article for more http://css-tricks.com/158-css-sprites/
hi this is called css sprite on images
Basically when we have individual images on server we have to load each images seperatly.
this will load the image in one single server trip and using css background-position we can displayed the image which we want where ever we need.
You can refer this website for simple and complete understanding of css sprites.
CSS SPRITES
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.