Problem with option “Optimize HTML Code” and “Revolution Slider”

Resolved wpuser10
(@wpuser10)

9 years, 8 months ago
Hello,

In the Autoptimize plugin settings I am using option “Optimize HTML Code”. The only problem I have is with the “Revolution Slider” plugin output code, becuase after checking the code with https://validator.w3.org/ I get lot of errors like for example this one:
```
Error: No space between attributes.

At line 220, column 18

ta-end="899400"style="z-index:
```
Didn’t get similar errors when using other plugins or shortcodes with inline styles, etc..

Could you please help to correct it?

Viewing 15 replies - 1 through 15 (of 24 total)

1 2 →

Plugin Author Frank Goossens
(@futtta)

9 years, 8 months ago

can you share your site’s URL wpuser10 (here or via futtta-at-gmail-dot-com)?

Plugin Author Frank Goossens
(@futtta)

9 years, 8 months ago

I tried to reproduce this myself but did not succeed in doing so, so I would need to see what is going on on your site @wpuser10.
Thread Starter wpuser10
(@wpuser10)

9 years, 7 months ago
To replicate please:

1) Install latest WP with for example “Twenty Sixteen” theme.
2) Install and activate latest version of Revolution Slider and Autoptimize.
3) Set the basic option “Optimize HTML Code?” in Autoptimize.
4) Import (Slider Revolution > Import Slider) for example this slider: http://revolution.themepunch.com/wp-content/uploads/2015/08/classicslider4.zip (it’s example from https://revolution.themepunch.com/free-slider-exchange/)
5) Create new page (Pages > Add new) and put this shortcode in text editor: [rev_slider alias="classicslider1"]
6) Test page using: https://validator.w3.org/ . You will see errors, like this:

“No space between attributes.”

Hope this helps you to investigate and improve the plugin. Revolution Slider support suggested to contact you in this case. Please let me kow if you need more details. I was able to replicate this on different hosts. If you still couldn’t replicate then I could send you URL to check via e-mail (please let me know if still needed).
- This reply was modified 9 years, 7 months ago by wpuser10.
- This reply was modified 9 years, 7 months ago by wpuser10.
- This reply was modified 9 years, 7 months ago by wpuser10.
Plugin Author Frank Goossens
(@futtta)

9 years, 7 months ago

OK, I see what is happening; revslider is putting each attrib/value pair on a new line (don’t know why), and the HTML minifier AO uses keeps the linebreak but given the linebreak it considers it can safely remove the space.

Now As;
* revslider continues to work
* you could simply disable HTML optimization

I’m not considering this a priority issue, but if you want I could provide you with a code snippet that hooks into AO’s API to change the newlines into spaces?

frank
Thread Starter wpuser10
(@wpuser10)

9 years, 7 months ago
I’m not considering this a priority issue, but if you want I could provide you with a code snippet that hooks into AO’s API to change the newlines into spaces?

I see, yes, that would be great, becuase I don’t want to disable “Optimize HTML Code”, becuase this will affect the ranking in GTmetrix, etc.
It would be great to use your code snipped for now to quickfix it and it would be also great if this can be later implemented in the future release of Autoptimize, because Revolution Slider is very popular.
- This reply was modified 9 years, 7 months ago by wpuser10.
Plugin Author Frank Goossens
(@futtta)

9 years, 7 months ago
OK, give this a try;
```
add_filter("autoptimize_html_after_minify","revslider_fixerupper");
function revslider_fixerupper($htmlin) {
  $htmlout=preg_replace('#\n(data-.*$)\n#Um'," $1 ",$htmlin);
  $htmlout=str_replace('"data-','" data-',$htmlout);
  return $htmlout;
}
```
frank
Plugin Author Frank Goossens
(@futtta)

9 years, 7 months ago
this one is better (more generic);
```
add_filter("autoptimize_html_after_minify","revslider_fixerupper");
function revslider_fixerupper($htmlin) {
  $htmlout=preg_replace('#\n(data-.*$)\n#Um'," $1 ",$htmlin);
  $htmlout=preg_replace('#(=\"[^"]*\")(\w)#','$1 $2',$htmlout);
  return $htmlout;
}
```
- This reply was modified 9 years, 7 months ago by Frank Goossens.
Thread Starter wpuser10
(@wpuser10)

