Ramanan
Forum Replies Created
-
Forum: Plugins
In reply to: [Autoptimize] Foobox Lightbox PluginHi 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.
Forum: Plugins
In reply to: [Autoptimize] Foobox Lightbox PluginNo 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.
Forum: Plugins
In reply to: [Autoptimize] Foobox Lightbox PluginQuan88,
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.
Forum: Plugins
In reply to: [Autoptimize] Foobox Lightbox PluginYou can use the tool here to do the conversion to CSS:
Forum: Plugins
In reply to: [Autoptimize] [Suggest] CSS on the footerFrank,
Thanks for the reply.
Didn’t know about the IE 8 errors. Maybe that’s sufficient reason to not use it as many people still use Windows 7 and never upgraded their IE from IE 8.
Also agree about it not mattering much. I’d think it loads in the background and hence will be available immediately on DOMContentLoaded. However, inline is already painted in either case, so below the fold doesn’t matter, as the user may take some 400ms to move his/her mouse.
Forum: Plugins
In reply to: [Autoptimize] [Suggest] CSS on the footerOr rather body. Inline some and then load the full CSS via requestAnimationFrame:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
<html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'small.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> </body> </html>Forum: Plugins
In reply to: [Autoptimize] [Suggest] CSS on the footerHi Frank and Hans,
The requestAnimationFrame is actually good.
You can even move the script in the header. It loads the CSS async and doesn’t block render.
The advantage is that it – if put in the head – it loads earlier than the present Autoptimize code. The current code first waits for page load and then sends a request to the server for the CSS file. RequestAnimationFrame loads it much earlier.
As far as I can see it will just involve a minor change in Autoptimize code to include it.
Depends on how you added the fonts to begin with.
If your theme has it or if you are using a plugin, it depends on their settings.
But if you are already using <link rel = …>, then you need to remove it and use something like
<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Roboto:300,300italic:latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script>Don’t use this directly, as your choice of fonts may be different. You can obtain this code in Google’s site
https://www.google.com/fonts#UsePlace:use/Collection:Roboto
and then choosing fonts you want, variants and then clicking use and then option 3 (Javascript)
Also I see you are using Autoptimize, you can disable W3 Total Cache CSS minification. So you won’t have a render blocking CSS file.
You can load Google fonts asynchronously. When you use Google fonts, their site also gives a javascript link. Use that.
Yeah maybe that’s the reason.
Thanks. Will try.
Forum: Plugins
In reply to: [Page Speed Optimization] Inline all CSSSaw the latest version of this plugin.
I guess this could be done by using the full CSS and removing CSS files from “CSS-delivery Remove List”
Destac,
What I meant was I get a WSOD even with W3TC JS minify turned off and Autoptimize On. Only if I disable W3TC does the white screen go away. So there is some incompatibility.
Forum: Plugins
In reply to: [Autoptimize] Feature Request: Load HTML head before inline CSSThanks. Works like a charm.
Was experimenting with my own site with Autoptimize JS. It causes a white screen of death even with W3TC JS minify turned off. But when I deactivate W3 Total Cache, it works. So I am only able to use Autoptimize it for CSS.