Site load speed, very slow

Ask the community
,
1

Hi,

I have worked hard to try and improve my site load speed, which made a huge difference! But now the site loads very slow again… and I’m not sure why.

I have compressed all images, set the pages up for sections to load on ‘fold’ I also removed any unnecessary data sets and these also load on the fold which should leave the only areas to initially load very small, i.e. a compressed image and some text (and the item dataset on dynamic pages) But this takes around 8-10 seconds on a very good internet connection.

Any help or advice would be greatly appreciated.

Stephen

1 Like
2

Gonna need more info on the specifics of what’s on your site and your code in order to help.

Broad strokes? Avoid using too many repeaters per page. Make your code as efficient as possible. Collapse elements on load that slow down load times substantially and add a button/anchor trigger or put them on a page of their own if possible.

And check out this link:

Cheers

3

Hi,
Please review my answer here regarding the same question.

Best,
Tal.

4

Hi David,
thanks for the info. Here is some more info about the site. I have noticed in the past few days that the site seems to be loading faster again… Anyway below is the code and a reference to each page
Homepage www.scottishrockandwater.com Homepage code

import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
import {local} from 'wix-storage';
import {formatDate} from "public/dates.js";


let lastFilterSearchBox;
let debounceTimer;


let fadeOptions = {
 "duration":   500,
 "delay":      0
};


export function anchorheader_onviewportEnter(event, $w) {
    $w("#smallstrip").hide("fade", fadeOptions);
    $w("#largestrip").show("fade", fadeOptions);
    $w("#logocross").show("fade", fadeOptions);
}

export function anchorheader_onviewportLeave(event, $w) {
    $w("#smallstrip").show("fade", fadeOptions);
    $w("#largestrip").hide("fade", fadeOptions);
    $w("#logocross").hide("fade", fadeOptions);
}


export function SearchButton_click(event, $w) {
 let word = $w("#iTitle").value;
    local.setItem("iTitle", word);
 let wordtwo = $w('#coursenamedropdown').value;
    local.setItem("coursedropdown", wordtwo)
 let wordthree = $w('#dropdownDifficulty').value;
    local.setItem("dropdowndifficulty", wordthree)
 let wordfour = $w('#durationdropdown').value;
    local.setItem("duration", wordfour)
 let wordfive = formatDate ($w('#Coursestartdate').value);
    local.setItem("coursedate", wordfive)
    console.log($w('#iTitle').value);
    console.log($w('#coursenamedropdown').value);
    console.log($w('#dropdownDifficulty').value);
    console.log($w('#durationdropdown').value);
    console.log($w('#Coursestartdate').value);
    wixLocation.to("/results");
}

export function tripplannerbutton_click(event, $w) {
 if( $w("#tripplannerbox").collapsed ) {
  $w("#tripplannerbox").expand();
}
else {
  $w("#tripplannerbox").collapse();
}
 if ($w("#tripplannerbox").hidden) {
        $w("#tripplannerbox").show();
    }
}


export function moreinfobuttonland_click(event, $w) {
    $w("#moreinfotextland").hide();
    $w("#lessinfotextland").show();
    $w("#moreinfobuttonland").hide();
    $w("#lessinfobuttonland").show();
    $w("#landinfobox").expand();
    $w("#landinfobox").show();
}

export function lessinfobuttonland_click(event, $w) {
    $w("#moreinfotextland").show();
    $w("#lessinfotextland").hide();
    $w("#moreinfobuttonland").show();
    $w("#lessinfobuttonland").hide();
    $w("#landinfobox").collapse();
    $w("#landinfobox").hide();
}

export function moreinfobuttonwater_click(event, $w) {
    $w("#moreinfotextwater").hide();
    $w("#lessinfotextwater").show();
    $w("#moreinfobuttonwater").hide();
    $w("#lessinfobuttonwater").show();
    $w("#waterinfobox").expand();
    $w("#waterinfobox").show();
}

export function lessinfobuttonwater_click(event, $w) {
    $w("#moreinfotextwater").show();
    $w("#lessinfotextwater").hide();
    $w("#moreinfobuttonwater").show();
    $w("#lessinfobuttonwater").hide();
    $w("#waterinfobox").collapse();
    $w("#waterinfobox").hide();
}

