Beiträge von Pierre

Hallo Marcus,

danke für deine Rückmeldung.

Ich gehe auch davon aus, dass 100/100 nicht sinnvoll ist. Schließlich kann man wohl in den allermeisten Fällen an anderer schneller mehr raus holen. Mir würden 80 - 90 Punkte völlig reichen.

Die 9px Verschiebung führen zu einem CLS von 0.1 - 0.15. Vorher lag dieser Wert bei 0.01-0.04, also rund 500% niedriger. Da anzunehmen ist, dass Pagespeed ein Rankingfaktor ist und das Google diesen vermutlich über sein eigenes Tool berechnet, fände ich es reizvoll diesen Shift zu beheben. Ich schätze dadurch kann ich in der Mobilen Leistung bei PageSpeed Insights 20 - 30 Punkte gut machen. Außerdem macht es mir Spaß diese kleinen Rätsel zu lösen.

Moin,

ich bin gerade dabei unseren PageSpeed der Startseite zu optimieren. Dabei habe ich schon ein paar Sachen erledigt:

- Bilder im WebP-Format mit JPG-Fallback (vielen Dank für deine Widgets Mario !)

- Bilder in zwei Auflösungen für Desktop und Mobil bereitgestellt

- Bilder mit lazy-loading bzw. fetchprio high für LCP

- Cache-Zeiten angepasst via htaccess

- @font-face font-display: swap

- HTTP/2 kommt die Tage auf den Webserver

Hier sind die Berichte von Pagespeed Insights und DebugBear.

Folgende Dinge würde ich gerne noch beheben:

1.) Cumulative Layout Shift

Bei DebugBear sieht man, dass der Inhaltsbereich (damit meine ich alles unter dem Header) beim Laden um 9px nach unten sackt. Das wird der Hauptgrund für den verhältnismäßig hohen CLS sein. Dies zu beheben würde die Pagespeed-Punktzahl von Google glaube ich deutlich verbessern. Ich habe schon so allerlei ausprobiert: padding-bottom, margin-bottom, Container-/Reihen-Abstand unten erhöht, Header-Bild-Height 9px größer angegeben... nichts hat geholfen.

Habt ihr eine Idee wodurch dieser Shift hervorgerufen wird?

2.) nicht sichtbare Bilder aufschieben

Google beschwert sich, dass ein Bild nicht nicht mit lazy-loading versehen ist. Das Ding ist, es handelt sich um den Header, spirch LCP-Content. Wenn ich da auf lazy gehe, meckert Google, dass lazy-content im LCP ist... Ich vermute es hängt mit dem Header-Widget von Mario zusammen, bei dem man eine Dektop-Bild-Variante (...-slim.webp/jpg) und eine mobile Variante (...-mobile.webp/jpg) angibt. Anscheinend läd Google beim Testen der Mobilen Seite auch das Desktop Bild. DebugBear macht das nicht.

Wie wird es in der Realität sein? Vermutlich kann ich das einfach ignorieren oder?

Außerdem wären die folgenden Punkte noch nice-to-have aber wohl nicht so wichtig:

3.) Bilder in modernen Formaten bereitstellen

Benutze das Silder-Widget auf der Startseite. Du hast nicht zufällig Lust, Mario , ein Silder-Widget zu basteln, mit WebP-JPG-Dektop-Mobil-Bilder-Funktion?

4.) Darauf achten, dass der Text während der Webfront-Ladevorgänge sichtbar bleibt

Kp, warum hier gemeckert wird. Habe die Schriften auf dem Server liegen und arbeite mit @font-face (inkl. font-display: swap;) im CSS. Habt ihr eine Idee?

5.) Für das Youtube-Video kann lazy-loading ausgeführt werden

Kann ich wohl getrost ignorieren, weil der Delay mit 0ms angegeben wird? Benutze das Multimedia-Widget Youtube. Wie könnte ich lazy-loading dafür einbinden?

