The clues I have are that the CLS disappears with JCH in production mode but the parallax stops working.
IF I exclude the inline script...
<script>jQuery(document).ready(function(){ new Customparallaxck("#customparallaxck123", {
outerHeight: false,
modHeight: "120vw",
responsiveFont: "",
resizeFactorText: "1.3"
}); });</script>
From JCH the parallax works again, but the CLS returns.
The CLS also disappears if I disable the module.
My custom script doesn't seem to be the cause. If I stop loading it the CLS remains...
Code:
document.addEventListener('DOMContentLoaded', function() {
function updateDataAttributes() {
var layer1 = document.getElementById('customparallaxck123_layer1');
var layer2 = document.getElementById('customparallaxck123_layer2');
var layer3 = document.getElementById('customparallaxck123_layer3');
var layer4 = document.getElementById('customparallaxck123_layer4');
var layer5 = document.getElementById('customparallaxck123_layer5');
function setAttributeIfDifferent(element, attribute, value) {
if (element.getAttribute(attribute) !== String(value)) {
element.setAttribute(attribute, value);
}
}
if (window.innerWidth <= 568) {
layer1.setAttribute('data-offsety', '500');
layer2.setAttribute('data-offsety', '600');
layer3.setAttribute('data-offsety', '580');
layer4.setAttribute('data-offsety', '800');
layer5.setAttribute('data-offsety', '200');
layer1.setAttribute('data-speedfactor', '-1.2');
layer2.setAttribute('data-speedfactor', '-0.8');
layer3.setAttribute('data-speedfactor', '-0.5');
layer4.setAttribute('data-speedfactor', '0.1');
layer5.setAttribute('data-speedfactor', '0.15');
}
else if (window.innerWidth > 568 && window.innerWidth <= 768) {
layer1.setAttribute('data-offsety', '450');
layer2.setAttribute('data-offsety', '570');
layer3.setAttribute('data-offsety', '590');
layer4.setAttribute('data-offsety', '800');
layer5.setAttribute('data-offsety', '250');
layer1.setAttribute('data-speedfactor', '-0.5');
layer2.setAttribute('data-speedfactor', '-0.18');
layer3.setAttribute('data-speedfactor', '0.03');
layer4.setAttribute('data-speedfactor', '0.4');
layer5.setAttribute('data-speedfactor', '0.5');
}
else if (window.innerWidth > 768 && window.innerWidth <= 1024) {
layer1.setAttribute('data-offsety', '250');
layer2.setAttribute('data-offsety', '290');
layer3.setAttribute('data-offsety', '290');
layer4.setAttribute('data-offsety', '320');
layer5.setAttribute('data-offsety', '-90');
layer1.setAttribute('data-speedfactor', '-0.3');
layer2.setAttribute('data-speedfactor', '-0.18');
layer3.setAttribute('data-speedfactor', '-0.01');
layer4.setAttribute('data-speedfactor', '0.08');
layer5.setAttribute('data-speedfactor', '0.15');
}
else if (window.innerWidth > 1024 && window.innerWidth <= 3000) {
layer1.setAttribute('data-offsety', '245');
layer2.setAttribute('data-offsety', '270');
layer3.setAttribute('data-offsety', '270');
layer4.setAttribute('data-offsety', '290');
layer5.setAttribute('data-offsety', '-60');
layer1.setAttribute('data-speedfactor', '-0.3');
layer2.setAttribute('data-speedfactor', '-0.2');
layer3.setAttribute('data-speedfactor', '-0.1');
layer4.setAttribute('data-speedfactor', '0.08');
layer5.setAttribute('data-speedfactor', '0.1');
}
else if (window.innerWidth > 3000) {
layer1.setAttribute('data-offsety', '195');
layer2.setAttribute('data-offsety', '240');
layer3.setAttribute('data-offsety', '260');
layer4.setAttribute('data-offsety', '290');
layer5.setAttribute('data-offsety', '-60');
layer1.setAttribute('data-speedfactor', '-0.01');
layer2.setAttribute('data-speedfactor', '0.02');
layer3.setAttribute('data-speedfactor', '0.05');
layer4.setAttribute('data-speedfactor', '0.15');
layer5.setAttribute('data-speedfactor', '0.1');
}
}
updateDataAttributes();
window.addEventListener('resize', updateDataAttributes);
});
I have set the values in the module settings the same as my first media break in the custom script which is what lighthouse mobile is testing at.
I have tried adding all the layer images to the LCP section in JCH, makes no difference. I have also excluded the entire folder that contains the images from the lazyload in JCH. These are both stabs in the dark really. I had no reason to think it they would help.
I also have the following custom CSS, which has been created mobile first. Nothing of significance changes at the smallest media break. I am switching the backgrounds for each layer out above 1024px vw but that doesn't affect lighthouse mobile testing.
Code:
/*Heros*/
.mast-home .t4-section-inner.container-fluid {
padding: 0;
}
.home-hero-text {
font-size: 35px;
line-height: 1;
font-weight: bold;
color: #fff;
top: CALC(70vw - 119px);
position: relative;
left: 10%;
}
.mast-home {
background:url(../../../../images/backgrounds/climb-plax-layers/refined/M-L-climb-sky-1k.webp) no-repeat!important;
background-attachment:fixed!important;
background-position-y:119px !important;
background-size: 100% auto !important;
}
@media screen and (min-width:569px) and (max-width: 768px) {
.home-hero-text {
font-size: 50px;
top: CALC(70vw - 119px);
}
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
.home-hero-text {
font-size: 60px;
top: CALC(40vw - 119px);
}
.home-hero-plax {
min-height:60vw!important;
}
}
@media screen and (min-width: 1024px) {
.home-hero-plax {
min-height:40vw!important;
}
.mast-home {
background:url(../../../../images/backgrounds/climb-plax-layers/refined/climb-sky-2k.webp)!important;
background-attachment:fixed!important;
background-position-y:119px !important;
background-size: 100% auto !important;
}
.home-hero-text {
font-size: 90px;
top: CALC(25vw - 119px);
}
#customparallaxck123_layer1 {
background: url(../../../../images/backgrounds/climb-plax-layers/refined/climb-horison-2k.webp) center 0 no-repeat!important;
background-size:100% auto !important;
}
#customparallaxck123_layer2 {
background: url(../../../../images/backgrounds/climb-plax-layers/refined/climb-mid-2k.webp) center 0 no-repeat!important;
background-size:100% auto !important;
}
#customparallaxck123_layer3 {
background: url(../../../../images/backgrounds/climb-plax-layers/refined/climb-lower-mid-2k.webp) center 0 no-repeat!important;
background-size:100% auto !important;
}
#customparallaxck123_layer4 {
background: url(../../../../images/backgrounds/climb-plax-layers/refined/climb-fore-2k.webp) center 0 no-repeat!important;
background-size:100% auto !important;
}
#customparallaxck123_layer5 {
background: url(../../../../images/backgrounds/climb-plax-layers/refined/climber-2k.webp) right 0 no-repeat!important;
background-size:100% auto !important;
}
}
@media screen and (min-width: 2000px) {
.home-hero-text {
font-size: 120px;
}
}
