No announcement yet.

Problem with image loading time - especially background image via custom css

  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with image loading time - especially background image via custom css

    I am redesigning a neglected site. It has a grayscale image of about 220 KB in the background of the front page. This is the custom css that loads it:

    body.home {
    /* Location of the image */
    background-image: url(;

    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;

    /* Background image doesn't tile */
    background-repeat: no-repeat;

    /* Background image is fixed in the viewport so that it doesn't move when
    the content's height is greater than the image's height */
    background-attachment: fixed;

    /* This is what makes the background image rescale based
    on the container's size */
    background-size: cover;

    /* Set a background color that will be displayed
    while the background image is loading */
    /* background-color: 000000; */

    When running several different page load tests, I see that the background image is the last item to begin loading and it takes a long time to load. This is true whether I run the page without caching or with any of several cache systems, configured several ways. I also had the problem when using a plugin (rather than custom css) to serve the background image.

    I know that 220k is a pretty big file. But I can't reduce it any more without wrecking it. And the 220K would be manageable if the image started loading earlier than the tail end. While other elements of the page load cooperatively, the background image is always starting late and finishing later.

    Any way to make the image start and finish loading earlier? Please don't recommend further smushing or the like.

    I have the same problem with five very small png files: they start loading later than css and js files. In fact, it looks like the four icons for social links like twitter and facebook are worse slowing factors than all the css and js files served by the page.

    Advice would be appreciated.

  • #2
    More to find maybe if you google "preload large background images" like I did with this one.
    Another (just kinda "fake") way is to fade in such pics from a fitting background color - it makes for a nice effect, if the loading time isn´t all too long.

    Not sure what to say about the small png images - no way to inspect as we can´t see them...
    Last edited by SiGa; 09-05-2015, 10:15 PM.