6.) Verwendet keine passiven Listener zur Verbesserung der Scrollleistung

Klingt für mich erstmal ziemlich aufwendig, das zu ändern. Was meint ihr?

Ich freue mich über jede Anregung!

Viele Grüße

Pierre

Alles klar, danke für die schnelle Rückmeldung!

Hallo,

ich möchte unsere Seite über einen eigenen Webserver bei unserem Host laufen lassen. Aktuell läuft Host-Seitig MySQL 5, würde dann aber mit dem Umzug "unwiderruflich" auf MySQL 8.0 wechseln.

Kann Zeta Producer (16.6.0 Business) inkl. Shop MySQL 8.0?

Werde vorher ein Backup machen: Reicht es alle Daten via FTP zu kopieren oder belegt ZP inkl. Shop auch die Datenbank?

Viele Grüße

Pierre

hm, das dachte ich mir schon, ist aber meines Erachtens nicht intuitiv.

Dnake für eure Antworten!

Hallo,

mir ist folgendes Problem bei der mobilen Ansicht aufgefallen (leichtlast.de):

Wenn man das Menu ausklappt und anschließend neben den Bereich des Menus tippt, fährt sich dieses nicht ein. Damit es wieder einfährt muss man entweder nochmal oben auf Menu klicken oder einen Menu-Punkt auswählen. Gibt es hierfür schon eine Lösung? Ich konnte dazu leider nichts finden.

Viele Grüße

Pierre

Hallo,

das ist ja mal ein schönes script, vielen Dank! Hab's direkt übernommen (leichtlast.de).

Ich hab dazu noch eine Frage:

Wäre es möglich im gleichen Schritt die Header-Höhe zu verringern? Gerade in der mobilen Ansicht könnte man so recht viel Platz raus holen.

Jetzt klappt's! Ich habe vor die Klasse noch eine geschweifte Klammer gesetzt und dann ging's:

@media only screen and (max-width: 840px) { .zpColumn.odd.zpColumnWidth1.c8.first.last {
  width: 100%!important;
  }
}

Mit padding-left: 8px!imporntant;  bzw. padding-right: 8px!imporntant; kann ich dann den Seitenrand in der mobilen Ansicht verringern, wobei dann der Cookie-Einstellungen-Button in den Text ragt. Konnte noch nicht rausfinden, wie ich dessen Breite/Schriftgröße ansteuer...

Okay danke, ich habe es dir geschickt

Hallo Markus ( @GYMWAVE.de),

danke für deine Hilfe.

Ich habe versucht das umzusetzen (deinen Code ins style-Tag von der CSS-Formatierung, c-Klasse angepasst):

- Obwohl nun auch im DevTool width: 100%!important; angezeigt wird, bleibt der Bereich gequetscht (s. Bild 1).

- auch wenn ich ein neues ZP-Projekt anlege und damit teste, tritt das Problem auf (s. Bild 2). Der CSS-Code im Test-Projekt ist:

<style>
@media only screen and (max-width: 1280px)
.zpColumn.odd.zpColumnWidth1.c11.first.last{
  width: 100%!important;
}
</style>

Was mache ich falsch?

Okay, damit bin ich nochmal ein gutes Stück voran gekommen, vielen Dank Mario !

Wie gesagt, das löst das Problem nicht, weder mit vw noch mit vh.

Apropos Seitenränder: Gibt es eine Möglichkeit den Seitenrand in der mobilen Ansicht zu verringern? Ich finde der fällt etwas "verschwenderisch" aus.

Das gleiche passiert im Landscape-Modus von Smartphones.

Hallo,

danke für die rasche Rückmeldung!

Ist dieses Vorgehen nicht im Grunde das gleiche wie "... verringere die Breite der Text-Widgets variabel anhand des Rasters."? Mit dem Unterschied, dass man stufenlos anpassen kann? Zumindest hat es den gleichen Quetsch-Effekt auf die Tabletansicht und löst das Problem anscheinend nicht.

