Community Forums › Forums › Archived Forums › Design Tips and Tricks › Backstretch Image Load Timing
- This topic has 7 replies, 3 voices, and was last updated 8 years, 9 months ago by CYBERsprout.
-
AuthorPosts
-
June 19, 2015 at 9:57 pm #156887CYBERsproutMember
I've run GTmetrix, pingdom, and webpagetest on my site and it is loading fine enough for speed but the backstretch image appears to load towards the end. It makes the site appear much slower. Is there a way to give it a higher priority so it loads much sooner in the order?
http://cybersprout.netJune 19, 2015 at 10:35 pm #156893ChristophMemberHi,
since you are using Cloudflare and Rocketscript I would ask their support.
They have their own algorithms and way of doing things.
It would probably be like fighting against windmills...
June 19, 2015 at 11:23 pm #156902CYBERsproutMember@Christoph thanks for the quick reply!
What is weird is that the background image loads instantly. Only the backstretch image option takes much longer. I would use the background image option for this reason but it doesn't cover the whole background. Is there some CSS I could use to make the background image fit the whole width and height of the screen?
June 20, 2015 at 12:00 am #156903ChristophMemberYou could try background-size: cover;
But you might run into browser compatibility issues: http://caniuse.com/#search=cover
June 20, 2015 at 12:33 am #156904Erik D. SlaterMemberTypically, backstretch images are loaded by JavaScript when the document is "ready". So there will be a bit of a lag there anyway. If you try out some of the StudioPress demos (e.g. Sixteen Nine Pro, The 411), you will notice the backstretch image load situation.
But - and as my buddy Christoph mentions - you are using CloudFlare's Rocket loader to handle a lot of JavaScript resources - 18 to be exact. That requires JavaScript to load those JavaScript resources ... which means it has to inject the JavaScript code into your HTML so that it can run that JavaScript code to then download the JavaScript from CloudFlare ... and that includes the loading of jQuery, upon which everything depends . This will likely slow down your page load time.
Also, GTmetrix only sees 57 resources being loaded. Your home page is requesting 77 resources ... 18 of those 20 being the rocket loader stuff.
As for the background images ... they load instantly because they are regular image resources requested via the HTML
<img>
tag.You could try not using the rocket loader option in CloudFlare ... then allow CloudFlare to cache the data-rocketsrc-declared JavaScript files directly.
Does any of this make sense to you?
Erik D. Slater: Digital Platform Consultant • LinkedInJune 20, 2015 at 10:03 pm #156965CYBERsproutMember@Erik yep, that all makes perfect sense. Thank you for the detailed answer!
Ideally, I would love to just use a background image but the one in the WP customizer doesn't stretch the whole screen so it looks odd (https://www.dropbox.com/s/r7ig5un03cc1bet/Screen%20Shot%202015-06-20%20at%2010.59.01%20PM.png?dl=0). I tried searching the styles.css file to fix the background image to fit 100% of the height and width, but I can't seem to find the right fix. Any suggestions?
June 20, 2015 at 11:36 pm #156970Erik D. SlaterMemberI would love to just use a background image but the one in the WP customizer doesn’t stretch the whole screen
It's all stretchy from what I can see 🙂 You may need to clear caches, do a hard refresh, etc ... unless it was a problem and you fixed it in the meantime ... but it did look OK earlier, as I recall (although I can't truly remember) 🙂
Oh ... and you won't find it in style.css ... but you will find it in this code snippet (taken from view-source):
<script type='text/javascript' src='http://cybersprout.net/wp-content/themes/agency-pro/js/backstretch.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var BackStretchImg = {"src":"\/\/cybersprout.net\/wp-content\/uploads\/2015\/06\/Background-Top.png"}; /* ]]> */ </script> <script type='text/javascript' src='http://cybersprout.net/wp-content/themes/agency-pro/js/backstretch-set.js'></script>
And while I was in there, I noticed you applied some changes ... and there is a significant difference in your page load time compared to earlier 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInJune 22, 2015 at 10:48 am #157174CYBERsproutMemberThe backstretch image works just fine. It's the background image option that is shown in the Dropbox image above. I didn't push it live so you won't be able to see it on the site.
I did make a lot of changes to help out with the speed by analyzing the waterfall from Pingdom and webpagetest.org. They are super useful tools!
Thanks for all the insight!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.