So my website Apartments near me is website that provide real estate management services - and that not the topic of this post 
(btw, yes my English is not my best - sorry for that, please try to ignore my grammar and focus on the topic)
My landing page have repeaters with to include blog posts, a youtube video to run on view, ability to sign in as a member.
Now I tried to make my page run fest, I tried everything wix have to offer and other blogs, from removing animations, to have one font type, to reduce img size and put heavy content below the fold.
I have talked with support many many times to make my page to load fester - and by google lighthouse nothing really worked. while Wix continue to argue that google speed ranking is no the actual speed and the site is much fester, but by google SEO ranking and webmaster platform the speed is important for user experience hence its can increase or decrease the overall ranking.
now apartment near me have the below figures (tested in Memphis TN)
Which again is not good, but at least it’s not red. and I was able to keep all the things I wanted to keep.
and now I will share how I did it.
So first think I removed the widget for video as I seen in the waterfall load that its have a lot of calls and script to run even if its below the fold. so I created and I frame and used the on view to load the JS to run the youtube video I needed (code below)
Iframe code:
<!DOCTYPE html>
<html>
<style>
.img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" class="img"></div>
<script>
var elmnt = document.getElementById("player");
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
var firstScriptTag = document.getElementsByTagName('script')[0];
var player;
var height ='290';
var width='440';
window.onmessage = (event7) => {
if (event7.data) {
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
height=vh*0.9;
width=height*1.78;
}
};
//var firstScriptTag = document.getElementsByTagName('script')[0];
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
//var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: height,
width: width,
videoId: 'ZhjboEODPyI',
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.mute();
event.target.playVideo();
player.loadPlaylist('ZhjboEODPyI');
player.setLoop(true);
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
and the corvid code is:
export function page1_viewportEnter(event) { //its an event on the iframe no the page
$w("#html1").postMessage("do");
// Add your code for this event here:
}
basically what it does is that the iframe youtube not loads JS to run the video until the view of the iframe.
next was the repeater of the recent blog posts.
Was I used the blog post widget I seen that again the call backs is very high and it’s load even when its below the fold. so use the same Technic with the I frame but with repeaters and a collection:
var bload=0;
export function viewblog(event) {
// Add your code for this event here:
if(bload===0){
$w("#repeater1").onItemReady( ($item, itemData, index) => {
$item("#Rimg").src = itemData.coverImage;
$item("#Rimg").link=itemData.postPageUrl;
$item("#Rtitle").text= itemData.title;
$item("#Rdate").text = itemData.lastPublishedDate.toDateString();
$item("#Rbt").link = itemData.postPageUrl;
} );
bload=1;
wixData.query("Blog/Posts")
.descending("publishedDate")
.limit(3)
.find()
.then( (results) => {
$w("#repeater1").data = results.items;
} );
}
}
the reason for doing like that and not a data set and connect the data directly to a repeater is that on page load the data-set start running creating a drew back on load.
One last thing I did a wall is to remove the FAQ app from the page and doing it directly with text and adding the schema with Corvid SEO.
there was 2 issues with the app,
-
by google webmaster the auto generated schema from the app for FAQ was not reading correctly and google didn’t fetched the FAQ.
-
in the on page schema (in the advance SEO setting of the page) its not letting you use html tags and give you error, and my FAQ have links in it.
Just make sure to run it like that because there is no reason for the code to run twice
$w.onReady(function () {
//TODO: write your page related code here...
if (wixWindow.rendering.env === "backend"){//"browser") backend{
wixSeo.setStructuredData(
[{ //you schema :)
I would like to hear from you what you think and if it was helpful for you,
if you have other tips of how to make things run fester please share.
Thank you