Viele Grüße

Pierre

Hallo,

zur Ausgangslage: Ich möchte die Textbereiche schmaler machen, um das Leseempfinden zu verbessern.

Option A: Ich verringere die Breite der Text-Widgets variabel anhand des Rasters.

Problem A: Bei der Ansicht auf dem Tablet, wird der Text gequetscht und nicht die gesamte Breite genutzt (s. z.B. hier https://leichtlast.de/philosophie/)

Option B: Ich verringere die maximale Breite vom gesamten Projekt im Layout.

Problem B: Seiten, die nach wie vor breit sein sollen, werden zu schmal (z. B. der Shop).

Gibt es eine Lösung für Problem A? Oder gibt es die Möglichkeit, die maximale Breite - z.B. im Shop - anders zu wählen, als im Rest des Projekts?

Viele Grüße

Pierre

Hallo Mario,

vielen Dank für die schnelle und hilfreiche Antwort!

Ich habe mich jetzt an die Umsetzung wie folgt gemacht:

- CSS-Klasse definiert (sonst kam es - wie du erwartet hast - zu Problemen mit einigen Widgets)
- ul { ... } hinzugefügt, damit es auch bei Aufzählungen klappt

- CSS-Klasse den Widgets hinzugefügt

Das klappt fast überall. Probleme bereitet mir noch folgendes:

- Widget Tabellarische Daten (hier passiert nichts)

- Wildget Bild: Die Bildunterschriften wollen nicht (nicht so wichtig, konnte es befriedigend mit html lösen)

- Shop: Beschreibungstexte von Shop, Kategorien und Artikel klappt, Rest nicht (Artikel-Titel, Preis, Titel & Texte der Varianten)

- Hauptmenu (nicht so wichtig aber wäre das hier auch möglich?)

Habe die Umsetzung noch nicht live, weil ich gerne vorher die anderen Punkte ändern würde.

Viele Grüße

Pierre

Hallo Mario ,

ich würde deinen Vorschlag gerne für das gesamte Projekt umsetzen, weiß aber nicht wie (bin CSS-Neuling).

Ich habe mithilfe des Handbuchs folgende CSS-Formatierung versucht:

<style>
#content body{
    font-size: 1.1em;
    font-size: clamp(1em, 10vw, 5em);
}
</style>

Das klappt nicht. Was mache ich falsch? Kannst du mir bitte helfen?

Viele Grüße

Pierre

Hallo,

wenn man im Cookie-Banner die Einstellungen ausklappt, erscheinen ja - je nach genutzten Cookies - entsprechende Texte mit an-aus-Option. zB:

Zitat

Statistiken

Helfen uns zu verstehen, wie Sie unsere Website nutzen.

Wie kann ich diesen Text bearbeiten? (wir Duzen überall auf unserer Seite)

Viele Grüße

Pierre

Hallo,

auch wenn das Thema schon etwas älter ist, habe ich noch eine Frage dazu, die hierhin passen sollte:

Über die Bilderverwaltung kann man ja das Alt-Attribut der Shop-Bilder bearbeiten. Wenn ich aber diese Bilder auf der Live-Version der Website "untersuche" finde ich im Quelltext nirgends das entsprechende Alt-Attribut.

Übersehe ich etwas oder werden die Shop-Bilder durch Zeta nicht entsprechend getagt?

Hallo,

mein Hoster konnte mir auch nicht helfen und hat gesagt, das wird im Zusammenspiel CMS und htaccess geregelt. Was müsste ich ihn denn explizit fragen bzw. was sollte dieser tun?

Wenn ich das richtig verstehe, wäre die eleganteste Lösung die, dass man das Suffix innerhalb von Zeta weg lässt und dann mit

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

bzw.

RewriteRule ^([^\.]+)$ $1.html [NC,L]

arbeitet.

Nun kann man in den einzelnen Seiteneigenschaften ja allerlei Endungen an den Dateinamen setzten - nur weglassen geht nicht.

Unter den Beispielseiten (https://www.zeta-producer.com/de/beispiele.html) enden die meisten Seiten mit Suffix und ein paar wenige mit Slash. Meine Vermutung wäre, dass es noch niemand versucht/geschafft/gewollt hat, dass beides weg ist. Könnte es sein, dass es mit Zeta schlicht nicht möglich ist?

Okay, danke!

Hallo,

ich glaube ich habe das gleich Problem wie seventhSky und die vorgeschlagene Lösung funktioniert bei mir nicht.

Zu meinem Problem

Ich möchte, dass jede URL auf meiner Domain ohne Suffix (.html oder .php) endet und ohne Slash ("/")

Beispiele wie es nicht sein soll:

Variante 1: https://leichtlast.de/lastenraeder/warum-carbon.html

Variante 2: https://leichtlast.de/lastenraeder/produktion-entwicklung/

Es sollte sein:

Charaktereigenschaften im Einstellungsgespräch: Was wirklich zählt

Der neue berufsbezogene Persönlichkeitstest BPT zeigt: Entscheidend ist nicht nur, was jemand kann, sondern ob Charakter, Verantwortung und Aufgabe…

www.managerimpulse.de

Akutelle Infos | Drehstrom Filmproduktion und Videoproduktion in Wien

Drehstrom Filmproduktion und Videoproduktion in Wien produziert Imagefilme, Animationen, Eventvideos und Erklär-Filme etc. - Aktuelle Informationen

www.drehstrom.at

Ich habe schon einiges versucht (verschiedene Lösungsansätze für die .htaccess und Varianten von Seiteneinstellungen bei Zeta: Eigenschaften von Seite -> Google -> mit Dateiname und Ordner | mit und ohne index).

Aktuell sieht meine .htaccess so aus:

# Weiterleitung von http aus https
RewriteEngine On
RewriteCond %{HTTP_HOST} !^leichtlast\.de$ [NC]
RewriteRule ^(.*)$ https://leichtlast.de/$1 [R=301,L]

Dinge die ich versucht habe

(1) Vorschlag von Hanabi:

# Beginn Datei ohne Suffix
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]
# Ende Datei ohne suffix

Problem: Variante 1 (s. o.) bleibt bestehen.

(2) Alle Dateinamen mit index.php und dann via

# index.php in URL ausblenden
RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC]
RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L]

index.php ausblenden. Problem: Variante 2 (s. o., Slash bleibt)

(3) Vorschlag von StackOverflow um Slash zu beseitigen:

RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R]

-> funktioniert nicht

(4) Vorschlag von Stackoverflow um .php-Suffix zu entfernen

RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)$ $1.php [NC,L]

-> funktioniert nicht

Was kann ich tun?

Danke!

Hallo,

ich möchte den Text "Spam-Schutz" verschwinden lassen. Lieder bin ich CSS-Laie und folgendes "rumgerate" hat nicht geklappt:

<style>

.zp-form label#zpasq span {

display: none;

}

</style>

<style>

.zp-form label#zpasq {

display: none;

}

</style>

<style>
.zp-form label#zpasq span {
     color: transparent; 
}
</style>

Könnt ihr mir bitte helfen? Wie hätte ich das Problem selbst lösen können, wonach hätte ich suchen müssen oder sprengt das diesen Rahmen?

Danke!

Hat geklappt, vielen Dank!

Also ich möchte, dass Der Text samt Doppelpunkt verschwindent.

Hallo Steffen,

danke für deine rasche Rückmeldung.

Das Bild zeigt den Bereich um den es mir (und Kowi) geht. Den Text "Kategorien" kann ich bearbeiten. Ich kann den Text auch löschen, nur dann bleibt der ":" nach dem Text weiterhin dort.

Gruß

Pierre

Hallo,

