Kleine, industrielle Seite

rage_all · 19. Juli 2017 14:47

Unter https://www.metall-baur.de/ gibt es das jüngste Schmuckstück von mir.

Ich muss mich noch in die kritischen Pfade der JavaScripts einarbeiten; für Features wie eben dem Slider ist jQuery und die bootstrap.js ja nötig. Klar ließe sich noch was komprimieren indem ich alles weglasse was nicht benötigt wird - wie dem auch sei: Sollte doch später noch was nachkommen, z.B. Accordeon, fange ich wieder von vorn an. Deswegen lasse ich den Umfang der Scripts wie im Original.
Daher auch die "schlechte" PageSpeed-Wertung von 85 bzw. 95.

Wenn ich es richtig verstanden habe, könnte ich das JavaScript auf den kritischen Bereich reduzieren, sofort laden und dann die komplette Bibliothek später nachladen. Hat jemand Erfahrungen damit?

Danke für Euer Feedback! big_smile

Andynium · 22. Juli 2017 08:53

Hab es mir mal kurz auf meinem Netbook angeschaut - trotz hier unterirdischer DSL-Anbindung waren die Seiten relativ flux da.

Allerdings zieht die Startseite schon mal 829 kB. Auf meinem Old-School-Smartphone und in meiner Gegend, wo LTE nicht zwingend Standard und G3 manchmal möglich ist (also eher HDSPA hmm ) isses natürlich schon ein ordentlicher Batzen...

Was mich unabhängig davon stutzig macht, das webpagetest.org mit der Seite irgendwie nicht klar kommt

https://www.webpagetest.org/result/1707 … 1/details/

Sollte eher so aussehen

https://www.webpagetest.org/result/1707 … 1/details/

rage_all · 22. Juli 2017 09:05

Naja, ich schätze die hatten Probleme zu der Zeit:
https://www.webpagetest.org/result/170722_C3_VNZ/

Mit Slider, Cookie-js und allem was dran hängt, bin ich aber insgesamt relativ zufrieden noch unter 1MB zu sein. Ich schicke Dir privat mal ne URL, da kommt Dir das grausen... big_smile

Das caching muss ich aber noch optimieren ... To-Do.

Andynium · 22. Juli 2017 09:27

rage_all schrieb:

Mit Slider, Cookie-js und allem was dran hängt, bin ich aber insgesamt relativ zufrieden noch unter 1MB zu sein.

Klar, die Zeiten, wo 50 kB als Limit für ne Startseite galt, sind schon länger vorbei big_smile ... aber mit ner HDSPA-Verbindung muss man da immer daran denken, in der Nähe der Kantine bzw. der Kaffeemaschine zu bleiben (wegen des Pausenkäffchens lol )

rage_all · 24. Juli 2017 10:03

Ja, ich überlege schon ein Plugin zu schreiben (...wenn-ich-nur-was-vom-programmieren-verstehen-würde...).
Der Slider ist ja mobil eigentlich gar nicht am Start; die Daten werden aber trotzdem geladen, weil <img src="" />.
Nur hab ich so meine Problemchen und finde es insgesamt umständlich ständig nochmal in die HTML-Ansicht zu gehen und irgendwelchen Quatsch zu machen - also müsste ein Modifier her.

Ein Plugin könnte (jedenfalls hab ich die Technik so verstanden) im Content nach <img> suchen und damit arbeiten (nur beispielsweise):
Vorher:

Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
<img src="tolles_foto.jpg" alt="So ein schönes Bild" />

Nachher:

Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
<img data-src="tolles_foto.jpg" data-src-retina="tolles_foto-retina.jpg" alt="So ein schönes Bild, mit Retina!" />

Aber, da müsste mir vorher nochmal dick Gedanken machen, was dann in der Praxis unten vor dem </body> stehen soll, z.B.

Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
<script>
$(document).ready(function() {
  $("img").unveil();
});
</script>

