Ladezeiten von Webseiten anzeigen und verkürzen

Forum � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Ladezeiten von Webseiten anzeigen und verkürzen
Hier sehen Sie Beitr�ge zu den einzelnen Themen

Themen-Einstellungen Thema

Thema abonnieren

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Ladezeiten von Webseiten anzeigen und verkürzen

Wolfgang

Administrator

Informationen anzeigen

15.02.2011 19:19 (zuletzt bearbeitet: 15.01.2019 07:17)

Ladezeiten von Webseiten anzeigen
Aktualisiert 14.01.19

Oft kann es eine große Hilfe sein, die Ladezeiten der eigenen Webseiten zu überwachen. Sie können zur Störungseingrenzung genutzt werden oder geben auch viele Informationen über den Zustand preis.

Sind die Ladezeiten einer Seite zu hoch, könnte es folgende Ursache haben:

  • Die verwendeten Bilder für den Hintergrund oder der Themen sind nicht "Web optimiert".
  • Zu viele Animationen, zu viele einzelne Bilder finden Verwendung.
  • Zu viele im Hintergrund gelade Scripte (über z.B. "onload" im Body).
  • Letztendlich kann etwas mit der Geschwindigkeit der Internetverbindung nicht stimmen.

Das Script wird wie folgt eingebaut:
  • Das JavaScript (Zeile 4-14 ) wird zwischen "<head> + /head>", ganz oben eingetragen.
  • Das Script nimmt sich jQuery zur Hilfe und läuft dadurch stabiler!
  • In allen Xobor-Templates ist bereits jQuery geladen!
  • Wichtig! Die Ladezeit wird über Zeile 21 ausgegeben!.
  • Zeile 21 wird an der Stelle im "body " eingebaut, an der sie ausgegeben werden soll!
  • Zum Testen können auch Zeile 4-14 und Zeile 21 in diegesetzt werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!DOCTYPE html>
<html>
<head>
<!-- Wenn jQuery nicht vorhanden ist, Zeile 5 freigeben -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script type="text/javascript" language="JavaScript">
//// Ladezeit ////
var ladestart = new Date();
$(function() {
var ladeende = new Date();
var ladezeit = ladeende.getTime() - ladestart.getTime();
$('#ladezeitanzeige').html(ladezeit / 1000 + " Sekunden");
});
</script>
 

 
</head>
<body>
 
<span id="ladezeitanzeige">Keine Zeit verfügbar!</span>
 
</body>
</html>
 

Schlie�en

Das Script in Aktion:

Wie lange braucht diese Webseite, um geladen zu werden?

Bilder Web optimieren:

  • Online PNG Optimierer
  • Online JPEG Optimierer
  • Online GIF Optimierer
  • RIOT

Webseiten schneller laden durch Vorladen von Bildern:

Vorladen von Bildern!

DSL-Geschwindigkeit testen:

• DSL-Geschwindigkeitstest

Minimieren von "$(function(){ ... }" oder "$(document).ready(function(){ ... }:

Mit dem genannten Code werden Aktionen erst ausgeführt, nachdem der gesamte Quelltext des Scriptes geladen wurden ist.
Das braucht Zeit! Hier ist unbedingt zu prüfen, ob auf diesen Code verzichtet werden kann. Oft hilft es das Script unterhalb eines Div-Containers oder ganz am Ende des "Body" zu platzieren!

• "$(document).ready()" minimieren

Bis dann
Wolfgang

Antworten! Like

Like!

Hans58 und Magister finden das Top!

<img src='//files.homepagemodules.de/b2001010/a_275.png' style='margin-top:-2px;'> Zum ersten Beitrag

<img src='//files.homepagemodules.de/b104774/f46t1197p2704n118_uIrkvhex.png' style='margin-top:0px;'> Zum letzten Beitrag!

Thema abonieren Startseite Letzte Beitr�ge

Antworten

Moderations-Kommentar:
Lade-Script komplett mit jQuery aufgebaut!

#2 | Aktualisiert: Ladezeiten von Webseiten anzeigen und verkürzen

Wolfgang

Administrator

Informationen anzeigen

10.11.2018 10:16 (zuletzt bearbeitet: 14.01.2019 23:21)

Aktualisiert: Ladezeiten von Webseiten anzeigen und verkürzen!

