Sporo učitavanje sajta

[Wise Owl]

Imam ovu skriptu:

var channelID = "UClJm8X5ohADVQkmEac508yg";

// Delay the AJAX request by 3 seconds
setTimeout(function() {
    $.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D' + channelID, function(data) {
        // Check if 'items' array exists and has items
        if (data.items && data.items.length > 0) {
            // Change the number based on the available items or a fixed value
            for (var i = 0; i < Math.min(100, data.items.length); i++) {
                // Check if 'link' property exists in the current item
                if (data.items[i].link) {
                    var link = data.items[i].link;
                    var id = link.substr(link.indexOf("=") + 1);
                    $('.homePage__youtube').append('<div class="video-container"><iframe src="https://youtube.com/embed/' + id + '?controls=1&showinfo=1&rel=1" width="560" height="200" frameborder="0" allowfullscreen loading="lazy"></iframe></div>');
                } else {
                    console.error('Link property is undefined or missing in item ' + i);
                }
            }
        } else {
            console.error('No items found in the API response');
        }
    });
}, 3000); // 3000 milliseconds = 3 seconds

Medjutim, kad pokrenem dijagnostiku, izbacuje mi jako loše rezultate i anormno dugo učitavanje, a ta skripta čak nije ni na mom sajtu, već je od youtube-a.

 

[Sensei]

Ako koristiš AdBlock onda će namerno da uspore jutub i FB (i mnoge druge) da te nauče pameti. Ugasi sve AdBlock koje imaš pa probaj ponovo da vidiš kako će sve da "leti"

 

[Wise Owl]

Ne, nema to veze sa učitavanjem u mom pretraživaču, ovo je https://pagespeed.web.dev/ gde oni sami evaluišu koliko je potrebno da se sajt učita.

 

[Frederick_]

Prvo, prepravi skriptu da bude vanila js, nemoj da koristis jquery, on sam po sebi nije bas optimizovan. Koristi fetch.

Otprilike ovako nesto:

setTimeout(function() {
    fetch('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D' + channelID)
        .then(response => response.json())
        .then(data => {
            // Check if 'items' array exists and has items
            if (data.items && data.items.length > 0) {
                // Change the number based on the available items or a fixed value
                for (var i = 0; i < Math.min(100, data.items.length); i++) {
                    // Check if 'link' property exists in the current item
                    if (data.items[i].link) {
                        var link = data.items[i].link;
                        var id = link.substr(link.indexOf("=") + 1);
                        var videoContainer = document.createElement('div');
                        videoContainer.className = 'video-container';
                        videoContainer.innerHTML = '<iframe src="https://youtube.com/embed/' + id + '?controls=1&showinfo=1&rel=1" width="560" height="200" frameborder="0" allowfullscreen loading="lazy"></iframe>';
                        document.querySelector('.homePage__youtube').appendChild(videoContainer);
                    } else {
                        console.error('Link property is undefined or missing in item ' + i);
                    }
                }
            } else {
                console.error('No items found in the API response');
            }
        })
        .catch(error => console.error('Error:', error));
}, 3000);

 

[Frederick_]

I nikada nemoj da hardcodujes stvari kao sto su channelID.

 

[Wise Owl]

I nikada nemoj da hardcodujes stvari kao sto su channelID.

Hoćeš reći da je jQuery sam po sebi mnogo spor naspram vanilla js? Da uveliko hoće usporiti sajt sam po sebi?

Kod koji si mi dao nije ništa mnogo optimizovao stvari. Postoji neki problem sa third-party skriptom koja je od youtube-a i to baš dosta uzima:

A fora je što je ovo svakako super za PC verziju, ali na mobilnom se apsolutno ništa nije promenilo po pitanju učitavanja skripte.

 

[Frederick_]

Hoćeš reći da je jQuery sam po sebi mnogo spor naspram vanilla js? Da uveliko hoće usporiti sajt sam po sebi?

Kod koji si mi dao nije ništa mnogo optimizovao stvari. Postoji neki problem sa third-party skriptom koja je od youtube-a i to baš dosta uzima:
Pogledajte prilog 1543363

A fora je što je ovo svakako super za PC verziju, ali na mobilnom se apsolutno ništa nije promenilo po pitanju učitavanja skripte.

Da, jquery je njesra, vanila je najbrza. Mada, realno, brzina je ovde relativna stvar, i ne zavisi od tvog koda.

I jos jedan savet: koristi const umesto var za sve varijable koje nakon inicijacije ne menjaju vise vrednost.

 

[Wise Owl]

Da, jquery je njesra, vanila je najbrza. Mada, realno, brzina je ovde relativna stvar, i ne zavisi od tvog koda.

I jos jedan savet: koristi const umesto var za sve varijable koje nakon inicijacije ne menjaju vise vrednost.

Dosta ću koda morati da menjam pošto mi je uglavnom sve jQuery.. Postoji li neko rešenje za ovaj embed sadržaj od youtube-a?
E da, isto tako pravi problem učitavanje slika. Stavio sam loading lazy ali to ne pomaže mnogo. Pa sam kompresovao size, i onda napravio webp ekstenziju i obe koristio radi kompitabilnosti i to je poboljšalo za PC, ali na mobilnom se baš ništa nije promenilo

 

[Frederick_]

Nemam nekog iskustva sa embedded sadržajima, samo ti mogu dati savete za čistiji kôd.

 

[Wise Owl]

@Sizif