We're currently using Google Recaptcha V3 across the public-facing portions of our site - while doing Pagespeed Insights performance testing (Mobile), Google themselves is reporting unused/undeferred CSS as a problem on their own Recaptcha css file:
Full resource address is:
https://www.gstatic.com/recaptcha/releases/[...]/styles__ltr.css (so it is clearly coming from a subsequent Google Recaptcha script request)
We are including the original Google recaptcha script with the 'defer' attribute set - not sure what else we can do to cause this css to be deferred such that Pagespeed does not complain about it. Can't find any documentation on the Google Recaptcha site itself to help with this issue.
Does anyone know how to defer this CSS to improve page load time? Not sure if this is somehow a Mobile specific issue, as Pagespeed doesn't report it at all on Desktop.
Firstly, bear in mind that 'remove unused CSS' is more of a guidance point (provided it isn't render blocking), it is indicating that it is wasted bytes (which it actually isn't if recaptcha triggers, as it then needs that CSS to render the image 'are you human check' etc.)
Although I can't give you an ideal answer as it is code you have no control over, I can give you two ways to test it's impact / whether it is actually a problem and a 'hack' to get around the load order.
Test using applied throttling
Simulated throttling can cause unexpect behaviour sometimes, which is what the Page Speed Insights website uses.
If you use the browser audit (which uses the same engine - Lighthouse) to run the tests you have an option to change the throttling from simulated to applied.
Although your score will change (applied throttling is less forgiving than simulated throttling), you get a much more realistic order of events as the latency and slowdown is 'real' vs making best guesses based on loading the page at full speed and applying formula's to guess load times.
Open Dev Tools in Chrome (F12) -> Audits -> Throttling -> set to Applied Slow 4G, 4x CPU Slowdown. -> Run Audits.
See if the problem persists when using this way of assessing page speed.
If it does, a workaround / test for real world performance is as follows:-
Force the script to load after an amount of time (the hacky way!)
This is not an ideal solution but it is good for testing and as a last resort if it does actually slow down your website key load times.
Insert the script dynamically after 5 seconds.
(please note the below code is untested and is likely to not work, it is for illustration only to point you in the right direction. It is highly probable that you don't need the script.onload section and can include that normally)
setTimeout(function(){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function() {
grecaptcha.ready(function() {
grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) {
...
});
});
}
script.src = "https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key";
head.appendChild(script);
}, 5000);
We can use IntersectionObserver to defer Recaptcha script.
var io = new IntersectionObserver(
entries => {
console.log(entries[0]);
if (entries[0].isIntersecting) {
var recaptchaScript = document.createElement('script');
recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?hl=en';
recaptchaScript.defer = true;
document.body.appendChild(recaptchaScript);
}
},
{
root: document.querySelector('.page-wrapper'),
rootMargin: "0px",
threshold: 1.0,
}
);
io.observe(initForm);
We can load the reCaptcha v3 script once after an initial scroll on load:
var fired = false;
window.addEventListener('scroll', function () {
let scroll = window.scrollY;
if (scroll > 0 && fired === false) {
var recaptchaScript = document.createElement('script');
recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=Your_SITE_KEY';
recaptchaScript.defer = true;
document.body.appendChild(recaptchaScript);
fired = true;
// console.log('On scroll fired');
}
}, true);
Code Example:
https://codepen.io/iamrobert/pen/NWazNpd
Page Speed Insight Score
Whenever I try to test a Qualtrics survey in preview mode, Qualtrics.SurveyEngine.addOnload will be called twice. This is not a problem for conditional events (as in most of the examples), but a large problem for unconditional code a timed page change (this will be triggered twice as well). See the following snippet:
Qualtrics.SurveyEngine.addOnload(function()
{
$('NextButton') && $('NextButton').hide();
var that = this;
var timeOutInterval=1000+Math.trunc(Math.random()*10000);
alert(timeOutInterval); //for Testing only
var myVar;
myVar = setTimeout(function(){ that.clickNextButton();}, timeOutInterval);
});
If I launch the survey, this will lead to a page change after 1-11 seconds. If I preview the survey, this change will happen as well, followed by a second change. The alert will be shown twice as well.
Does anyone have a solution, how this functionality could be tested in preview mode?
I've run into Survey Preview issues with JFE as well. There are ways to get around JFE mode and preview in non-JFE mode.
If only care about a specific set of questions in a block and don't care about the survey flow, the easiest solution is to use View Block. It does not use JFE. Go to the Block drop down and choose View Block.
If you need to preview the whole survey, there are tricks to 'break' JFE and force it to non-JFE mode. These tricks seem to be a moving target as Qualtrics makes changes. The best one (easiest) I've found that is working for me today on my Qualtrics account (notice all the qualifiers) is to add an end of survey object to the survey flow, click custom, and check the "Override Survey Options" box.
If that doesn't work, I've found that once a survey gets over a certain size, it doesn't use JFE mode anymore. I don't know what the limit is, but if you add a bunch of fake questions after your end of survey you can trick it that way as well.
Qualtrics links jQuery as of current writing (albeit the shorthand $ is reserved for the prototype.js library).
Following should skip execution of addOnload javascript in the mobile preview:
Qualtrics.SurveyEngine.addOnload(function()
{
if(jQuery(this.questionContainer).parents('.MobilePreviewFrame').length)
{
console.log('Mobile Preview - skipping rest of addOnload');
return true;
};
console.log("Running addOnload()");
// The rest of your code. Log statements can obviously be removed
});
Hope this is helpful
It seems Qualtrics now defaults to JFE mode for live surveys as well. We have been able to resolve this by adding the query string &Q_JFE=0 to the end of our survey URLs, like so:
https://uleidenss.eu.qualtrics.com/SE/?SID=SV_123432434343&Q_JFE=0
This had the additional benefit of solving our issue with JFE mode breaking several of our long time running Qualtrics JQuery experiments.
I am trying to get an error alert scenario working properly with assistive technology. There are two approaches i like which I am testing:
Using ARIA Live Regions
http://pauljadam.com/demos/aria-alert-validation.html
Using ARIA Alert
http://test.cita.illinois.edu/aria/alert/alert1.php
Both of this test pages work fine on Jaws 14 and VDA on PC in that the error is read outloud. However, using a Mac with voice over it does not read the errors in those examples out load.
To reproduce:
go to http://test.cita.illinois.edu/aria/alert/alert1.php
turn on voice over with command+f5
click the guess again button after typing some numbers (the alert should be read).
Is there some non-default setting I need to be away of? Or is there a better way to do this? I'm a little surprised all theses examples do not work.
Here is solution by Steve Faulkner from Paciello Group Blog that supports Safari on Mac:
function addError() {
var elem1 = document.getElementById("add1");
document.getElementById('add1').setAttribute("role", "alert");
document.getElementById('display2').style.clip = 'auto';
alertText = document.createTextNode("alert via createTextnode()");
elem1.appendChild(alertText);
elem1.style.display = 'none';
elem1.style.display = 'inline';
}
<div id="display2" role="alert"><span id="add1"></span></div>
<input type="submit" value="Method 4 alert - display" onClick="addError()">
I need to add a map in my adddon and I know how to do what I need in a "common webpage", like I did here: http://jsfiddle.net/hCymP/6/
The problem is I really don't know how to to the same in a Firefox Addon. I tryed importing the scripts with LoadSubScript and also tryed adding a chrome html with the next line:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
But nothing works. The best solution I found was to add part of the code in this file (the code of the script src) in my function, to import this file with loadSubScript, and all my function is executed but an empty div is returned.
Components.utils.import("resource://gre/modules/Services.jsm");
window.google = {};
window.google.maps = {};
window.google.maps.modules = {};
var modules = window.google.maps.modules;
var loadScriptTime = (new window.Date).getTime();
window.google.maps.__gjsload__ = function(name, text) { modules[name] = text;};
window.google.maps.Load = function(apiLoad) {
delete window.google.maps.Load;
apiLoad([0.009999999776482582,[[["https://mts0.googleapis.com/vt?lyrs=m#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=m#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#227000000"],[["https://khms0.googleapis.com/kh?v=134\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=134\u0026hl=en-US\u0026"],null,null,null,1,"134"],[["https://mts0.googleapis.com/vt?lyrs=h#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=h#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h#227000000"],[["https://mts0.googleapis.com/vt?lyrs=t#131,r#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=t#131,r#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#227000000"],null,null,[["https://cbks0.googleapis.com/cbk?","https://cbks1.googleapis.com/cbk?"]],[["https://khms0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["https://mts0.googleapis.com/vt?hl=en-US\u0026","https://mts1.googleapis.com/vt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"https://maps.gstatic.com/mapfiles/","https://csi.gstatic.com","https://maps.googleapis.com","https://maps.googleapis.com"],["https://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/11","3.13.11"],[3047554353],1.0,null,null,null,null,1,"",null,null,1,"https://khms.googleapis.com/mz?v=134\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"https://mts.googleapis.com/vt/icon"], loadScriptTime);
};
//I can't use document.write but use loadSubScript insthead
Services.scriptloader.loadSubScript("chrome://googleMaps/content/Google-Maps-V3.js", window, "utf8"); //chrome://MoWA/content/Google-Maps-V3.js", window, "utf8");
var mapContainer = window.content.document.createElement('canvas');
mapContainer.setAttribute('id', "map");
mapContainer.setAttribute('style',"width: 500px; height: 300px");
mapContainer.style.backgroundColor = "red";
var mapOptions = {
center: new window.google.maps.LatLng(latitude, longitude),
zoom: 5,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
}
var map = new window.google.maps.Map(mapContainer,mapOptions);
return mapContainer;
Can you help me? I'm developing a "Firefox for Android" addon and that's why I need to do things like *window.content.*document.createElement because document is not declared, only window and I think thats may be the problem... But I can't declare everything if I don't know what Google Maps uses.
Added: I also read that Google Maps API Team has specific code that disallows you from copying the main script locally. In particular, that code "expires" every so many hours. I'm combined part of this script: https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false because I can't execute this directly (Error: write called on an object that does not implement interface HTMLDocument). So I don't have any alternative!
Use an iframe (type=content if in XUL) to display web content. There you can include whatever scripts you like. The content in the iframe will not have any special privileges, or at least should not. If you need to communicate with the privileged add-on part of your code, you can use e.g. regular HTML events (createEvent, addEventListener and friends) or the postMessage web API to pass messages.
Do not try to load remote code directly into other pages, or worse, into the browser, as this is a compatibility and security nightmare.
Because loading remote code and/or code not properly reviewed for running in a privileged context, the platform will refuse to load such scripts from remote sources (http, etc.) via loadSubScript, etc.
Should be noted, that if you'd later like to host your add-on on addons.mozilla.org and still do include remote scripts in privileged code, your add-on will be rejected until you fix it.
Also, mozilla might blocklist your add-on even if you host elsewhere if it is discovered that there are known security vulnerabilities in your add-on, per the Add-on Guidelines.
The adobe documentation says that when listening for a keypress event from a phone you should listen for Key.Down, however when I trace the Key.getCode() of keypresses I see a number not the string "Key.Down". I am tesing this locally in device central and do not have a phone to test this with at present. Here is my code -
keyListener = new Object();
keyListener.onKeyDown = function() {
switch (Key.getCode()) {
trace(Key.getCode()) // outputs 40
case (Key.DOWN) : // according to the docs
pressDown();
break;
}
}
My question is - is this simply because Im testing in device central and when I run it on the phone I will need to be listening for Key.Down? or is the documentation wrong? Also is the numeric code (40) consistent across all devices? What gives adobe?
thanks all
Key.Down is equal to 40 so it will recognize it as the same. So you can use whichever one you prefer, however, I would recommend using Key.Down because it will be easily recognizeable for those who dont have Key Codes memorized (most of us).
These are the Key Code Values for Javascript. However, I think they are pretty much universal