Forum - Ladezeiten von Webseiten anzeigen und verkürzen

Um alle Funktionen nutzen zu können, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! » Ladezeiten von Webseiten anzeigen und verkürzen

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - 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! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolutionär! Videos und Webseiten zur Freien Energie. Wasserstoff - Energieträger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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 datum

15.02.2011 19:19 (zuletzt bearbeitet: 13.10.2024 15:48)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4005
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1798

Ladezeiten von Webseiten anzeigen
Aktualisiert 04.09.23

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 geladene Skripte (über z.B. "onload" im Body).
Letztendlich kann etwas mit der Geschwindigkeit der Internetverbindung nicht stimmen.

Installation für alle Templates & Mobil

Das Script wird wie folgt eingebaut:

Das komplette Skript kann für die Template (v1-4) in die Kopf- oder Fußzeile, für das neue Xobor V6 & Mobil nach Eigenes Javascript oder Kopfzeile kopiert werden, oder auch in eine Portal-Box!
Um das Skript auch anders zu platzieren geht das über ein Plugin unter z.B. "Obere Leiste, Untere Leiste oder Forum Übersicht" (bessere Ladezeiten)!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template " markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick !

Die Ladezeit wird über Zeile 24 ausgegeben und der Ladetext bestimmt!
In Zeile 3-9 wird das Aussehen angepasst!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<style>
#ladezeit {
  display:inline-block;
  margin-top:5px;
  font: 13px Arial, serif;
  color:#FCC803;
  background:#000120;
  padding:5px 20px;
  border-radius:5px;
}
</style>
 
<center>
  <div id="ladezeit">Keine Anzeige verfügbar!</div>
</center>
 
<script>
  var ladestart = new Date().getTime();  
 
  function seitenladezeit() {  
    var ladeende = new Date().getTime();  
    var ladezeit = (ladeende - ladestart) / 1000 ; 
 
    document.getElementById("ladezeit").innerHTML = "Es hat "+ ladezeit +" Sekunden gedauert, die Seite zu laden!"; 
  }
 
  window.addEventListener('load', function(){
    seitenladezeit(); 
  });
</script> 
 

Schließen

[img_mod=200px]https://files.homepagemodules.de/b104774/f31t485p3240n2_uWraZdSe.png[/img]

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!

HTML-Script für Verbindungsgeschwindigkeiten:

iFrames, Seitenlade-Skript und Verbindungsgeschwindigkeit!!

DSL-Geschwindigkeit testen:

• DSL-Geschwindigkeitstest

Bis dann
Wolfgang

Hans58, Magister und Dankeschön finden das Top!

Antworten

#2 | Echte standardisierte Ladezeiten von Webseiten präzise anzeigen! datum

09.04.2026 14:30

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4005
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1798

Echte standardisierte Ladezeiten von Webseiten präzise anzeigen!

Aktualisiert 10.04.2026

Ladezeitmessung mit Navigation Timing API Die Navigation Timing API ist ein offizieller W3C‑Standard.
Über "nav.duration" wird die komplette Ladezeit einer Seite gemessen und vom Browser selbst präzise berechnet.
Messungen mit "Date.now " entfallen (ungenau)!
Der Einbauort im Template ist unkritisch!
"performance.now()" ist kein Ersatz, aber ein perfekter Fallback, wenn "nav.duration" fehlt (z.B.: Safari/iOS).

Installation für alle Templates

Die Anzeige über eine Class oder ID platzieren

Der Einbauort ist unkritisch, kann als Plugin unter "Inline-Element - Obere Leiste - html_head_open" anlegen werden!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template " markiert werden, z.B. Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick !

Zeile 8 bestimmt den Standort über eine Class oder ID (Rechte Maustaste "Untersuchen").
Hier ist "#obere_leiste " fürs Bussines-Template (v4) ausgewählt und wird unter dem "Header " angezeigt.
Über ein Komma können auch weitere Standorte eingetragen werden (z.B.: $('#obere_leiste, .footer').... )
Über Zeile 10 wird das Aussehen der Ladezeit-Anzeige bestimmt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script>
window.addEventListener("load", () => {
  setTimeout(() => {
    // --- Ladezeit ermitteln (Navigation Timing) ---
    const nav = performance.getEntriesByType("navigation")[0], ms = nav ? nav.duration : performance.now(), timeMS = Math.round(ms);
 
    // --- Ausgabe ---
    $('#obere_leiste').after(
      `<center><br>
        <div style="background:#444;display:inline-block;margin:auto; padding:4px 10px;font-size:12px;color:#fff;border-radius:4px;">
          Ladezeit: ${timeMS} ms
        </div>
      </center>`
    );
  }, 400);
});
</script>
 

Die Anzeige mit zusätzlicher Farbskala

Der Einbauort ist unkritisch, kann als Plugin unter "Inline-Element - Obere Leiste - html_head_open" anlegen werden!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template " markiert werden, z.B. Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick !

Zeile 11 bestimmt den Standort über eine Class oder ID (Rechte Maustaste "Untersuchen").
Hier ist "#obere_leiste " fürs Bussines-Template (v4) ausgewählt und wird unter dem "Header " angezeigt.
Über ein Komma können auch weitere Standorte eingetragen werden (z.B.: $('#obere_leiste, .footer').... )
Über Zeile 13 wird das Aussehen der Ladezeit-Anzeige bestimmt.
In Zeile 8 sind die Farben und Umschaltezeiten eingetragen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script>
window.addEventListener("load", () => {
  setTimeout(() => {
    // --- Ladezeit ermitteln (Navigation Timing) ---
    const nav = performance.getEntriesByType("navigation")[0], ms = nav ? nav.duration : performance.now(), timeMS = Math.round(ms);
 
    // --- Farbskala ---
    const color = timeMS > 1500 ? "#f44336" : timeMS > 800 ? "#ff9800" : "#2a8d70";
 
    // --- Ausgabe ---
    $('#obere_leiste').after(
      `<center><br>
        <div style="background:${color};display:inline-block;margin:auto; padding:4px 10px;font-size:12px;color:#fff;border-radius:4px;">
          Ladezeit: ${timeMS} ms
        </div>
      </center>`
    );
  }, 400);
});
</script>
 

Bis dann und viel Erfolg beim Umsetzen
Wolfgang

Dankeschön findet das Top!

Antworten

Moderations-Kommentar:

Neue JS mit "Navigation Timing API", Standort ist unkritisch.

#3 | RE: Echte Ladezeiten von Webseiten präzise anzeigen! datum

09.04.2026 21:46 (zuletzt bearbeitet: 10.04.2026 08:14)

Zitat von Wolfgang im Beitrag #2

Am besten dass ganze JS als Plugin unter "Obere Leiste - Header" anlegen

keine gute Empfehlung

hatte es schon an anderer Stelle geschrieben. In die Falle bin ich auch getappt https://www.hpm-support.de/t548319f11769...ste-Header.html

hier wird das HTML-Grundgerüst erklärt.

besser ist obere Leiste - Inline - html_head_open als erstes Eingabefeld

Zitat
Ihre augenblickliche Verbindungsgeschwindigkeit beträgt 17.17 MB/s.
Es hat 3047 ms Sekunden gedauert, die Seite zu laden.

Gruß Bernd

Wolfgang und Dankeschön finden das Top!

Antworten

#4 | Echte Ladezeiten von Webseiten präzise anzeigen - Standort bestimmen! datum

10.04.2026 11:12

Echte Ladezeiten von Webseiten präzise anzeigen - Standort bestimmen!

Hallo BerndDas passt 100%ig, genau unter "head", so wie es sein soll, perfekt!
Habe die Installationsanweisung in Beitrag #2 gleich umgeschrieben.

Installation Obere Leiste - Inline - html_head_open

Bis dann
Wolfgang

Dankeschön findet das Top!

Antworten

#5 | RE: Echte Ladezeiten von Webseiten präzise anzeigen - Standort bestimmen! datum

10.04.2026 13:04 (zuletzt bearbeitet: 10.04.2026 13:28)

Klappt!
Wieder nur eine Winzigkeit, kann auch so bleiben:
Bei mir im Gegensatz zu dir ist die Anzeige ans Navigationsmenü gequetscht, was bei grün den Farbclash verstärkt:

