Agency Pro – backstretch slow loading and a yellow flash

[Jackdp]

I've already taken changed the fade to a value of; 0 but my backstretch image is still slow and I have this yellow flash that happens just before it loads.

I've tried using .png and now .jpeg format for the image.

Any thoughts as to what I've done wrong would be much appreciated!
Many thanks

http://johnprentice.com

[Christoph]

Hi,

you see the yellow color because the css loads first.

Your image is about 4mb and takes almost 2 seconds to load.

I would optimize the image.
For example, tinypng.com reduced the size to about 160kb.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Jackdp]

thanks for your suggestion - I've run it through tinypng.com (says its now 124kb) and it still flashes yellow - load time looks the same to the untrained eye. I've also emptied the WP library of all the old files to be sure it's the right one loading.

Any idea what I've missed?

[Christoph]

It's much better now.

It looks like there is one link to the old image and quite a bit of delay before the server starts sending data:
http://tools.pingdom.com/fpt/#!/cVlluk/http://johnprentice.com/
A caching plugin or CDN (content delivery network, e.g. cloudflare) might help.
There most likely will be a short flash.
You could change the background-color of body to black or dark gray (around line 148 of the style.css)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Andykev]

Perhaps try changing the .css to eliminate the background color. It's mustard yellow...put it to none.

body {
	background-color: none;
	color: #666;
	font-family: 'EB Garamond', serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.625;
}

[Jackdp]

thanks Christoph - using the tool shows that it's not as slow as I thought it was, when you're tinkering with your own site I guess it's easy to get distracted by the small stuff 😀
I've deleted all the links I could find to that old V4 image but the link still shows up and I get a 404 when I click it. There were 6 version 4 variants in the file address given but not exactly that file so I'm not sure where else it could be.

Thanks again for your help

[Jackdp]

Hi Andy,

thanks so much for your help, I eventually realised that cancelling the fade actually makes for a very startling/jarring transition - it's less noticeable on the theme demo because of the fade. However I got obsessed with loading time 😀

Thanks again - much appreciated.

[Christoph]

You are welcome.

The old image is coming from here:

<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://johnprentice.com/wp-content/uploads/2016/04/jp-test-v4-final-no-text-1600x1000-under-exp-1-e1459774866285.png'); background-repeat: no-repeat; background-position: top left; background-attachment: scroll; }
</style>

Do you still have the old image in the Customizer?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Jackdp]

The customizer being the WP customizer?

If that's the place - no it's not there and I can't find it on the hosting server either.

Is that piece of code in the site CSS?

[Author]

Posts