9 years, 7 months ago
Thank you very much. I checked the first code and it didn’t work with my slider, but second code works very good, so that now I don’t have any errors from HTML5 validator. Finally I modified your code slightly to run it only if “Revolution Slider” and “Autoptimize” plugins are active:
```
if (class_exists('RevSlider') & is_plugin_active('autoptimize/autoptimize.php')) :
add_filter("autoptimize_html_after_minify","crevslider_fixerupper");
function revslider_fixerupper($htmlin) {
  $htmlout=preg_replace('#\n(data-.*$)\n#Um'," $1 ",$htmlin);
  $htmlout=preg_replace('#(=\"[^"]*\")(\w)#','$1 $2',$htmlout);
  return $htmlout;
}
endif;
```
Thank you!
- This reply was modified 9 years, 7 months ago by wpuser10.
- This reply was modified 9 years, 7 months ago by wpuser10.
Plugin Author Frank Goossens
(@futtta)

9 years, 7 months ago

great! 🙂

Plugin Author Frank Goossens
(@futtta)

9 years, 1 month ago

hey @wpuser10;
I just committed a fix for this in what will become AO 2.2. you can download the zip-file here and give this a try (overwrite wp-content/plugins/autoptimize with the contents of autoptimize-master in the zip)? looking forward to your feedback 🙂

have a nice day!
frank
viet0viet
(@viet0viet)

8 years, 10 months ago
Hello,

I’m working with Slider Revolution and Autoptimize. Recently we got a 100/100 score in page speed but in testmysite.thinkwithgoogle.com we don’t score really well. So I did found the problem: in autoptimize the option “aggregate js html” is on. If I put this feature on off we score good in testmysite.thinkwithgoogle.com.
But then our slider won’t show. I already tried every combination in autoptimize, in slide settings (slider revolution) and global settings (slider revolution).
Also important to mention: whenever I put the right exclude in autoptimize our page speed goes down.

Does someone know how to fix this problem?

Thanks in advance,

Daniel
- This reply was modified 8 years, 10 months ago by viet0viet.
Plugin Author Optimizing Matters
(@optimizingmatters)

8 years, 10 months ago

will need some more info (i.e. your URL and what specifically changes in “testmysite” when “aggregate JS in HTML” is on vs off) @viet0viet ..
viet0viet
(@viet0viet)

8 years, 10 months ago
Thank you for your response.

This is the url: https://daizy.media
The problem is that testmysite.thinkwithgoogle.com doesn’t give any negative feedback. The report i get from google consists only green positive subjects.
This is the report: https://ibb.co/icr4Ua

Whenever i put the the aggregate js off. i get the exact same report (but only the speed in reduced) But my slider isn’t working then.
- This reply was modified 8 years, 10 months ago by viet0viet.
Plugin Author Optimizing Matters
(@optimizingmatters)

8 years, 10 months ago

ah ok, the problem very likely is that you don’t have a page cache and that you have inline which changes frequently, which results in (a) the page being autoptimized every time (due to no page cache) and (b) autoptimize having to re-minify the JS time and time again which costs time and which makes your cache size grow fast.

solutions:
* disable “also aggregate inline JS” and exclude all of your slider JS from optimization (check your browser console for JS errors for guidance on what is going wrong)
* OR keep “also aggregate inline JS” active but exclude any inline JS that changes, e.g. the JS for the contact widget which you could exclude by adding toAppend+=String.fromCharCode to the comma-separated list of JS optimization exclusions.
* AND implement a page caching solution (e.g. a page caching plugin)

groeten uit een regenachtig Brussel,
frank
viet0viet
(@viet0viet)

8 years, 10 months ago
Beste Frank,

Ik maak gebruik van page caching (WP Fastest Cache). Als ik de optie ( aggregate js) uitzet krijg ik deze melding:

Failure at Presize of Slider:ReferenceError: jQuery is not defined
(index):491 Uncaught ReferenceError: jQuery is not defined
at (index):491
(index):542 Uncaught ReferenceError: jQuery is not defined
at (index):542
autoptimize_be16bac….js:8 JQMIGRATE: Migrate is installed, version 1.4.1
- This reply was modified 8 years, 10 months ago by viet0viet.