search

springers54 / reiki

0 stars 0 forks source link

Page-Speed Google Mobil #210

Open springers54 opened 5 years ago

springers54 commented 5 years ago

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fzen-reiki.de%2F&tab=mobile grafik

Wir sind besser geworden, aber es gibt immer noch Optimierungsbedarf, gerade im mobilen Bereich.

joergsteinhauer commented 5 years ago

1. Problem mit Ressourcen

image

Es gibt viele CSS und JS Dateien. Man sollte so wenig wie möglich haben. Die vielen Dateien kommen, wie man sieht, von extra Sachen, wie Custom CSS, Plugins etc. Abhilfe ist wiederum ein Plugin (hier wurde 3 getestet https://themeisle.com/blog/wordpress-minify-plugins/), welches Dateien zusammenfasst. Jedoch bringt es nichts, dieses Plugin zu nutzen, wenn man am CSS arbeitet (wie z.z. noch der Fall). Also: sollten wir einsetzen, wenn die Layout-Arbeiten abgeschlossen sind.

joergsteinhauer commented 5 years ago

2. Problem mit der Schriftart

Ein Thema für sich. Auch das Laden der Schriftart kostet Zeit und ist mind. ein Request mehr, blockiert dadurch ebenfalls den Aufbau der Seite. Seit dem ganzen DSGVO müssen wir zudem die Schriftart-Dateien sogar auf eigenem Server speichern und dieser ist nicht so schnell wie (früher) der Google-Server --> kostet noch mehr Zeit und die Vorteile des globales Cachings können wir nun auch nicht mehr ausnutzen. Zudem "springt" das Layout, sobald die Schrift geladen wird. Vorher wird die Ersatz-Schrift angezeigt, meist serifenlose Arial oder so.

Hier gibt es eine Abhilfe, die mehr und mehr weltweit genutzt wird. Man greift auf die System-Schriftarten zu, nennt sich System Font Stack: https://css-tricks.com/snippets/css/system-font-stack/

Dabei wird die Systemfont geladen, die gut aussieht und aber auf jedem System etwas anders aussieht (Windows, Mac, Linux, Android, iOS etc.).

Ich persönlich finde diesen Ansatz sehr gut, verwende es auch (noch nicht privat). Man muss dabei halt aufpassen, dass das Layout an sich responsiv ist und nicht künstlich begrenzt wird - hier kommt der Ansatz "Design richtet sich nach dem Inhalt" zum Spiel. Also, falls ihr den SEO-Wert mit diesem Ansatz verbessern wollt, müssen wir alle Seiten auf allen möglichen Systemen dann auch ordentlich testen.

joergsteinhauer commented 5 years ago

3. Labdaten

PageSpeed Insight hat nur geschätzte Daten geliefert, hier muss man es mit Lighthouse testen. Habe ich gemacht: image

Relativ gute Ergebnisse, zumindest was Performance angeht. Best Practices und SEO sind auch super.

Den Test könnt ihr gern auch mal selber öfters machen: image

joergsteinhauer commented 5 years ago

4. Accessibility

Hier sind die meisten Probleme bezüglich des Farbkontrasts - der ist zu niedrig. Gemeint sind vor allem Elemente mit dem Orange. Weiterhin fehlen hier und da ein paar Attribute, das ist alles kein Problem. Werde ich bei Gelegenheit angehen.

joergsteinhauer commented 5 years ago

Fazit

Insgesamt ist der Gesamttest gut (wenn an davon ausgeht, dass die meisten Probleme durch CSS/JS Minifizierung behoben werden.

springers54 commented 5 years ago

ok, dann lassen wir die Issue noch offen, so dass du die weiteren Dinge im Blick behältst.

joergsteinhauer commented 5 years ago

Bitte Feedback geben zu Problem mit der Schriftart. Entscheidung liegt bei euch.

joergsteinhauer commented 5 years ago

5. Best Practices

image

Laut Google, gibt es ein "Medium" Problem was die Sicherheit angeht. Kommt durch das eingebundene jQuery (Javascript Library). Diese wird global für alles mögliche verwendet, ohne jQuery funzt WP nicht. jQuery muss also bleiben, allerdings sollte von Version 1.x möglichst auf die neueste (3.x) geupdatet werden. Problem: viele Plugins und Themes brauchen noch Version 1.x. Mein Theme ist nicht das Problem (und wenn doch, kann ich das sicherlich fixen). Probleme machen die Plugins. Lösungen:

Nachzulesen hier: https://wordpress.stackexchange.com/questions/244537/why-does-wordpress-use-outdated-jquery-v1-12-4/244543 https://wordpress.stackexchange.com/questions/257317/update-jquery-version

Frage: was also tun?

springers54 commented 5 years ago

Wo erzwinge ich das Update und wie? Dann könnte ich es auf dem Testserver probieren, ansonsten mach es auf dem Live-Server und wir gucken, was kracht. Vielleicht ist ja alles harmlos

joergsteinhauer commented 5 years ago

Gern auf dem Testserver probieren. Das Erzwingen ist nicht trivial, ich habe mich selber nur teilweise dazu reingelesen. Sollte ich schon selber machen.

Du kannst gern den Testserver auf den gleichen Stand bringen und mir Zugangsdaten schicken, dann kann ich es dort updaten.

springers54 commented 5 years ago

Wir sollten immer erst die Dinge in Angriff nehmen, die zum Milestone Bug gehören, Google Speed ist das nicht.

joergsteinhauer commented 5 years ago

Gewiss. Ich mache hier doch nichts, ich kommentiere und bereite vor