auch wenn das Thema alt ist, würde ich gerne hier weiter machen, weil ich das gleiche Problem habe: leichtlast.de -> Konfigurator.

In Zeta Producer unter Shop kann man ja die Texte bearbeiten, in diesem Fall "Titel Unterkategorien". Ich habe versucht diesen Text zu löschen, bzw. "unsichtbare" Zeichen einzufügen, doch dann bleibt immernoch der Doppelpunkt.

Gibt es hierfür eine Workaround oder müssen wir damit leben?

Viele Grüße

Pierre

Moin,

das hat geklappt. Vielen Dank!

Ich habe das Layout auf http://www.libelle-cargobike.de hochgeladen und habe den Fehler hier nicht.

Bei mir springt hier

Lizenznummer eingeben

auch nichts mehr!

Hallo,

ja es liegt anscheinend am template. Habe es mal hier hochgeladen: libelle-cargobike.de

gleicher Bug... Kann mir an dieser Stelle hier noch geholfen werden oder soll ich mich mit einem Ticket direkt an den Support wenden?

Danke für die Mithilfe!

Zitat von Stefan S

Warum tritt das dann in keinem der von uns genutzten Smartphones/Tablets auf?

Ich installiere mir nun mal einen Android 9 Emulator und versuche es dort nachzustellen. Gibt es noch eine Demo-Seite die ich zum Test verwenden kann?

Ich erstelle morgen noch eine Demo-Seite mit dem Capfire-Responsive-Design.

In Anbracht der Häufigkeit des Bugs, lehne ich mich wohl nicht weit aus dem Fenster, wenn ich vermute, dass es weder an der Adroid-Version, noch an Browserversionen liegt. Ist es nicht viel naheliegender, dass es am CMS liegt?

Handymodelle auf denen der Bug bislang reproduziert werden konnte:

- Huawei P20

- Galaxy A53 5G

- Galaxy S9

- Pixel 5

- Galaxy s10e

Gerade habe ich noch ein paar Browser getestet und bin evtl. auf etwas Intereassantes gestoßen:

Bug tritt auf: Chrome, Edge, Firefox, Opera

Bug tritt nicht auf: DuckDuckGo

Worauf lässt das schließen?

Meint ihr es wäre einen Versuch wert, das ganze Projekt nocheinmal komplett neu aufzusetzen?

Niemand?

Hallo,

der Bug besteht immernoch. Der naheliegende Verdacht "... externen Widgets und Codeschnipsel ..." trifft leider nicht zu. Ich verwende ausschließlich die vorhandenen Widgets und außer google-maps-css-code ist alles aus dem Zeta-Baukasten.

Könnte es helfen, wenn ich das Projekt hochlade und einem Admin den Zugang gebe?`

Ich hoffe nach wie vor, dass wir eine Lösung finden. Die Website ist auf betroffenen Geräten kaum besuchbar...

Gruß

Pierre

Danke für eure Antworten.

Ich werde nochmal versuchen den Bug auf anderen Endgeräten zu reproduzieren. @Creed bei meiner Mobilen Ansicht werden die Bilder automatisch über bzw. unter die Texte geschoben. Gibt es dafür einen Quick-Fix oder müsste überall die Anordnung geändert werden?

Bin jetzt erstmal im Urlaub und mache danach an dieser Stelle weiter.

Danke für eure Hilfe!

Hallo,

die Seite ist jetzt online (http://www.leichtlast.de - ohne "www." ist noch eine Umleitung drin). Der Screenshot @Creed ist noch von der alten Seite (http://www.libelle-lastenrad.de). Der beschriebene Bug ist immer noch da.

Ich bin für jede Hilfe dankbar!

Viele Grüße

Pierre

PS: Beim Shop/Konfigurator wird über den Themen Kategorien: angezeigt. Wie kann ich das löschen? Ich weiß wie man den Text anpasst, ich weiß auch wie man ihn weglässt, aber ich weiß nicht, wie man den übrigbleibenden Doppelpunkt loswird