Und eine Standort-Anleitungsverbesserung: "Obere Leiste" fehlt noch in #2.

Dankeschön! von Jan

Die neuesten Beiträge auf meinem Naturforum...

Antworten

#6 | RE: Echte Ladezeiten von Webseiten präzise anzeigen - Standort bestimmen! datum

10.04.2026 15:41

RE: Echte Ladezeiten von Webseiten präzise anzeigen - Standort bestimmen!

Hallo JanAbstände, bzw. eine freie Zeile bekommst Du meistens mit "br " oder auch mit "<div class="clear"></div> " hin oder aber auch über die CSS mit "margin-top ".
Habe im JS ein "<br> " eingefügt!
Wenn Dir die Farben zu grass sind, kannst Du ja das JS ohne Farbscala nehmen oder auch ein dunkleres Grün (#2a8e60) sollte gehen.

Gruß
Wolfgang

Dankeschön findet das Top!

Antworten

#7 | RE: Echte Ladezeiten von Webseiten präzise anzeigen - Standort bestimmen! datum

12.04.2026 19:14 (zuletzt bearbeitet: 12.04.2026 19:19)

Herzlichen Dank, so passt das!

Danke auch für den dunkleren Grün-Vorschlag! - erstmal besser!
Nächster Versuch ein noch satteres tiefes Grün #2E8B57.
Putzigerweise hatte die duckduckgo-KI dein erstes helleres Grün als kompatibel vorgeschlagen... ¯\_(ツ)_/¯

Wenn mich kein Grün 100%ig überzeugt, nehm ich einfach das Forums-Blau... dann "verschwindet" es (als "OK") in den normalen Forumfarben...

Dankeschön!
von Jan

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

Xobor Adventskalender, Advents-Quizkalender, Osterkalender mit Auslösegrafik für alle Templates » « Navigations-Pfad verbessern und anpassen - Teil 1-4!

Ähnliche Themen

Antworten

Letzter Beitrag

Mit der Lupe 2 Bilder anzeigen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Arenas 3 16.11.2020 21:33
Arenas • Zugriffe: 817
Passwort beim Login anzeigen!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 5 03.05.2020 20:50
Wolfgang • Zugriffe: 2326
Buchungs/Zahlungssystem fuer Webseite
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Amarok 3 18.03.2018 16:00
Amarok • Zugriffe: 8305

Eigenes Impressum und übersichtliche Datenschutzerklärung für die Webseite
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

10.09.2023 17:51
von

Kipper-Spedition • Zugriffe: 5105

Ladezeit
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Magister 4 20.10.2015 16:32
Magister • Zugriffe: 1403
Weltzeituhr - Verschiedene Zeiten anzeigen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Magister 13 16.01.2024 18:04
Wolfgang • Zugriffe: 9035

RIOT: Gutes Bild-Optimierungstool für Webseiten
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

07.09.2012 21:49
von

Wolfgang • Zugriffe: 1654

Framekiller - Mehr Sicherheit für die eigene Webseite
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

12.06.2023 19:36
von

Wolfgang • Zugriffe: 2312

Bilder vorladen - Schnelles Anzeigen von Webseiten
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

12.05.2018 20:33
von

Wolfgang • Zugriffe: 1804

Forum Übersicht → XOBOR-Foren und Homepages →

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! → Ladezeiten von Webseiten anzeigen und verkürzen

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gefällt und Du Dich hier genauso wohlfühlst wie wir.

Um Dir und den anderen Mitgliedern das Bestmögliche bieten zu können, würden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras ergänzen.

Wenn Du uns dabei unterstützen möchtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

Forum - Ladezeiten von Webseiten anzeigen und verkürzen

Ladezeiten von Webseiten anzeigenAktualisiert 04.09.23

Echte standardisierte Ladezeiten von Webseiten präzise anzeigen!

Aktualisiert 10.04.2026

Echte Ladezeiten von Webseiten präzise anzeigen - Standort bestimmen!

RE: Echte Ladezeiten von Webseiten präzise anzeigen - Standort bestimmen!

Ladezeiten von Webseiten anzeigen
Aktualisiert 04.09.23