Autoptimize and google insights - optimization

I am using autoptimize plugin for wordpress speed.
When i do speed test on google insights its showing the autoptimize files in the errors.
What could be the solution for this.
I am getting autoptimize.js file as error in "Eliminate render-blocking resources"
As well in "Remove unused CSS"
PLease have a look at the snapshot and suggest some solution for this.

There should be a setting in autoptimize to inline and defer itself. That should prevent the error, because I think it will delay any non critical css and js from loading until after the initial page load. But I was just googling about a similar thing and saw a few warnings about what is and is not critical css/js being moved around, so I wouldn't trust it too much.
That css error you have showing can be addressed by either removing the import from the page totally, if that is possible, or maybe split it up and only load the smaller portion needed for that page. So if you check the inline and defer option, and remove that css file by removing the import line, you should be good to go.

Related

IHP - Morphdom interfering with other JavaScript (e.g. DyGraph)

I am using IHP and IHP's use of Morphdom and / or Turbolinks seems to interfere with some other JavaScript things when the page isn't a fresh load. This includes things like Elm apps, and in this example, Dygraph:
Uncaught ReferenceError: Dygraph is not defined
at HTMLDivElement.<anonymous> (<anonymous>:51:33)
at Function.each (jquery-3.6.0.slim.min.js:2:3209)
at E.fn.init.each (jquery-3.6.0.slim.min.js:2:1687)
at HTMLDocument.initCharts (<anonymous>:40:25)
at HTMLDocument.dispatch (jquery-3.6.0.slim.min.js:2:42842)
at HTMLDocument.v.handle (jquery-3.6.0.slim.min.js:2:40826)
at Object.e.dispatch (turbolinks.js:5:1411)
at r.notifyApplicationAfterPageLoad (turbolinks.js:6:1175)
at r.visitCompleted (turbolinks.js:6:1800)
at r.complete (turbolinks.js:5:24022)
In this case I am setting up a graph using Dygraph and using the following to try to initiate it upon the Turbolinks loading in:
$(document).on('ready turbolinks:load', initCharts);
which I thought would fix this because it would call the function only when Turbolinks had loaded the page. But this doesn't seem to have helped.
Essentially it seems like the Dygraph js is not loaded before it is called later in the page. This only seems to happen when we come from another page using Morphdom. The temporary fix is to refresh the page when the graphs won't load, but this is definitely not a great long-term solution.
How can I properly load in new JS files in IHP without Morphdom getting in the way? How might we fix such things?

Ajax Doc Cart for virtuemart not working

mod_ajax_dock cart Not working in which come following error.
this.load undefined or can not Cannot read property 'style'.
so plz help me solve this question
That's generally a Javascript conflict caused by the various scripts that your site is loading. The first place to start is to install jQuery Easy to strip out multiple instances of jQuery as well as the usually loaded Mootools. You will have to mess around with the settings, I usually have it strip everything out and see what breaks, then start adding scripts back in until everything works.
http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

video.js.map throwing a 404 (Not Found)

Playing around with the newest video.js today, I'm noticing that video.js.map is showing up as a 404 when putting the video.js script into a site that I'm working on.
I don't see a source map file in the initial distribution, but it doesn't throw this error locally, only when I put it on a server.
Ideas as to solving?
You have a few options when you don't have access to a source map:
Ignore the message. It generaly only gets thrown when your dev tools are open.
Remove the reference in the original file. These are the last characters (comments) at the end of the file.
Generate a source map yourself when you have access to the source code. For video.js, it can be generated from video.dev.js.
Use a public CDN version which might not link to the source map.
There also is a discussion on GitHub about this topic.
I get the same error, everything should still work though. I think it's an html5 or browser bug
I was seeing this as well, but only in my log files. I was getting three multi-line entries (failures) every time a video was played in my production.log in a RoR site. It was really bulking up my .log file. More info on #smhg's 2nd bullet (remove references). I'm using video.js 5.4.6 along with some vpad-vast plugin stuff - I could see all three files referenced in my .log file. Your mileage may vary.
Edit video.js and remove the following entry on line 19694:
//# sourceMappingURL=video.js.map
(for vpaid-vast plugin only...)
Edit videojs_5.vast.vpaid.min.js and remove this line from the very end:
//# sourceMappingURL=videojs_5.vast.vpaid.min.js.map
Edit videojs.vast.vpaid.min.css and remove this line from the very end:
/*# sourceMappingURL=videojs.vast.vpaid.min.css.map */
The entries are no longer appearing in my log file and the player works fine.
Hope it helps!

How to stop firefox from downloading and applying CSS via a firefox extension?

