registrieren registriertes Mitglied


Anzeige

Anzeige

HowTo III: Ladezeiten v. Javascript verbessern (jQuery)

Hier könnt Ihr Eure Fragen zu Google-Shopping, GOOGLE-Maps, Bilder- bzw. Video-Suche und sonstigen Suchmaschinen außer Google stellen.
supervisior
PostRank 9
PostRank 9
Beiträge: 2090
Registriert: 26.06.2006, 09:11

Beitrag supervisior » 02.09.2018, 12:23 HowTo III: Ladezeiten v. Javascript verbessern (jQuery)

In enger Anlehnung an:

HowTo I:
https://www.abakus-internet-marketing.d ... 41455.html

und HowTo II:
https://www.abakus-internet-marketing.d ... 41642.html

kommt hier ein weiteres HowTo, das sich mit der Ladezeit von .js Dateien am Beispiel von jQuery beschäftigt. Grundsätzlich wiederholt sich hier das Ziel, wie auch schon bei den anderen HowTo's, die Ladezeit spürbar zu verbessern in dem für die Anzeige nachrangiges beim Ladevorgang hinten angestellt wird. Das merkt dann nicht nur der Nutzer, sondern der Pagespeed Gott dankt es Euch durch einen deutlich besseren Score.

Dieses HowTo beinhaltet jedoch ein paar Einschränkungen und gilt unabhängig vom Beispiel mit jQuery. Wenn in diesem Fall jQuery oder jedes andere Script unmittelbar beim Seitenaufruf eine Funktion ausführen soll oder weil man z.B. eine CSS Klasse beim Ladevorgang ansprechen will, ist dieses und jede andere Optimierung, die dazu dient das Rendern von Javascript zu verzogern, eher weniger geeignet. Eben weil es durch die Verzögerung womöglich unschöne Seiteneffekte gibt oder die jeweilige Funktion eben nicht ausgeführt wird.

Desweiteren ist es zwingend nötig, das ggf. zusätzliche Scripte (js Dateien), die auf eine vorher definierte Funktion in einer anderen js Datei zugreifen, zusammengefügt werden müssen. Gleichermaßen gilt das auch für Inline Scripte, die auf eine verzögert geladene js Datei zugreifen. Das klappt in diesem Fall nicht, weil dabei das Inline Script auf etwas zugreifen will, das zum Zeitpunkt des Ladens noch gar nicht gerendert ist. Wer das zwingend braucht, muss einen Timeout auf dieses Inline Script setzen.

Gänzlich ungeeignet ist dieses HowTo für diverse Plugins für z.B. Wordpress, die irgendeine Javascript Funktion haben und würde sogar so weit gehen, dass dieses HowTo für Wordpress u.ä. Anwendungen gänzlich ungeeignet ist, wenn man nicht in der Lage ist das Ladeverhalten von .js Dateien zu ändern/umzuprogrammieren. Das schränkt das Einsatzgebiet von diesem HowTo zwar deutlich ein, aber wer seine Seite wirklich spürbar verbessern will, der kommt um solche Maßnahmen nicht herum. Es gibt zwar eine Menge Plugins insbesondere für Wordpress, aber mir ist noch keines untergekommen, das nicht alles nur verschlimmbessert, was indirekt aber an der Architektur von Wordpress liegt.

Die nachfolgende Funktion ersetzt die ansonsten übliche Vorgehensweise zum Einbinden von .js Dateien. <script src=""></script> Deswegen diese vollständig entfernen. Anders als meist angewendet, sollte der nachfolgende Code im <head> Bereich, aber nach der CSS Includierung platziert werden, was sich nicht negativ auf das Ladeverhalten auswirkt.

Code: Alles auswählen

<script>
var cb = function &#40;&#41; &#123;
    var l = document.createElement&#40;"script"&#41;;
    l.src = "/Pfad_zum_Script/script.js";
    var h = document.getElementsByTagName&#40;"head"&#41;&#91;0&#93;;
    h.parentNode.insertBefore&#40;l, h&#41;;
&#125;;
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if &#40;raf&#41; &#123;
    raf&#40;cb&#41;;
&#125; else &#123;
    window.addEventListener&#40;"load", cb&#41;;
&#125;
</script>
Pfad_zum_Script/script.js gegen eigenen Pfad ersetzen

Dieses Script ist nicht das "One-And-Only" Script, wie man das machen kann. Es gibt verschiedene andere Wege, die das Gleiche machen. Dies nur für die notorischen Nörgler... ;)

Auch bei diesem HowTo gilt: Es ist nur ein Teil von einem Komplex an Maßnahmen. Gleichermaßen macht es aus einem lahmen Server keinen schnellen. Wer da tiefer in die Materie einsteigen will, bitte per PM bei mir melden.

Anzeige von: