%PDF-
%PDF-
Mini Shell
Mini Shell
class RocketLcpBeacon {
constructor( config ) {
this.config = config;
this.performanceImages = [];
this.errorCode = '';
this.scriptTimer = new Date();
this.infiniteLoopId = null;
}
async init() {
if ( ! await this._isValidPreconditions() ) {
this._finalize();
return;
}
this.infiniteLoopId = setTimeout( () => {
this._handleInfiniteLoop();
}, 10000 );
try {
// Use _generateLcpCandidates method to get all the elements in the viewport.
const above_the_fold_images = this._generateLcpCandidates( Infinity );
if ( above_the_fold_images ) {
this._initWithFirstElementWithInfo( above_the_fold_images );
this._fillATFWithoutDuplications( above_the_fold_images );
}
} catch ( err ) {
this.errorCode = 'script_error';
this._logMessage( 'Script Error: ' + err );
}
this._saveFinalResultIntoDB();
}
async _isValidPreconditions() {
// Check the screensize first because starting any logic.
if ( this._isNotValidScreensize() ) {
this._logMessage('Bailing out because screen size is not acceptable');
return false;
}
if ( this._isPageCached() && await this._isGeneratedBefore() ) {
this._logMessage('Bailing out because data is already available');
return false;
}
return true;
}
_isPageCached() {
const signature = document.documentElement.nextSibling && document.documentElement.nextSibling.data ? document.documentElement.nextSibling.data : '';
return signature && signature.includes( 'Debug: cached' );
}
async _isGeneratedBefore() {
// AJAX call to check if there are any records for the current URL.
let data_check = new FormData();
data_check.append('action', 'rocket_check_lcp');
data_check.append('rocket_lcp_nonce', this.config.nonce);
data_check.append('url', this.config.url);
data_check.append('is_mobile', this.config.is_mobile);
const lcp_data_response = await fetch(this.config.ajax_url, {
method: "POST",
credentials: 'same-origin',
body: data_check
})
.then(data => data.json());
return lcp_data_response.success;
}
_isNotValidScreensize() {
// Check screen size
const screenWidth = window.innerWidth || document.documentElement.clientWidth;
const screenHeight= window.innerHeight || document.documentElement.clientHeight;
const isNotValidForMobile = this.config.is_mobile &&
( screenWidth > this.config.width_threshold || screenHeight > this.config.height_threshold );
const isNotValidForDesktop = !this.config.is_mobile &&
( screenWidth < this.config.width_threshold || screenHeight < this.config.height_threshold );
return isNotValidForMobile || isNotValidForDesktop;
}
_generateLcpCandidates( count ) {
const lcpElements = document.querySelectorAll( this.config.elements );
if ( lcpElements.length <= 0 ) {
return [];
}
const potentialCandidates = Array.from( lcpElements );
const topCandidates = potentialCandidates.map(element => {
// Skip if the element is an img and its parent is a picture
if ('img' === element.nodeName.toLowerCase() && 'picture' === element.parentElement.nodeName.toLowerCase() ) {
return null;
}
let rect;
if ('picture' === element.nodeName.toLowerCase()) {
const imgElement = element.querySelector('img');
if (imgElement) {
rect = imgElement.getBoundingClientRect();
} else {
return null;
}
} else {
rect = element.getBoundingClientRect();
}
return {
element: element,
rect: rect,
};
})
.filter(item => item !== null) // Filter out null values here
.filter(item => {
return (
item.rect.width > 0 &&
item.rect.height > 0 &&
this._isIntersecting(item.rect)
);
})
.map(item => ({
item,
area: this._getElementArea(item.rect),
elementInfo: this._getElementInfo(item.element),
}))
.sort((a, b) => b.area - a.area)
.slice(0, count);
return topCandidates.map(candidate => ({
element: candidate.item.element,
elementInfo: candidate.elementInfo,
}));
}
_isIntersecting(rect) {
// Check if any part of the image is within the viewport
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}
_getElementArea(rect) {
const visibleWidth = Math.min(rect.width, (window.innerWidth || document.documentElement.clientWidth) - rect.left);
const visibleHeight = Math.min(rect.height, (window.innerHeight || document.documentElement.clientHeight) - rect.top);
return visibleWidth * visibleHeight;
}
_getElementInfo(element) {
const nodeName = element.nodeName.toLowerCase();
const element_info = {
type: "",
src: "",
srcset: "",
sizes: "",
sources: [],
bg_set: [],
current_src: ""
};
const css_bg_url_rgx = /url\(\s*?['"]?\s*?(.+?)\s*?["']?\s*?\)/ig;
if (nodeName === "img" && element.srcset) {
element_info.type = "img-srcset";
element_info.src = element.src;
element_info.srcset = element.srcset; // capture srcset
element_info.sizes = element.sizes; // capture sizes
element_info.current_src = element.currentSrc;
} else if (nodeName === "img") {
element_info.type = "img";
element_info.src = element.src;
element_info.current_src = element.currentSrc;
} else if (nodeName === "video") {
element_info.type = "img";
const source = element.querySelector('source');
element_info.src = element.poster || (source ? source.src : '');
element_info.current_src = element_info.src;
} else if (nodeName === "svg") {
const imageElement = element.querySelector('image');
if (imageElement) {
element_info.type = "img";
element_info.src = imageElement.getAttribute('href') || '';
element_info.current_src = element_info.src;
}
} else if (nodeName === "picture") {
element_info.type = "picture";
const img = element.querySelector('img');
element_info.src = img ? img.src : "";
element_info.sources = Array.from(element.querySelectorAll('source')).map(source => ({
srcset: source.srcset || '',
media: source.media || '',
type: source.type || '',
sizes: source.sizes || ''
}));
} else {
const computed_style = window.getComputedStyle(element, null);
const bg_props = [
computed_style.getPropertyValue("background-image"),
getComputedStyle(element, ":after").getPropertyValue("background-image"),
getComputedStyle(element, ":before").getPropertyValue("background-image")
].filter(prop => prop !== "none");
if (bg_props.length === 0) {
return null;
}
const full_bg_prop = bg_props[0];
element_info.type = "bg-img";
if (full_bg_prop.includes("image-set(")) {
element_info.type = "bg-img-set";
}
if (!full_bg_prop || full_bg_prop === "" || full_bg_prop.includes( 'data:image' ) ) {
return null;
}
const matches = [...full_bg_prop.matchAll(css_bg_url_rgx)];
element_info.bg_set = matches.map(m => m[1] ? {src: m[1].trim() + (m[2] ? " " + m[2].trim() : "")} : {});
// Check if bg_set array is populated with empty objects
if (element_info.bg_set.every(item => item.src === "")) {
// If bg_set array is populated with empty objects, populate it with the URLs from the matches array
element_info.bg_set = matches.map(m => m[1] ? {src: m[1].trim()} : {});
}
if (element_info.bg_set.length > 0) {
element_info.src = element_info.bg_set[0].src;
if (element_info.type === "bg-img-set") {
element_info.src = element_info.bg_set;
}
}
}
return element_info;
}
_initWithFirstElementWithInfo(elements) {
const firstElementWithInfo = elements.find(item => item.elementInfo !== null);
if ( ! firstElementWithInfo ) {
this._logMessage("No LCP candidate found.");
this.performanceImages = [];
return;
}
this.performanceImages = [{
...firstElementWithInfo.elementInfo,
label: "lcp",
}];
}
_fillATFWithoutDuplications(elements) {
elements.forEach(({ element, elementInfo }) => {
if ( this._isDuplicateImage(element) || !elementInfo ) {
return;
}
this.performanceImages.push({ ...elementInfo, label: "above-the-fold" });
});
}
_isDuplicateImage(image) {
const elementInfo = this._getElementInfo(image);
if (elementInfo === null) {
return false;
}
const isImageOrVideo =
elementInfo.type === "img" ||
elementInfo.type === "img-srcset" ||
elementInfo.type === "video";
const isBgImageOrPicture =
elementInfo.type === "bg-img" ||
elementInfo.type === "bg-img-set" ||
elementInfo.type === "picture";
return (isImageOrVideo || isBgImageOrPicture)
&&
this.performanceImages.some(item => item.src === elementInfo.src);
}
_getFinalStatus() {
if ( '' !== this.errorCode ) {
return this.errorCode;
}
const scriptTime = ( new Date() - this.scriptTimer ) / 1000;
if ( 10 <= scriptTime ) {
return 'timeout';
}
return 'success';
}
_saveFinalResultIntoDB() {
const data = new FormData();
data.append('action', 'rocket_lcp');
data.append('rocket_lcp_nonce', this.config.nonce);
data.append('url', this.config.url);
data.append('is_mobile', this.config.is_mobile);
data.append('images', JSON.stringify(this.performanceImages));
data.append('status', this._getFinalStatus());
fetch(this.config.ajax_url, {
method: "POST",
credentials: 'same-origin',
body: data,
headers: {
'wpr-saas-no-intercept': true
}
})
.then((response) => response.json())
.then((data) => {
this._logMessage(data);
})
.catch((error) => {
this._logMessage(error);
})
.finally(() => {
this._finalize();
});
}
_handleInfiniteLoop() {
this._saveFinalResultIntoDB();
}
_finalize() {
const beaconscript = document.querySelector('[data-name="wpr-lcp-beacon"]');
beaconscript.setAttribute('beacon-completed', 'true');
clearTimeout( this.infiniteLoopId );
}
_logMessage( msg ) {
if ( ! this.config.debug ) {
return;
}
console.log( msg );
}
static run() {
if ( !window.rocket_lcp_data ) {
return;
}
const instance = new RocketLcpBeacon( window.rocket_lcp_data );
if (document.readyState !== 'loading') {
setTimeout(() => {
instance.init();
}, window.rocket_lcp_data.delay);
return;
}
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
instance.init();
}, window.rocket_lcp_data.delay);
});
}
}
RocketLcpBeacon.run();
Zerion Mini Shell 1.0