Thanks to everyone in advance -
So I have been banging on this issue for quite a while now and have burned through all my options. My current approach to canceling css requests is with nsIRequest.cancel inside of nsIWebProgressListener.onStateChange. This works most of the time, except when things are a little laggy a few will slip through and jump out of the loadgroup before I can get to them. This is obviously a dirty solution.
I have read through the following links to try and get a better idea of how to disable css before a nsIRequest is created...no dice.
https://developer.mozilla.org/en/Document_Loading_-_From_Load_Start_to_Finding_a_Handler
https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request
https://developer.mozilla.org/en/Bird's_Eye_View_of_the_Mozilla_Framework
How do I disable css via presentation objects/interfaces? Is this possible? Inside of nsIDocShell there are a few attributes that kind of imply you can disable css via the browsers docshell - allowPlugins, allowJavascript, allowMetaRedirects, allowSubframes, allowImages.
Any suggestions?
Thanks,
Sam
The menu option that disables style sheets uses a function
setStyleDisabled(true)
so you probably can just call this function whenever new browser tab is created. Style sheets are still requested from server, but not applied. This function is not very sophisticated and doesn't mess with nsIRequest, source:
function setStyleDisabled(disabled) {
getMarkupDocumentViewer().authorStyleDisabled = disabled;
}
Digging in Web Developer Toolbar source code I have noticed that their "disable stylesheets" function loops trough all document.styleSheets and sets the disabled property to true, like:
/* if DOM content is loaded */
var sheets = document.styleSheets;
for(var i in sheets){ sheets[i].disabled = true; }
So if the key is to not apply CSS to pages, one of the above solutions should work. But if you really need to stop style sheets from being downloaded from servers, I'm affraid nsIRequest interception is your only option.
Set permissions.default.stylesheet to 2 and voilĂ !
You can actually use the permissions manager to block or allow stylesheets on a host-by-host basis.
Unfortunately there doesn't seem to be a simple flag like allowImages. The bugzilla adding for that is https://bugzilla.mozilla.org/show_bug.cgi?id=340746. You can now vote for it using the new bugzilla voting functionality. You can also add yourself to the CC list to be notified if anyone ever works on it.
A related request is to just give us basic HTML parsing support, which may be what you are trying to do. Unfortunately that isn't supported yet either, but you can vote/track the bugzilla for that at https://bugzilla.mozilla.org/show_bug.cgi?id=102699.
So the only workable solution seems to be some sort of interception as #pawal suggests. Here is a link that talks about the basics of interception to at least get you/us started https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads. It lists several options that I list below.
These first few seem to just be at the page/document level so I don't think they help:
Load Events (addEventListener load)
Web Progress Listeners (nsIWebProgressListener) - I tried this approach, it only seems to be called for the page itself, not for content within the page.
Document Loader Service - A global version of nsIWebProgressListener so I think it has the same problem (page level only)
That leaves two others I have not tried yet. They work globally so you would need to filter them to just the browser/pages you care about.
HTTP Observers - Seems like it might work, need to verify it calls back for CSS
Content Policy - Seems like the best option to me since it explicitly is called for CSS, someday I hope to try it :)

Solve IE6 static content caching issues on IIS6

I'm currently experiencing problems with static content - most noticeably jQuery datepicker images, but also other static files - which results in images/static content loaded many times - I can clearly see it in IE6 status bar (not to mention SLOW rendering).
The problem and possible solutions seems to be described here: http://www.explainth.at/en/tricks/flickfix.shtml. However, I use IIS6 not Apache, and static files that I don't want to feed through php or asp.
How do I make IE6 cache static images properly? How do I add custom response header for specific files/folders?
Hm, let met re-phrase it. I'm not sure it is caused by the bugs above. Actually, I tried appcmd to apply cacheControlMode/etc and it doesn't seem to work. As far as I remember, IE6 also does not cache for XMLHttpRequest calls? So, the biggest problem that I need to solve is:
in jQuery calendar, moving mouse over image buttons (prev/next) causes them to be reloaded-refreshed
in jQuery dialog, each dialog('open') causes images from theme (like header background) to be re-loaded/refreshed
etc
This link probably gives a better explanation: http://ajaxian.com/archives/internet-explorer-and-ajax-image-caching-woes
How do I solve this - that is, without feeding images through ASP.NET to setup headers?
Thanks everybody for listening, the trick with appcmd seems to work ;-) The problem was that I used jQuery theme from googleapis... which obviously was not affected by appcmd ;-) Moving theme to local folder did the trick. These are the commands:
\Windows\system32\inetsrv\appcmd.exe set config "Default Web Site/images" -section:system.webServer/staticContent -clientCache.cacheControlMode:UseMaxAge
\Windows\system32\inetsrv\appcmd.exe set config "Default Web Site/images" -section:system.webServer/staticContent -clientCache.cacheControlMaxAge:"01:00:00"
from http://forums.iis.net/t/1067723.aspx