GTmetrix Lighthouse Error on Wordpress Site - javascript

I'm having an issues which I can't pass the Lighthouse analysis for my Elementor Wordpress site using GTmetrix. I found the cause of the issue is because I have a render-blocking javascript element, which is Vanta.js that I used as my animation background. This is my initial code that I embed on a HTML via Elementor:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.halo.min.js"></script>
<script>
if (window.innerWidth > 1023) {
VANTA.HALO({
el: "#bg-halo",
mouseControls: true,
touchControls: false,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
backgroundColor: 0x000000,
xOffset: -0.35,
yOffset: -0.50,
size: 6.00
})
}
</script>
Then after some research, I tried to modify the code using async. The GTmetrix Lighthouse analysis pass, but the Vanta.js animation background sometimes doesn't showed up (if I refreshed the page for a couple of times it shows up, then not showed up again, then somehow showed up again). Here is the code I've embedded:
<script id="loadThree" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js" async></script>
<script id="loadHalo" src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.halo.min.js" async></script>
<script async>
let loadThree = document.querySelector("#loadThree");
loadThree.addEventListener("load", async function() {
console.log("THREE PASS");
let loadHalo = document.querySelector("#loadHalo");
loadHalo.addEventListener("load", async function() {
console.log("HALO PASS")
if (window.innerWidth > 1023) {
console.log("WINDOW PASS")
VANTA.HALO({
el: "#bg-halo",
mouseControls: true,
touchControls: false,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
backgroundColor: 0x000000,
xOffset: -0.35,
yOffset: -0.50,
size: 6.00
})
}
})
})
</script>
I've also tried with defer, the Vanta.js background animation works well, but the GTmetrix Lighthouse analysis doesn't pass.
Any helpful answer would be very appreciated!

Related

How to Load New Webpage Without Reloading Browser? Vanilla JS

I'm trying to make a website that allows for page transitions across each webpage, without having the browser reload each time it changes pages. I am currently using barba.js to make it possible to change pages while using transitions. I was wondering if there was a way to do this in Vanilla JS, as all I want to do is run transitions, and have pages with static data on said pages, and don't feel I need the extra functionality barba.js provides.
Here is my current barba.js code if it is of any use:
barba.init({
sync: true,
views: [
{ namespace: 'about' },
{ namespace: 'projects' },
{ namespace: 'stories' }
],
transitions: [{
name: 'opacity-transition',
sync: true,
async enter(data) {
// Entrance Transition settings
return gsap.from(data.next.container, {
left: '20%',
filter: 'brightness(0.4)',
duration: 0.9,
ease: 'power1.inOut',
});
},
async leave(data) {
// Exiting Transition settings
return gsap.to(data.current.container, {
left: '-100%',
duration: 0.9,
filter: 'brightness(0.6)',
ease: 'power1.inOut',
});
},
}]
});
The greensock stuff can be removed and turned in to CSS animations if it's possible to do this without barba.js

Nothing showing with PhaserJS

I'm trying to learn phaser js and I'm following the tutorial but when run my code nothing is showing on the web browser. Here is my code:
<html>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = Phaser.Game(config);
function preload ()
{
this.load.image('player', 'assets/player.png');
this.load.image('sky', 'assets/sky.png');
}
function create ()
{
player = this.physics.add.image(640, 360);
this.add.image(640, 360, 'sky');
player.setBounce(0.2);
player.setColliderWorldBounds(true);
}
what am I doing wrong?
There are some points, that could cause problems(and/or are problematic), and/or should be checked:
your placing the sky ontop of the player. The order in which you add assets / images is important.
player = this.physics.add.image(640, 360) creates a image, with a physics-object, but if you don't pass a key, the image will not be displayed. that line change it to player = this.physics.add.image(640, 360, 'player');
If you don't configure physics the application will crash. (check the browser console for an error message), solution, change the configuration to this:
var config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
scene: {
preload: preload,
create: create,
update: update
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 }
}
},
};
btw.: the official phaser examples, are very helpful and showcase many functions of phaser in a tiny scope https://phaser.io/examples, they helped my to get started with phaser.
p.s.: when developing with html and javascript the browser-console is your best friend / tool, it shows error's and can help with debugging and alot more.

JWPlayer load() and playAd() not starting using onBeforeStart()

I can't seem to get Ads to play when calling load(). I'm using playAd() in a onBeforeStart(). When I use load() the video won't start, and either will the ad. It loads it all, and I can click start, but the video never starts automatically. I even tried $interval(jwplayer.play, 500) hehe.
It goes into IDLE mode, when I load the video - which its supposed to do(docs), but it can't start. When I remove the playAd() function, it works perfect with autostart ect.
Is it even possible? I can't find any examples of it anywhere.
Code;
jwplayer('video-player').setup({
autostart: false,
controls: true,
// stagevideo: true,
debug: {
'levels' : 'all'
},
primary: 'flash',
androidhls: true,
icons: false,
flashplayer: '/assets/scripts/jwplayer.flash.swf',
html5player: '/assets/scripts/jwplayer.html5.js',
skin: '/assets/skin/skin.xml',
file: clip.videoUrl,
image: clip.thumbnail640,
wmode: 'transparent',
height: "100%",
width: "100%",
repeat: "false",
advertising: {
client: "vast"
},
plugins: {
"/assets/scripts/borsenticker.js": {
'ticker1': tickerStringUpper,
'ticker2': stockString,
'ticker2_nofont': stockString_nofont,
'date': dateFiltered
}
},
});
load it;
jwplayer('video-player').load([{
file: clip.videoUrl,
image: clip.thumbnail640,
}]);
jwplayer('video-player').play();
and setups are;
jwplayer('video-player').onBeforePlay(function (){
if(!videoPlayerAdLoaded) {
jwplayer('video-player').playAd(Preroll.getVastTag());
videoPlayerAdLoaded = true;
}
});
Fixed it by updating to 6.11 from 6.10. :)

Changing Twitter logo in twitter feed

Hi I have a twitter feed using the following code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 195,
height: 300,
theme: {
shell: {
background: '#999999',
color: '#D6E03D'
},
tweets: {
background: '#f3f3f3',
color: '#999999',
links: '#5a5a5a'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('louise').start();
</script>
and this is linked to the widget.js file. I need the default twitter to be blue not white so I tried downloading the js file and hosting it from my server and changing the code to my image using this code:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
this adds the blue image in ok but it messes up some of the links that should be different colours within the feed, therefore I think I need to stick to linking to this version:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
is there a way I can link to this but override the twitter image that they are using with my own twitter logo?
Any help would be greatly appreciated, thanks
Louise
I guess the solution might be one of these:
CSS hack - hide image and use background-image CSS property instead
Detect image on load and replace it then
Write a custom widget. Example.

Insert a script into the DOM that calls AJAX

We have a tool that allows people to add code to a dynamic page.
A bit of code (a widget) needs to be injected into the DOM, not hard coded into the html. I use jquery to do it. The problem is that it ends up redirecting the page...
I need to solve this.
Here is an example. Create a page with the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
</script>
<input id="inputWidget" /><button id="doInsertW" type="button">Insert</button>
<div id="putWidget"></div>
Then paste this into the input and you'll see what I mean:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>
The problem is that the widget.js script uses document.write to place the HTML for the widget on the page. If document.write is called while the page is still loading, it works fine. However, calling document.write after the page has finished loading will rewrite the entire page.
Here is a quick and dirty hack that will force it to work (tested in FireFox):
$(function(){
document.write = function(c) { $('#putWidget').append(c) };
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
Notice, I'm simply overriding the document.write function after the page is done loading.

Categories