export function moreinfobuttonwinter_click(event, $w) {
    $w("#moreinfotextwinter").hide();
    $w("#lessinfotextwinter").show();
    $w("#moreinfobuttonwinter").hide();
    $w("#lessinfobuttonwinter").show();
    $w("#winterinfobox").expand();
    $w("#winterinfobox").show();
}

export function lessinfobuttonwinter_click(event, $w) {
    $w("#moreinfotextwinter").show();
    $w("#lessinfotextwinter").hide();
    $w("#moreinfobuttonwinter").show();
    $w("#lessinfobuttonwinter").hide();
    $w("#winterinfobox").collapse();
    $w("#winterinfobox").hide();
}

let slideOptions = {
 "duration": 1000,
 "delay": 0,
 "direction": "right"
};


export function landImage_mouseIn(event, $w) {
    $w("#revealLineLand").show("slide", slideOptions);
}

export function landImage_mouseOut(event, $w) {
    $w("#revealLineLand").hide("slide", slideOptions); 
}

export function winterImage_mouseIn(event, $w) {
    $w("#revealLineWinter").show("slide", slideOptions); 
}

export function winterImage_mouseOut(event, $w) {
     $w("#revealLineWinter").hide("slide", slideOptions); 
}

export function waterImage_mouseIn(event, $w) {
    $w("#revealLineWater").show("slide", slideOptions); 
}

export function waterImage_mouseOut(event, $w) {
    $w("#revealLineWater").hide("slide", slideOptions); 
}

export function HikingImage_mouseIn(event, $w) {
$w("#HikingHover").show();
}

export function HikingImage_mouseOut(event, $w) {
$w("#HikingHover").hide();
}

export function NavigationImage_mouseIn(event, $w) {
$w("#NavigationHover").show();
}

export function NavigationImage_mouseOut(event, $w) {
$w("#NavigationHover").hide();
}

export function ExpeditionsImage_mouseIn(event, $w) {
$w("#ExpeditionsHover").show();
}

export function ExpeditionsImage_mouseOut(event, $w) {
$w("#ExpeditionsHover").hide();
}

export function ScramblingImage_mouseIn(event, $w) {
$w("#ScramblingHover").show();
}

export function ScramblingImage_mouseOut(event, $w) {
$w("#ScramblingHover").hide(); 
}

export function ClimbingImage_mouseIn(event, $w) {
$w("#ClimbingHover").show();
}

export function ClimbingImage_mouseOut(event, $w) {
$w("#ClimbingHover").hide();
}

export function CanoeImage_mouseIn(event, $w) {
$w("#CanoeHover").show(); 
}

export function CanoeImage_mouseOut(event, $w) {
$w("#CanoeHover").hide();
}

export function KayakImage_mouseIn(event, $w) {
$w("#KayakHover").show();
}

export function KayakImage_mouseOut(event, $w) {
$w("#KayakHover").hide();
}

export function WaterExpeditionsImage_mouseIn(event, $w) {
$w("#WaterExpeditionsHover").show(); 
}

export function WaterExpeditionsImage_mouseOut(event, $w) {
$w("#WaterExpeditionsHover").hide();
}

export function CoursesImage_mouseIn(event, $w) {
$w("#CoursesHover").show();
}

export function CoursesImage_mouseOut(event, $w) {
$w("#CoursesHover").hide();
}

export function QualifyImage_mouseIn(event, $w) {
$w("#QualifyHover").show(); 
}

export function QualifyImage_mouseOut(event, $w) {
$w("#QualifyHover").hide(); 
}

export function WinterHikingImage_mouseIn(event, $w) {
$w("#WinterHikingHover").show(); 
}

export function WinterHikingImage_mouseOut(event, $w) {
$w("#WinterHikingHover").hide();  
}

export function WinterSkillsImage_mouseIn(event, $w) {
$w("#WinterSkillsHover").show(); 
}

export function WinterSkillsImage_mouseOut(event, $w) {
$w("#WinterSkillsHover").hide(); 
}

export function WinterNavigationImage_mouseIn(event, $w) {
$w("#WinterNavigationHover").show(); 
}

export function WinterNavigationImage_mouseOut(event, $w) {
$w("#WinterNavigationHover").hide(); 
}

export function MountaineeringImage_mouseIn(event, $w) {
$w("#WinterMountaineeringHover").show(); 
}

