nicht angemeldet
anzeigen, dass Webseite geladen wird
Linuchs
anzeigen, dass Webseite geladen wird
Linuchs
Matthias Scharwies
Der Martin
Rolf BMoin,
z.Z. habe ich eine sehr langsame Internet-Verbindeung.
Da fällt auf, dass bei Anforderung einer neuen Seite die alte Seite stehen bleibt. Es wirkt so, als sei der Klick auf den Link nicht erfolgt.
Da habe ich mir gedacht, den Seiten-Kopf vorauszuschicken:
flush();
ob_flush();
Das wird aber ignoriert. Nach wie vor wird die Seite nach längerem Warten insgesamt angezeigt.
Erst dann, wenn ich php mind. 2s schlafen lasse, wird der Kopf übertragen. So auch das Beispiel bei php.net. Ich dachte, das dient der gewollten Verzögerung, ist aber wohl technisch notwendig.:
ob_flush();
flush();
sleep(2);
Blöd ist natürlich, dass meine schnellen Seiten dann 2.2 s auf dem Server laufen statt 0.2 und schnelle Internet-Verbindungen unnötig gebremst werden.
Es gibt Seiten, die mit einem drehenden Kreis das Warten anzeigen. Würde ich auch nehmen, wenn der vorab übertragen werden könnte vor dem Rest der Seite.
Gruß, Linuchs
-
Da habe ich mir gedacht, den Seiten-Kopf vorauszuschicken:
flush(); ob_flush(); sleep(2);Beware!
Eine der „anderen Seiten“, die sowas anzeigt, ist von mir - allerdings schon etliche Jahre alt. Das Funktionsprinzip ist klar - aber das geht natürlich besser!
Dort gibt es ein wenig HTML:
<div id="waitingFor">Daten werden geholt ...</div>CSS:
#waitingFor { background-image:url(wait.gif); background-repeat:no-repeat; // … }Javascript:
function waiting_For() { document.getElementById( 'waitingFor' ).style.display = 'block'; document.getElementById( 'data' ).style.display = 'none'; return true; //Das ist wichtig! }Dazu, als Starter:
<form ... onsubmit="waiting_For();">(Das geht auch mit Links, füge den passenden Events die Funktion
waiting_For()hinzu )und:
function my_load_ready () { document.getElementById( 'waitingFor' ).style.display = 'none'; // ... }Dazu den Starter:
<body onload="my_load_ready()">-
Servus!
Da habe ich mir gedacht, den Seiten-Kopf vorauszuschicken:
flush(); ob_flush(); sleep(2);Beware!
Eine der „anderen Seiten“, die sowas anzeigt, ist von mir - allerdings schon etliche Jahre alt. Das Funktionsprinzip ist klar - aber das geht natürlich besser!
CSS:
#waitingFor { background-image:url(wait.gif); background-repeat:no-repeat; // … }Man könnte anstatt des (wsl. animierten) gif ein SVG verwenden. Temani Afif hat eine 4-teilige Serie über solche Spinner veröffentlicht:
- Single Element Loaders: The Spinner (css-tricks.com)
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Dieser Beitrag wurde gesperrt: Der Beitrag ist unkonstruktiv oder provokativ und trägt zu einer Verschlechterung der Stimmung bei.
Temani Afif hat eine 4-teilige Serie über solche Spinner veröffentlicht:
Fällt manchen Leuten eigentlich wirklich nicht auf, was sie da mit ihrem Denglisch für einen Spinnkram verzapfen?
-
Temani Afif hat eine 4-teilige Serie über solche Spinner veröffentlicht:
Fällt manchen Leuten eigentlich wirklich nicht auf, was sie da mit ihrem Denglisch für einen Spinnkram verzapfen?
Ich habe das nicht geschrieben. Ich war es!
-
Hallo,
Temani Afif hat eine 4-teilige Serie über solche Spinner veröffentlicht:
Fällt manchen Leuten eigentlich wirklich nicht auf, was sie da mit ihrem Denglisch für einen Spinnkram verzapfen?
Ich habe das nicht geschrieben. Ich war es!
dazu ein alter Kalauer.
In einem Haus wohnen der Herr Niemand, der Herr Keiner und der Herr Blöd.
Blöd protestiert bei der Polizei: "Niemand hat mir auf den Kopf gespuckt! Keiner hat's gesehen."
Fragt der Polizist: "Sagen Sie mal, sind Sie eigentlich blöd?" - "Ja, genau!"Einen schönen Tag noch
Martin--
Man ist nicht behindert, man wird behindert.
-
-
Hallo Du,
manchen Leuten fällt auch nicht auf, dass sie sich überflüssig wichtig machen.
close
Rolf
--
sumpsi - posui - obstruxi
-
-
Da habe ich mir gedacht, den Seiten-Kopf vorauszuschicken:
flush(); ob_flush(); sleep(2);Beware!
Eine der „anderen Seiten“, die sowas anzeigt, ist von mir - allerdings schon etliche Jahre alt. Das Funktionsprinzip ist klar - aber das geht natürlich besser!
Dort gibt es ein wenig HTML:
<div id="waitingFor">Daten werden geholt ...</div>CSS:
#waitingFor { background-image:url(wait.gif); background-repeat:no-repeat; // … }Javascript:
function waiting_For() { document.getElementById( 'waitingFor' ).style.display = 'block'; document.getElementById( 'data' ).style.display = 'none'; return true; //Das ist wichtig! }Dazu, als Starter:
<form ... onsubmit="waiting_For();">(Das geht auch mit Links, füge den passenden Events die Funktion
waiting_For()hinzu )und:
function my_load_ready () { document.getElementById( 'waitingFor' ).style.display = 'none'; // ... }Dazu den Starter:
<body onload="my_load_ready()">Gerade hinzugefügt:
window.addEventListener( 'pageshow', function () { document.getElementById( 'waitingFor' ).style.display = 'none'; document.getElementById( 'data' ).style.display = 'block'; history.replaceState( null, null, window.location.pathname ); }, false );Das soll dafür sorgen, dass dieses „Bitte-warten-Dingens“ verschwindet, wenn man mit den Zurück- und Vorwärtstasten des Browsers navigiert.
Das war, wegen des aggressiven browser- und serverseitigen Cachings der Webseite nicht wirklich einfach… und ich hoffe das auch bei allen anderen spätestens nach 12h funktioniert.
-
Lieber Jörg,
ich war eben auf deiner Hp und der Link zu dem Blog mit dem euroweb-Vorfall geht nicht mehr (unter "Preise"). Könntest Du das bitte korrigieren? Gruß Hans
-
-
Eine der „anderen Seiten“, die sowas anzeigt, ist von mir - allerdings schon etliche Jahre alt. Das Funktionsprinzip ist klar - aber das geht natürlich besser!
Die Seite ist so klein und schnell, da sehe ich beim Laden nichts.
Du zeigst dann das Warten-Symbol, wenn die schon vorhandene Seite dieses Symbol einblendet.
Beim Wechsel von einer auf eine andere meiner Seiten hatte das beendete Programm ein Wartesymbol gezeigt. Das klappt aber nicht, wenn man von außerhalb auf meine Seite zugreift.
-
Eine der „anderen Seiten“, die sowas anzeigt, ist von mir - allerdings schon etliche Jahre alt. Das Funktionsprinzip ist klar - aber das geht natürlich besser!
Die Seite ist so klein und schnell, da sehe ich beim Laden nichts.
Das ist gute Absicht. Anno 2004 hatten
mancheviele noch Modems.Du zeigst dann das Warten-Symbol, wenn die schon vorhandene Seite dieses Symbol einblendet.
Ja.
Beim Wechsel von einer auf eine andere meiner Seiten hatte das beendete Programm ein Wartesymbol gezeigt. Das klappt aber nicht, wenn man von außerhalb auf meine Seite zugreift.
Ich hab mir Deine Seite mal anschaut. Also:
- html, css und js sind auch nur löblich wenige Kilobyte.
- Es sind allerdings recht viele Bilddateien zu laden.
- Googles PageSpeed Insights hat jetzt auch nicht gar so viel zu meckern.
Wenn Du sowas wie eine Start-Vor-seite haben willst, dann musst Du eine solche liefern. Dazu müsstest Du wohl den Inhalt zunächst verstecken (dafür aber einen „leichtgewichtigen Begrüßungsbildschirm“ anzeigen) und auf das Event 'load' hin, den Begrüßungsbildschirm ausblenden und den eigentlichen Inhalt anzeigen.
-
-
-
Hallo Linuchs,
du lieferst deine Seite ge-gzip-t aus. Laut der flush-Seite im PHP Handbuch buffert mod_deflate die Ausgabe. Die 2s könnten ein Timeout in diesem Modul sein, nach dem es die Ausgabe erstmal als erledigt ansieht.
Ich finde im mod_deflate keinen Parameter, um einen "warte X sekunden auf Daten" Timeout einzustellen.
Heißt also: dagegen kommst Du mit flush nicht an, weil das rein PHP intern den Ausguss leerspült. Du kannst nur versuchen, den sleep soweit zu reduzieren, bis er gerade noch wirkt. Oder mod_deflate deaktivieren, das hat aber andere Nachteile…
Rolf
--
sumpsi - posui - obstruxi-
Du kannst nur versuchen, den sleep soweit zu reduzieren, bis er gerade noch wirkt. Oder mod_deflate deaktivieren, das hat aber andere Nachteile…
Beides ist kontraproduktiv. Googles PageSpeed Insights „sagt“:
Erstreaktionszeit des Servers verringern → 2,29 s
- Ich würde also die Seite schneller machen wollen, statt langsamer. Und, da die Verzögerung nicht durch die Datenmenge begründet ist, (m)einen brutalen Cache empfehlen. Das Ergebnis ist dann eine „quasistatische Webseite“. Das passt hier wohl besser.
-
Hallo Rolf,
du lieferst deine Seite ge-gzip-t aus.
Aha, wusste ich nicht. Sehe zwar unter $_SERVER, dass zip zulässig ist, aber dass das auch geliefert wird ...
Und danke für die Erklärung über das zip Modul
Gruß, Linuchs
-
Denn es wird langsam mal Zeit, dass man dem Client (und Proxys) das ganze HTML/CSS/JS/JSON/Fonts/Pics-Geraffel „one-shot“ via tar.gz oder zip „hinkippen“ kann.
Oder hab ich DAS verpasst?
Bis jetzt ist es ja so, dass der Browser auf seine Anfrage nach der Webseite einen Zettel bekommt, auf dem (neben ein paar anderen Infos) steht „Hömma! Hole dies, das und jenes noch ab!“ Und was er dann bekommt sind dann teilweise auch wieder solche Zettel…
Die Antwort „PDF“ kenne ich übrigens.
- Badehose ☑️
- Handtuch ☑️
- Picknickdecke ☑️
- Buch ☑️
→ Start!
-
Hallo,
Denn es wird langsam mal Zeit, dass man dem Client (und Proxys) das ganze HTML/CSS/JS/JSON/Fonts/Pics-Geraffel „one-shot“ via tar.gz oder zip „hinkippen“ kann.
Oder hab ich DAS verpasst?
oder nur nicht ernst genommen, wie so viele andere auch?
Hat sich anscheinend im Web nicht durchgesetzt.Bis jetzt ist es ja so, dass der Browser auf seine Anfrage nach der Webseite einen Zettel bekommt, auf dem (neben ein paar anderen Infos) steht „Hömma! Hole dies, das und jenes noch ab!“ Und was er dann bekommt sind dann teilweise auch wieder solche Zettel…
Nicht zwangsläufig. Stylesheets kann man ins Hauptdokument schreiben, Scripts auch, Bilder kann man als data-URLs einbinden ...
Und diese Art von "einbinden" kann ja auch serverseitig erfolgen, so dass man die EInzelkomponenten immer noch modular bearbeiten und pflegen kann. Nur wenn z.B. eine Bildressource mehrmals referenziert wird, wird dieses Verfahren ineffizient.
Die Antwort „PDF“ kenne ich übrigens.
Stimmt, das ist auch eine Methode.
Einen schönen Tag noch
Martin--
Man ist nicht behindert, man wird behindert. -
Hallo Raketenwilli,
Oder hab ich DAS verpasst?
Vielleicht. Oder ich verstehe deine Frage falsch.
Die Antwort wäre SPDY (sprich: speedy), später umbenannt in HTTP/2
Da fragt der Client nach index.html und der Server kommt an mit "Hier, hast Zettel. Aber hömma, da brauchste garantiert auch noch foo.js und bar.css und favicon.png und adrotator.js und ga.js und fatbackground.bmp. Kleben gleich mit dran!"
Nachdem der Client das verdaut hat 😲, kann er den Stapel inspizieren und als nächstes fragen "Chefe, ich bräuchte dann bitte auch noch bar.js und hugo.css und jquery.js und bootcrap.css und monsterlib.js und everyfunc.lib". Was der Server dann als einen geHPACKten Haufen rausrotzt. Zwei Requests, fertig.
Und weil SPDY nicht fix genug ist, kommt auch noch QUIC, a.k.a. HTTP/3. Vor zwei Monaten als RFC 9114 zum Kommentieren freigegeben.
Wusste ich das? Hmm. HTTP/2 schon. SPDY und QUIC und RFC9114 - danke, Tante Wiki.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Raketenwilli,
Oder hab ich DAS verpasst?
Vielleicht. Oder ich verstehe deine Frage falsch.
Die Antwort wäre SPDY (sprich: speedy), später umbenannt in HTTP/2
*Kopfklatsch!*
fastix@raspi4:/etc/apache2/mods-available $ ll *http2* -rw-r--r-- 1 root root 1240 2. Apr 2019 http2.conf -rw-r--r-- 1 root root 62 3. Nov 2018 http2.load -rw-r--r-- 1 root root 97 3. Nov 2018 proxy_http2.loadDann will ich mal damit befassen.
Erste Erkenntnisse:
mod_prefork muss weg, mod_php8.1 muss weg, mpm_worker und php8.x-fpm müssen her...
-
-
-
Moin Linuchs,
z.Z. habe ich eine sehr langsame Internet-Verbindeung.
Da fällt auf, dass bei Anforderung einer neuen Seite die alte Seite stehen bleibt. Es wirkt so, als sei der Klick auf den Link nicht erfolgt.
zeigt der Browser sonst nichts an, keinen Ladebutton (Desktop) oder -balken (Mobiltelefon)? Bei meinen Browsern ist das nämlich der Fall.
Viele Grüße
Robert-
Moin Robert,
zeigt der Browser sonst nichts an, keinen Ladebutton
Doch der FF, sehr winzig und unauffällig in der linken oberen Ecke das Symbol für „gefährliche Kreuzung“.
Und so wie runde Flaggen (statt eckige) auf Webseiten für Sprachen (statt Nationen) verwendet werden, haben Pale Moon und FF auch das Verkehrsschild gerundet:
Gruß, Linuchs
-
-
-
Auf die Sache mit dem Vorhalten einer quasistatischen Webseite hab ich Dich ja schon hingewiesen. Google hat auch 2,3 Sekunden Wartezeit auf die index.php hingewiesen...
-
Aber eine der Verzögerungen, die mir in den Entwicklertools aufgefallen sind, war dass das Laden (der Start des Ladens!) einiger Ressourcen (Grafiken) recht spät erfolgte.
Beim Setup für http/2 auf meinem Heimserver ist mir dann aufgefallen, dass ich schon seit „langer“ Zeit (die Datei .htaccess ist vom 21. Juni 2021 ... die Änderungen sind aber wohl älter) Optimierungen darin habe:
<FilesMatch "\.(html|php|php\?.*)$"> Header add Link "</css.css>; rel=preload; as=style" Header add Link "</buttons.js>; rel=preload; as=script" Header add Link "</bilder/konqueror.gif>; rel=preload; as=image" Header add Link "</autoindex-files/gray-down.svgz>; rel=preload; as=image" Header add Link "</favicon.ico>; rel=icon" </FilesMatch> <FilesMatch ".*/$"> Header add Link "</css.css>; rel=preload; as=style" Header add Link "</buttons.js>; rel=preload; as=script" Header add Link "</bilder/konqueror.gif>; rel=preload; as=image" Header add Link "/autoindex-files/gray-down.svgz>; rel=preload; as=image" Header add Link "</favicon.ico>; rel=icon" </FilesMatch>Damit fängt der Browser (hoffentlich) an, die übermittelten Ressourcen sofort nach Empfang der Headers zu laden. Der frühere Beginn der Downloads sorgt dafür, dass die Webseite insgesamt schneller geladen wird.
Und dann noch das hier:
<FilesMatch "\.(png|jpg|jpeg|gif|bmp|ico|pdf|svg|svgz)$"> Header set Cache-Control "max-age=604800,public" Header set Pragma "public" ExpiresActive On ExpiresDefault A8640000 </FilesMatch>Grafiken und PDFs werden 100 Tage lang „gecached“.
-