Beitrag #1 aktualisiert!

  • Das Script wurde erneut überarbeitet!
  • Ausgabezeit läuft jetzt komplett über jQuery!
  • Das Script läuft stabiler und stört kein anderes Script!
  • In allen Xobor-Templates ist jQuery bereits geladen!

Das Script in Aktion:

Wie lange braucht diese Webseite, um geladen zu werden?

• Damit die Zeiten korrekt gemessen werden, muss das Script im "Header", so weit wie möglich, oben auf der Webseite platziert werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!-- Wenn jQuery nicht vorhanden, Zeile 8 auskommentieren -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script type="text/javascript" language="JavaScript">
//// Ladezeit ////
var ladestart = new Date();
$(function() {
var ladeende = new Date();
var ladezeit = ladeende.getTime() - ladestart.getTime();
$('#ladezeitanzeige').html(ladezeit / 1000 + " Sekunden");
});
</script>
 
</head>
<body>
 
<span id="ladezeitanzeige">Keine Zeit verfügbar!</span>
 
 

Schlie�en

Wolfgang

Antworten! Like

Like!

Thema abonieren Startseite Letzte Beitr�ge

Antworten

#3 | Schneller: Ladezeiten von Webseiten anzeigen und verkürzen!

Wolfgang

Administrator

Informationen anzeigen

15.01.2019 00:18 (zuletzt bearbeitet: 25.01.2019 21:00)

Schneller: Ladezeiten von Webseiten anzeigen und verkürzen!

Da das Laden von jQuery und das Ausführen von $(document).ready() zusätzlich Zeit in Anspruch nimmt und man die Ladezeiten einer Webseite minimieren will, ist zu prüfen ob auf jQuery verzichtet werden kann oder eine minimierte Version (min.js) ausreicht!
Die folgende Ladeanzeige verzichtet auf jQuery und kommt ohne $(document).ready() aus!
Allerdings ist das Script nicht so flexibel wie in Beitrag #1 und man muss auf die Platzierung der Ladeanzeige (SPAN-Container) beachten!
Zudem besteht das Script aus zwei Teilen!

  • Teil 1 vom Script Zeile 4-7 kommt ganz oben in den Header!
  • Teil 2 vom Script Zeile 16-21 kommt ganz unten in den Body der Webseite!
  • Die Ladezeitanzeige Zeile 12 muss oberhalb vom Script Teil 2 plaziert werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="JavaScript">
// Ladezeit Teil 1
var ladestart = new Date();
</script>
 
 
</head>
<body>
<span id="ladezeitanzeige">Keine Zeit verfügbar!</span>
 
 
 
<script type="text/javascript" language="JavaScript">
// Ladezeit -Teil 2
var ladeende = new Date();
var ladezeit = ladeende.getTime() - ladestart.getTime();
document.getElementById("ladezeitanzeige").innerHTML = ladezeit/1000 +" Sekunden";
</script>
</body>
</html>
 

Schlie�en

Bis dann und gutes Gelingen

Wolfgang

Antworten! Like

Like!

Thema abonieren Startseite Letzte Beitr�ge

Antworten

#4 | RE: Schneller: Ladezeiten von Webseiten anzeigen und verkürzen!

15.01.2019 00:36

Hallo Wolfgang,

...das verstehe ich jetzt grad nicht so ganz. Hat denn Dein Ausgangsscript Query zusätzlich geladen ??

____________________

"Wer anderen eine Grube gräbt, ist selbst der Grubengräber!" :-)

Antworten! Like

Like!

Thema abonieren Startseite Letzte Beitr�ge

Antworten

#5 | RE: Schneller: Ladezeiten von Webseiten anzeigen und verkürzen!

15.01.2019 07:38 (zuletzt bearbeitet: 15.01.2019 07:40)

Schneller: Ladezeiten von Webseiten anzeigen und verkürzen!

Hallo Frank,
da habe ich mich nicht so genau und sehr allgemein ausgedrückt !

Das Script in Beitrag # 3 kann auch in Foren oder Homepages ohne JQuery eingesetzt werden.
In Xobor-Foren ist jQuery bereits vorhanden und wird nicht zusätzlich geladen. Hier ist keine Geschwindigkeitserhöhung drin!
Kann man die erwähnten Nachteile aus Beitrag # 3 in Kauf nehmen, ergibt sich eine kleine Beschleunigung durch
Verzicht von $(document).ready() !