export function MountaineeringImage_mouseOut(event, $w) {
$w("#WinterMountaineeringHover").hide(); 
}

export function WinterClimbingImage_mouseIn(event, $w) {
$w("#WinterClimbingHover").show(); 
}

export function WinterClimbingImage_mouseOut(event, $w) {
$w("#WinterClimbingHover").hide(); 
}


export function Fold2_viewportEnter(event, $w) {
$w('#FoldStrip2').show();
$w('#FoldStrip2').expand();
$w('#FoldStrip3').show();
$w('#FoldStrip3').expand(); 
}


export function Foldrepeater1_viewportEnter(event, $w) {
wixData.query('Courses')
.limit(3)
.contains("gradesImage", "Land" )
.find()
.then((results) => {
 if (results.totalCount > 0) {
        $w('#LandRepeater').data = results.items;
        $w('#LandRepeater').onItemReady (($w1, itemData, index) =>{ 
                $w1("#button1").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w1("#button1").label = itemData.title;
                $w1("#landImage").src = itemData.image;
                $w1("#landImage").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w1("#text157").text=itemData.individaulPrice;
                $w1("#text159").text = itemData.duration;
                $w1("#GradeTextLand").text= itemData.lightbox;
                $w1("#CalenderLand").link="/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title)+"#anchor1";
                $w1("#DetailsLand").html = itemData.details; // details
                $w1("#GradeImageLand").src = itemData.grade;
                $w1("#CousreInfoLand").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
        });
    }   
})
 
$w('#Foldrepeater1colum').show();
$w('#Foldrepeater1colum').expand();
}


export function FoldRept2_viewportEnter(event, $w) {
    wixData.query('Courses')
.limit(3)
.contains("gradesImage", "Water" )
.find()
.then((results) => {
 if (results.totalCount > 0) {
        $w('#WaterRepeater').data = results.items;
        $w('#WaterRepeater').onItemReady (($w1, itemData, index) =>{ 
                $w1("#WaterButton").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w1("#WaterButton").label = itemData.title;
                $w1("#WaterImage").src = itemData.image;
                $w1("#WaterImage").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w1("#PriceWater").text=itemData.individaulPrice;
                $w1("#DurationWater").text = itemData.duration;
                $w1("#GradeTextWater").text= itemData.lightbox;
                $w1("#CalenderWater").link="/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title)+"#anchor1";
                $w1("#DetailsWater").html = itemData.details; // details
                $w1("#GradeImageWater").src = itemData.grade;
                $w1("#CourseInfoWater").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
        });
    }   
})
 
$w('#WaterRepeater').show();
$w('#WaterRepeater').expand();
}

export function Fold3_viewportEnter(event, $w) {
wixData.query('Courses')
.limit(3)
.contains("gradesImage", "Winter" )
.find()
.then((results) => {
 if (results.totalCount > 0) {
        $w('#WinterRepeater').data = results.items;
        $w('#WinterRepeater').onItemReady (($w1, itemData, index) =>{ 
                $w1("#WinterButton").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w1("#WinterButton ").label = itemData.title;
                $w1("#WinterImage").src = itemData.image;
                $w1("#WinterImage").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w1("#PriceWinter").text=itemData.individaulPrice;
                $w1("#DurationWinter").text = itemData.duration;
                $w1("#GradeTextWinter").text= itemData.lightbox;
                $w1("#CalenderWinter").link="/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title)+"#anchor1";
                $w1("#DetailsWinter").html = itemData.details; // details
                $w1("#GradeImageWinter").src = itemData.grade;
                $w1("#CourseInfoWinter").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
        });
    }   
})
 
$w('#WinterRepeater').show();
$w('#WinterRepeater').expand();
$w('#FoldStrip4').show();
$w('#FoldStrip4').expand(); 
}

export function FoldStripfooter_viewportEnter(event) {
    $w('#reviewsStrip').show();
    $w('#reviewsStrip').expand(); 
    $w('#FooterStrip').show();
    $w('#FooterStrip').expand();
}

Category page www.scottishrockandwater.com/courses/ScramblingCategory page code

import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
import {local} from 'wix-storage';
import {formatDate} from "public/dates.js";


let lastFilterSearchBox;

