UPDATE (21-Oct-2015): I got a workaround from the plugin authors (ThemePunch) and put it below.
So recently a bunch of our websites started suffering poor performance and very slow load times. Upon inspection of the HTML, we found a huge block of inline CSS (inline so its not even cached but loaded every time the page loads).
When I downloaded the HTML of one of our pages, it was 1.37Mb (this is just the HTML, no external files, images, etc).
Here’s a very small sample of it to give you an idea (and to help others fine this page via search engines):
background:-moz-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba (227,58,12,1)),color-stop(100%,rgba(234,91,31,1))); background:-webkit-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); background:-o-linear-gradient (top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); background:-ms-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%); background:linear-gradient(to bottom,rgba (227,58,12,1) 0%,rgba(234,91,31,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33a0c',endColorstr='#ea5b1f',GradientType=0 )}.fullrounded img {-webkit-border-radius:400px;-moz-border-radius:400px;border-radius:400px}.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz- transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption a{color:#ff7302;text- shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover {color:#ffa902}.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms- transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption a{color:#ff7302;text-shadow:none;-webkit- transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out
So the opening tag for this block has the ‘rs-plugin-settings’ in it, which shows us that its being generated by Revolution Slider:
The Solution
When I got in touch with the authors (ThemePunch) they said that this bug was only present in older versions and that updating to the latest would solve it but for me that was not the case - I was already using the latest version.
Fortunately the work around was simple:
Go in to the slider on the page that is bloated:
Go in to CSS Global option for it:
Delete all of the duplicate CSS - in my case it was the CSS below that was repeated over and over so I left one copy of it (if in doubt, save a copy of it in case there is some theme specific stuff in there if your plugin came bundled with a theme):
Once saved, you're all set!
Bob
I found your page as I have the same problem with my website, it seems that you have a solution to the issue but there is nothing visible on the page. Could you please let me know what the solution is?
Hi Tonie,
Apologies – I don’t know what happened to the reset of the article but I re-did it for you!
Bob