Foobox Lightbox Plugin

regarding the lightbox, chances are you have inline CSS which gets optimized as well, try to exclude that and see if it solves your safari-issues.

woff-files can be inlined in the CSS, but AO currently does not do that (depending of the size of the woff-files it might be counter-productive actually, as the file-size of your CSS-file will grow significantly as the woff-file has to be base64-encoded first, which adds size).

frank

Excluding it from css is ok. But i gtmetrix, google pagespeed said to minify it. I want to merge it into 1 single css file as I want fewer http request. Would it be better to copy googlepagespeed optimized file and load it into the foobox plugin folder? Thanks in advance.

You can use the tool here to do the conversion to CSS:

https://www.fontsquirrel.com/tools/webfont-generator

Excluding it from css is ok. But i gtmetrix, google pagespeed said to minify it. I want to merge it into 1 single css file as I want fewer http request.

Well, sometimes some CSS or JS has to be excluded in order for a site to work. You could alternatively go outside of Autoptmize, diving into the foobox specifics, trying to change its CSS slightly (sometimes just adding an “!important” is enough).

frank

Thanks superpoincare and Frank Goossens. What about copying the optimized file downloaded from Google Pagespeed Insight directly into the plugin folder to replace the original file?

Quan88,

I have faced small issues downloading Google’s optimized files and using them. Some small error happens somewhere, such as with sidebar size, font etc.

This is because some minification algorithms are a bit aggressive and some bugs appear. Order of sentences in CSS is important and some aggresive minifiers, although don’t ignore this fact, they do not consider all sources of errors.

Hi thanks superpoincare. Appreciate your feedback. I will just ignore the optimized files.

By the way, as of today, I still can’t manage to find out why the warning “Minify HTML for the following resources to reduce their size by 885B (4% reduction).”

This size fluctuates between 3% to 5% all the time. It only happens this month. Previously was non existent. Care to have a look at my site?

No idea Quan88.

Sometimes Pagespeed behaves strange. If your score is high, it doesn’t complain on such things. I checked it on my own site sometime back and it didn’t complain about HTML when I didn’t do it.

I think once you solve other issues, such things start to not matter.

Also about the woff, I see your css is loading the woff file using @font-face. Pagespeed is not complaining about the woff at all. It is just suggesting you eliminate css from top.

I think the biggest point of Pagespeed is to inline plus defer CSS and defer loading Javascript.

(So even if I don’t combine JS in my sites, it doesn’t matter – that it should load not be render-blocking is the important thing.

So first try

1. Inline + Defer CSS
2. Load JS files late.

Then worry about merging files into one.

Hi superpoincare,

jquery/1.7.2/jquery.min.js if defer will not work for foobox. (same if minify)

enterprise-pro/js/responsive-menu.js if defer will not show the hamburger menu instead, it shows every item in the menu. (same if minify)

Real headache.

Hi Quan88,

I am not familiar with Autoptimize JS – know only about its CSS, and here’s how I do it. (But which one are you using WP Rocket?)

I use jquery’s CDN file and move it to the footer. And then I use W3 Total Cache and queue other JS files and choose options to load them non-blocking and put them before </body>. See W3TC Minify options.

So all dependencies are respected and I don’t have an issue.