Sporo učitavanje sajta

Baldwin IV

Ističe se
Poruka
2.214
Imam ovu skriptu:
JavaScript:
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.


Screenshot-1.jpg


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

Otprilike ovako nesto:

JavaScript:
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);
 
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:
1715034395229.png


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.
 
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.
 
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
 

Back
Top