$w.onReady(function() {
 
 if (wixWindow.rendering.env === "browser") {
        wixData.query('Winter_Skills')
            .find()
            .then(res => {
 let options = [{
 "value": '',
 'label': 'All Courses'
                }];
                options.push(...res.items.map(title => {
 return {
 'value': title.title,
 'label': title.title
                    };
                }));
                $w('#coursenamedropdown').options = options;
            });

 let opts = $w("#durationdropdown").options;
        opts.unshift({
 'value': '',
 'label': 'All Durations'
        });
        $w("#durationdropdown").options = opts;

 let opts2 = $w("#dropdownDifficulty").options;
        opts2.unshift({
 'value': '',
 'label': 'All Grades'
        });
        $w("#dropdownDifficulty").options = opts2;
 
 let opts3 = $w("#regionDropdown").options;
        opts3.unshift({
 'value': '',
 'label': 'Show all Regions'
        });
        $w("#regionDropdown").options = opts3;

 let opts4 = $w("#gradeDropdown").options;
        opts4.unshift({
 'value': '',
 'label': 'Show all Grades'
        });
        $w("#gradeDropdown").options = opts4;
    }
    $w("#CourseCategoryBox").show("slide", slideOptions);
    $w("#box64").show("slide", slideOptions);
});

export function regionDropdown_change(event, $w) {
    fillRepeater()
}

export function gradeDropdown_change(event, $w) {
    fillRepeater() 
}

function fillRepeater() {
 let thisCourse = $w("#dynamicDataset").getCurrentItem();
        wixData.query("Courses")
        .contains("coursesCategory", thisCourse.coursesCategory)
        .contains("region", $w('#regionDropdown').value) 
        .contains("pageTitle", $w('#gradeDropdown').value)
        .find()
        .then((results) => {
            $w('#repeater1').data = results.items;
            $w('#repeater1').forEachItem(($w, itemData, index) => {
                $w("#button1").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w("#button1").label = itemData.title;
                $w("#image40").src = itemData.image;
                $w("#image40").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w("#text157").text= itemData.individaulPrice;
                $w("#GradeText").text= itemData.lightbox;
                $w("#text159").text = itemData.duration;
                $w("#calanderIcon").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title)+"#anchor1";
                $w("#descriptionText").html = itemData.details; // details
                $w("#image41").src = itemData.grade;
                $w("#button20").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title); 
                $w('#repeater1').data = results.items;
            }
            );
        });
}


export function SearchButton_click(event, $w) {
 let word = $w("#iTitle").value;
    local.setItem("iTitle", word);
 let wordtwo = $w('#coursenamedropdown').value;
    local.setItem("coursedropdown", wordtwo)
 let wordthree = $w('#dropdownDifficulty').value;
    local.setItem("dropdowndifficulty", wordthree)
 let wordfour = $w('#durationdropdown').value;
    local.setItem("duration", wordfour)
 let wordfive = $w('#Coursestartdate').value;
    local.setItem("coursedate", wordfive)
    console.log($w('#iTitle').value);
    console.log($w('#coursenamedropdown').value);
    console.log($w('#dropdownDifficulty').value);
    console.log($w('#durationdropdown').value);
    console.log($w('#Coursestartdate').value);
    wixLocation.to("/results");    
}

export function tripplannerbutton_click(event, $w) {
 if( $w("#tripplannerbox").collapsed ) {
  $w("#tripplannerbox").expand();
}
else {
  $w("#tripplannerbox").collapse();
}
 if ($w("#tripplannerbox").hidden) {
        $w("#tripplannerbox").show();
    }
}


export function anchorheader_onviewportEnter(event, $w) {
    $w("#smallstrip").hide();
    $w("#largestrip").show();
    $w("#CourseCategoryBox").show();
    $w("#box64").show();

 
}

export function anchorheader_onviewportLeave(event, $w) {
    $w("#smallstrip").show();
    $w("#largestrip").hide();
    $w("#CourseCategoryBox").hide("slide", slideOptions);
    $w("#box64").hide("slide", slideOptions);
}

export function Moreinfo_click(event, $w) {
    $w("#Moreinfotxt").hide();
    $w("#Lessinfotxt").show();
    $w("#Moreinfo").hide();
    $w("#Lessinfo").show();
    $w("#infobox").expand();
    $w("#infobox").show();
}

