I rebuilt a client's website that was already using a number of Toolset plugins (Types, Views, Cred, Woocommerce Views) with Toolset Layouts and Genesis integration.
There appears to be a problem that's preventing the stylesheet from loading immediately, Instead, for a split-second before any page loads, you can see the default Genesis Sample Child Theme style.
I've tried deactivating all plugins (other than Toolset and Woocommerce), but the problem remains.
I switched to the default 2016 theme and the problem was not evident.
You can see the site at hidden link
For what it;s worth, everything is up to date and it's hosted by WP Engine (the problem is also evident on the staging site).
Please advise.
Thanks
Dawson
Dear Dawson,
Which stylesheet (CSS file) should be loaded immediately?
I just tested the problem URL with Chrome browser, see screenshot 683.JPG,
I can see almost all CSS file are loaded within one or two seconds, except some CSS file from outside of your website.
Stylesheets load, but the default Genesis child theme style seems to load first on every page, which shouldn't happen and does not happen on other sites I'm using Toolset Layouts/Genesis on - e.g.,
hidden link
hidden link
The stylesheet that should load is the one that loads after that split second when it seems that the default stylesheet loads.
As it is, it's a little jarring and bad user experience.
The site was originally built on Pagelines and did not have any such problems.
The client is unhappy and I need to get this fixed.
If you need access, I have a copy of the site on a staging area so you would be free to do whatever you need to do.
Please advise.
For the problem:
the default Genesis child theme style seems to load first.
Does it exists when you deactivate even the Toolset plugins(included in the Layouts plugin), if it still exists, this might be a problem of your custom child theme.
I searched in google, find this thread:
http://wordpress.stackexchange.com/questions/51234/how-do-i-queue-my-child-stylesheet-s-after-every-parent-stylesheet-statement
Hope it help
I did as instructed and the problem disappeared after deactivating all Toolset plugins.
I reactivated each one individually and found that the problem returned when I reactivated the Toolset Genesis Integration plugin.
Thanks for the details, I am trying to duplicate same problem in my localhost, will feedback if there is anything found
I tried with the original Genesis theme, but can not duplicate same problem, since we are talking about the Genesis child theme "Genesis Sample", but I do not have a copy of it in my localhost, could you post a downloadable URL for theme "Genesis Sample"?
I need test and debug it in my localhost, thanks
Sample child theme is protected in the member's area, so I can't share a link, but the problem does not appear to be with the child theme because I activated Genesis and the problem persists.
I contacted WP Engine support (who's hosting the site) to see if they could provide any insights and they found that rendering is starting before everything is loaded to the browser.
Here's a link to the Web Page Test they ran for the problematic site:
hidden link
They also ran a test on one of the other installations I've got with them (that's also using the Genesis Sample child theme and a bunch of Toolset plugins, including Layouts and the Layouts / Genesis integration plugin):
hidden link
No such problem with that one.
All plugins and themes are up-to-date.
Please advise.
Are we talking about the CSS file?
wp-content/themes/genesis-sample/style.css
Should it be loaded after other CSS files?
I can see in below URL:
hidden link
Above CSS file is loaded in the "Request 2"
But in the second URL you provided:
hidden link
There isn't any information mentions CSS file "style.css", when and where should it loaded?
As I mentioned above, I do not have a copy of "genesis-sample" theme, so I can only test with original "genesis" theme, here is the screenshots:
1) without "Toolset Genesis Integration" activated:
see screenshot 211.JPG
the CSS file "themes/genesis/style.css?ver=2.3.0" is loaded in 4th place.
2) with "Toolset Genesis Integration" activated
see screenshot 211.JPG
the CSS file "themes/genesis/style.css?ver=2.3.0" is loaded in 6th place.
Both cases, the CSS file "themes/genesis/style.css?ver=2.3.0" are loaded in very high level, and above most other CSS files.
Please correct me if there is anything missing.
As mentioned, I activated the standard Genesis theme on the staging site - so no child theme is involved on the staging site - and the problem remains.
You can see it here: hidden link
Webpage Test reports the same issue on the staging site (FirstPaint / rendering is happening before everything is loaded to browser).
I also remembered that I was migrating a real estate client off of PageLines and onto Genesis / Layouts - in staging area - and there's evidence of the same problem (though not as severe):
hidden link
That one is using the Genesis Sample child theme, but, as mentioned, the theme does not appear to be the issue because the staging version of the other site is using the regular Genesis theme.
Web page test shows the same problem for the real estate website (FirstPaint / rendering happening before everything is getting loaded to the browser):
hidden link
Webpage Test shows that problem does not happen on the production site (FirstPaint / rendering is happening after everything is loaded), which is using PageLines:
hidden link
I've been loading the site in Chrome so, just to see, I decided to load it up in a few other browers.
Here are the results:
Safari - appears to load fine
Edge - appears to load fine
Explorer - total mess
Anyway, I'm going to fiddle around further with the staging site for the florist website (unable to do so with the real estate website because we're no longer working with that client) over the next couple of days and will report back if I find anything out or require further assistance.
Can we make the questions more clearly?
1) Are we talking about the CSS file?
wp-content/themes/genesis-sample/style.css
2) If it is, Should it be loaded after other CSS files?
When should it be loaded in the Chrome browser?
As I mentioned above, I have tested both cases:
1) without "Toolset Genesis Integration" activated:
the CSS file "themes/genesis/style.css?ver=2.3.0" is loaded in 4th place.
2) with "Toolset Genesis Integration" activated
the CSS file "themes/genesis/style.css?ver=2.3.0" is loaded in 6th place.
In both cases, the CSS file "themes/genesis/style.css?ver=2.3.0" are loaded in very high level, and above most other CSS files. So I am not sure when should the CSS file be loaded into Browser.
I need test and debug it in my localhost, thanks
Hi Luo
I'm still trying to get to the bottom of this.
I've been quite busy over the past couple of weeks and haven't had the time to look at it further, but I will get back to you shortly.
Thanks
