Header image lagging when website opens

  • I’ve added a header image to my wordpress website (oceanwp) using the “customize” tool and by placing the following code in my Custom CSS/JS box:

    #top-bar-wrap, #top-bar-content strong {
    color: #ffffff;

background-image: url(https://www.brazosmg.com/new/wp-content/uploads/2020/01/white_header.jpg”) !important;
	background-repeat: no-repeat;
	margin-top: 30px;
	padding-top: 30px;
}

    For some reason, the header image always lags a couple seconds loading behind the rest of the site. So the site opens with a blank header background and a few seconds later the header image pops open. I can’t tell if it’s just my computer, or if this happens to everyone who opens the site.

    This is slightly annoying me. Can someone take a look and tell me what I might be able to do to correct this lag?

    Thanks
    Saranee

    • This topic was modified 5 years, 2 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    It’s slow in appearing because it’s one of the last resources loaded. It doesn’t appear until nearly everything else has already been loaded. It has to do with how CSS code gets parsed, the details of which are beyond my understanding. It would load sooner if it were a proper foreground element instead of a background style. After all it’s not really a background anyway.

    Displaying nearly the entire header as a foreground image would be something managed by your theme, so I recommend asking how to do so in your theme’s dedicated support forum.

    You might consider presenting the site title as appropriately styled text instead of including it as part of the image. Only the logo itself would be an image, still as a foreground element and not a background style. Doing so would be more performative and responsive than text as image.

Viewing 1 replies (of 1 total)
  • The topic ‘Header image lagging when website opens’ is closed to new replies.