export function Lessinfo_click(event, $w) {
    $w("#Moreinfotxt").show();
    $w("#Lessinfotxt").hide();
    $w("#Moreinfo").show();
    $w("#Lessinfo").hide();
    $w("#infobox").collapse();
    $w("#infobox").hide();
}


export function button1_mouseIn(event, $w) {
    $w("#extendingyellowline").show();
}

export function button1_mouseOut(event, $w) {
    $w("#extendingyellowline").hide('FlyOut');
}

export function image40_mouseIn(event, $w) {
    $w("#extendingyellowline").show();
}

export function image40_mouseOut(event, $w) {
    $w("#extendingyellowline").hide('FlyOut');
}


let slideOptions = {
 "duration": 1000,
 "delay": 0,
 "direction": "right"
};


export function RepeaterAnchor_viewportEnter(event,) {
 let thisCourse = $w("#dynamicDataset").getCurrentItem();
    wixData.query("Courses")
        .contains("coursesCategory", thisCourse.coursesCategory)
        .ascending("min")
        .find()
        .then(results => {
            $w('#repeater1').data = results.items;
            $w('#repeater1').forEachItem(($w, itemData, index) => {
                $w("#button1").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w("#button1").label = itemData.title;
                $w("#image40").src = itemData.image;
                $w("#image40").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w("#text157").text= itemData.individaulPrice;
                $w("#GradeText").text= itemData.lightbox;
                $w("#text159").text = itemData.duration;
                $w("#calanderIcon").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title)+"#anchor1";
                $w("#descriptionText").html = itemData.details; // details
                $w("#image41").src = itemData.grade;
                $w("#button20").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title); 
                $w('#repeater1').data = results.items;
            }
            );
        });
    $w('#Fold1').show();
    $w('#Fold1').expand();
    $w('#repeater1').show();
    $w('#repeater1').expand();
}


function filter(searchBox, coursesCategory, duration, startDate, difficulty, region) {
 let newFilter = wixData.filter();
 if (searchBox) newFilter = newFilter.contains('title', searchBox);
 if (coursesCategory) newFilter = newFilter.contains('coursesCategory', coursesCategory);
 if (duration) newFilter = newFilter.contains('duration', duration);
 if (startDate) newFilter = newFilter.eq('dateone', startDate).or(newFilter.eq('dateTwo', startDate).or(newFilter.eq('datethree', startDate).or(newFilter.eq('dateFour', startDate))));
 if (difficulty) newFilter = newFilter.contains('pageTitle', difficulty);
 if (region) newFilter = newFilter.contains('region', region);
        console.log(searchBox);
        console.log(coursesCategory);
        console.log(duration);
        console.log(startDate);
        console.log(difficulty);
        $w('#coursesDataset').setFilter(newFilter);
        lastFilterSearchBox = searchBox;
 //}
}


export function searchButton_click(event, $w) {
    filter($w('#iTitle').value, $w("#coursenamedropdown").value, $w("#durationdropdown").value, $w("#Coursestartdate").value, $w("#dropdownDifficulty").value, $w("#regionDropdown").value);
}


export function ResetFilters_click(event, $w) {
$w("#gradeDropdown").selectedIndex = 0;
$w("#regionDropdown").selectedIndex = 0;
let thisCourse = $w("#dynamicDataset").getCurrentItem();
    wixData.query("Courses")
        .contains("coursesCategory", thisCourse.coursesCategory)
        .ascending("min")
        .find()
        .then(results => {
            $w('#repeater1').data = results.items;
            $w('#repeater1').forEachItem(($w1, itemData, index) => {
                $w1("#button1").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w1("#button1").label = itemData.title;
                $w1("#image40").src = itemData.image;
                $w1("#image40").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title);
                $w1("#text157").text= itemData.individaulPrice;
                $w1("#GradeText").text= itemData.lightbox;
                $w1("#text159").text = itemData.duration;
                $w1("#calanderIcon").link= "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title)+"#anchor1";
                $w1("#descriptionText").html = itemData.details; // details
                $w1("#image41").src = itemData.grade;
                $w1("#button20").link = "/Courses/"+encodeURI(itemData.coursesCategory)+"/"+encodeURI(itemData.title); 
                $w1('#repeater1').data = results.items;
            }
            );
        });
}

export function footerAnchor_viewportEnter(event) {
    $w('#FooterStrip').show();
    $w('#FooterStrip').expand(); 
}

Many thanks for your help.