Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 19. Juli 2017 14:47

rage_all
arbeitet mit CMS/ms
Ort: Augsburg
Registriert: 09. März 2011
Beiträge: 281

Kleine, industrielle Seite

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

Offline

#2 22. Juli 2017 08:53

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Kleine, industrielle Seite

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/


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#3 22. Juli 2017 09:05

rage_all
arbeitet mit CMS/ms
Ort: Augsburg
Registriert: 09. März 2011
Beiträge: 281

Re: Kleine, industrielle Seite

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.

Offline

#4 22. Juli 2017 09:27

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Kleine, industrielle Seite

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 )


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#5 24. Juli 2017 10:03

rage_all
arbeitet mit CMS/ms
Ort: Augsburg
Registriert: 09. März 2011
Beiträge: 281

Re: Kleine, industrielle Seite

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:

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

Nachher:

[== 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.

[== 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.

Offline

#6 26. Juli 2017 19:02

bd0
Server-Pate
Ort: Köln
Registriert: 22. Juni 2011
Beiträge: 185

Re: Kleine, industrielle Seite

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!

Offline

#7 27. Juli 2017 10:35

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.137

Re: Kleine, industrielle Seite

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.

Offline

#8 28. Juli 2017 11:54

rage_all
arbeitet mit CMS/ms
Ort: Augsburg
Registriert: 09. März 2011
Beiträge: 281

Re: Kleine, industrielle Seite

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.

Offline

#9 06. August 2017 16:14

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Kleine, industrielle Seite

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)


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline