Ever wonder what your website would look like if background images failed to display? For our clients that have Luminate CMS hosted websites, this was a reality for them in the Google Chrome browser. To understand why this was an obvious concern for them, take a look at the alternating images below. The first website image is displaying all the background images. The next image, however, looks a bit off. When the background images failed to load, the website lost some crucial design elements.
Let’s take a look:
What are the issues?
- The missing transparent background behind the slideshow caption makes it hard to read the white text.
- The lack of slide indicator buttons and arrows means there is no visual cue to the visitor that they can navigate through these items on their own.
- The section headers are gone, leaving the visitor to wonder why these items are grouped together and how they relate?
- And finally, the gradient background image behind the Features and Ways to Help sections means they lose some design flair as it defaults to white.
All these missing elements affect a user’s experience and makes your site feel incomplete. Now for the big question:
Why is this happening?
During our several hours of troubleshooting, debugging and basically pulling our hair out, what we discovered is that Luminate CMS automatically initiates an asynchronous redirect for new visitors in order to create a standardized session between Luminate CMS and Luminate Online. This redirect action prevents modern versions of Google Chrome from processing and displaying background images defined in external stylesheets, most likely due to a caching anomaly. Feel free to rejoice along with us! Figuring out what was causing the issue was half the battle.
Now on to the solution: fix, hack? Nah, let’s go with “work around”
The script we created prompts Chrome to reprocess stylesheets after the aforementioned redirects by cloning all LINK elements on the page, changing their rel attributes to prefetch, injecting them into the HEAD element then switching their rel back to stylesheet. This approach causes Chrome to reprocess the stylesheets without redownloading them, which is beneficial from a performance perspective. To ease implementation across the various Luminate CMS client architectures, this script does not rely on any third-party libraries (ex. jQuery). Also, all logic is wrapped in an immediately invoked function expression to protect the global scope. Further, the core logic is only invoked in Google Chrome and only when the visitor’s session changes so there is negligible performance impact.
So what are you waiting for?
Head on over to our GitHub and get the open source script. Let us know how happy this script made your Luminate CMS clients.
Special Thank You to NSALA
Special thanks go to the North Shore Animal League America who allowed us to feature them in our blog post and are very pleased with the result.