Oder stattdessen eine Funktion, die mittels JS die Bildschirmbreite prüft und dann (in Bootstrap-Syntax) nur die manipuliert oder nachladen lässt, wo der angegebene Breakpoint stimmt (z.B. wie beim Slider eben lg, md, sm - aber nicht xs).
Aber das ist schon wieder so eng gesteckt, dass außer mir mit einem solchen Plugin keiner was anfangen könnte... big_smile

Na, nochmal von vorn durchdenken, das.

bd0 · 26. Juli 2017 19:02

ich würde aus Sicherheitsgründen den Standartpfad: http://www.metall-baur.de/admin/
in irgendwas anderes ändern. Es sind ja nur zwei Handgriffe. Ausserdem noch zusätzlich den Admin-Pfad per Verzeichnissschutz sichern...

ansonsten ne hübsche kleine Seite. Ladezeiten sind bei mir gut!

NaN · 27. Juli 2017 10:35

Was die Größe der Bilder angeht, da gibt es doch den Trick mittels Javascript, Cookie und htaccess.
D.h. ein winziges JS im Head ermittelt alles was zu ermitteln gilt, um die entsprechenden Grafiken zu laden (User-Agent, Fenstergröße, Bildschirmauflösung, Viewport etc.) und speichert diese Daten in einem Cookie (ist nur eine Zeile Code). Und auf dem Server werden alle Anfragen, die Bilder laden sollen, auf ein bestimmtes Script umgeleitet, welches die Daten im Cookie auswertet und dann das entsprechende Bild auf eine bestimmten Größe skaliert, zwischenspeichert und ausliefert.
Das Prinzip nennt sich Adaptive Images.

rage_all · 28. Juli 2017 11:54

Cooler Link, vielen Dank!
Der muss jetzt leider erstmal Bookmark bleiben; in einer Woche gehts in den Urlaub und noch viel zu tun bis dahin...
Richtig fett wäre das natürlich als integriertes CMSms Modul oder Plugin. Mobiledetect mach ich ja schon mit einem Plugin - fürs 1.x gab es ja schon was, dass ich nur inhaltlich auf den neuesten Stand gebracht hatte - für das 2.x hat mir @cyberman geholfen nachdem die Syntax ja doch ein wenig anders ist.
Wenn das noch da oben drauf könnte ... hmm. big_smile

Jetzt mach ich erstmal eine mit dem Konzept händisch eingebunden, dann sehe ich ja wo welche Abfrage wann stattfinden muss. Mit 2.2.2. wurde die Reihenfolge im Rendering ja wieder angepasst (https://forum.cmsmadesimple.org/viewtop … 6&p=334165) - bei mir hatte das bei den letzten beiden Projekten noch keine Auswirkungen.

Andynium · 06. August 2017 16:14

rage_all schrieb:

Der Slider ist ja mobil eigentlich gar nicht am Start; die Daten werden aber trotzdem geladen, weil <img src="" />.
Nur hab ich so meine Problemchen und finde es insgesamt umständlich ständig nochmal in die HTML-Ansicht zu gehen und irgendwelchen Quatsch zu machen - also müsste ein Modifier her.

Das könnte doch ähntlich wie die Auto-Lightbox funktionieren roll

https://www.cmsmadesimple.de/forum/viewtopic.php?id=296

(ist schon etwas älter, müsste man natürlich anpassen)

Forum für CMS/made simple

#1 19. Juli 2017 14:47

Kleine, industrielle Seite

#2 22. Juli 2017 08:53

Re: Kleine, industrielle Seite

#3 22. Juli 2017 09:05

Re: Kleine, industrielle Seite

#4 22. Juli 2017 09:27

Re: Kleine, industrielle Seite

#5 24. Juli 2017 10:03

Re: Kleine, industrielle Seite

#6 26. Juli 2017 19:02

Re: Kleine, industrielle Seite

#7 27. Juli 2017 10:35

Re: Kleine, industrielle Seite

#8 28. Juli 2017 11:54

Re: Kleine, industrielle Seite

#9 06. August 2017 16:14

Re: Kleine, industrielle Seite

Fußzeile des Forums