Analytics/Statistiken für Webdevelopment auswerten

Um mehr über Nutzer und deren Nutzungsverhalten zu erfahren, nutzen einige Websites Analytics-Services, wie zum Beispiel Google Analytics oder Matomo (ehemals Piwik).

Das ist vor allem wichtig für e:Commerce-Seiten-Betreiber, die genau erfahren wollen, wo ein User abspringt oder warum ein User den Warenkorb verlässt (z.B. fehlende Zahlungsmethoden). Diese Seiten oder Optionen findet man unter „Absprungseiten“.

Interessant wird es für Webdeveloper aber vor allem bei den Sprachen, den installierten Plugins und Browsern. Wie ich in einem anderen Artikel aufgezeigt habe, wird der Internet Explorer praktisch gar nicht mehr benutzt, weshalb auch die Entwicklung für diesen eingestellt werden kann.

Diese Seite wird überhaupt nicht von Internet Explorer-Usern besucht

Dieser Nutzer benutzt ein iOS Gerät mit Safari

Auch wichtig zu wissen ist, woher die User kommen: Von einer Suchmaschine (Google, Bing, etc.) oder von einer anderen Seite? Oder rufen sie die Website direkt auf?

Beim User links war die Seite auf Platz 12 der Suchergebnisse, beim User rechts sogar auf Platz 1.

Was kann ich mit diesen Daten machen?

Wenn man weiß, woher die User kommen (hier Google), kann man sich auf das SEO auf diese spezielle Seite konzentrieren. Auf einer anderen Seite habe ich zum Beispiel sehr viele User, die über Bing auf die Seite gelangen. Dementsprechend habe ich dort die Webmaster-Tools von Bing im Einsatz, während bei den meisten anderen Seiten die Google Webmaster Tools verwendet werden.

Außerdem kann man bei einigen Suchmaschinen den gesuchten Begriff und die Platzierung in den Suchergebnissen sehen. Sollte die Seite nicht weit oben in den Ergebnissen sein, muss die SEO optimiert werden.

Mit den Browser- und Sprachdaten lässt sich herausfinden, ob vielleicht eine mehrsprachige Seite in Betracht kommt und ob man neuere CSS-Eigenschaften nutzen kann. Dafür müssten die User nämlich hauptsächlich neuere Browser verwenden. Außerdem lassen sich oft genutzte Bildschirmgrößen super als Vorlage für media-queries für das Responsive und Mobile-First Design nutzen.

Für Webshop-Betreiber kommt dann noch in Frage, die durchschnittliche Kaufkraft der Kunden über deren Geräte auszuwerten.

Website schneller machen – mit den Tips von Google PageSpeed Insights

Level: Anfänger
Sprachen: HTML, .htaccess, CSS

Eine schnelle Ladezeit verbessert das Google Ranking in jedem Fall.

Um die Ladezeit und die Verbesserungsmöglichkeiten einer Seite anzuzeigen, stellt Google die sogenannten „PageSpeed Insights“ zur Verfügung. Außerdem ist „Googles Lighthouse“ direkt in den Chrome Entwicklertools unter „Audits“ zu finden.

Ein guter Score (im Bereich von 90-100 Punkten) ist zu empfehlen, um das User-Erlebnis, als auch das SEO zu verbessern.

Folgendes sollte dringend beachtet werden:

Nutze minimierte Stylesheets und JavaScript-Dateien

Um die Ladezeiten zu verkürzen, reicht es oft schon aus, CSS und JS-Dateien zu verkleinern. Dies geht mit sogenannten Minifiern, welche als Plugins für viele Code-Editoren (zum Beispiel Minify für Sublime Text) zur Verfügung stehen oder Online genutzt werden können.

Wichtig ist außerdem, dass wichtigere Scripts und Styles zuerst geladen werden (dies kann auch über eine Inline-Integration passieren) und unwichtigeres später. Daher ist es ratsam, JS-Dateien nicht im <head>-Bereich der Seite, sondern ganz unten vor dem </body>-Tag einzufügen:

<!Doctype html>
<html lang="de">

<head>
<!-- Falsch! -->
<script src="assets/unwichtigescripts.js"></script>
</head>

<body>
<!-- Richtig! -->
<script src="assets/unwichtigescripts.js"></script>
</body>

</html>

Nutze neue Bildformate

Anstelle von JPEG oder PNG Bildern, ist es ratsam, neuere Formate wie JPEG 2000 oder WebP zu verwenden. Die neueren Formate sparen vor allem Dateigrößen ein.

Es gibt viele Converter, die Bilder in diese Formate umwandeln.

Da die Formate .webp und .jp2 noch nicht von allen Browsern unterstützt werden, muss ein Fallback eingerichtet werden:

<picture>
  <source srcset="img/bild.webp" type="image/webp">
  <source srcset="img/bild.png" type="image/png"> 
  <img src="img/bild.png" alt="">
</picture>

Nutze „lazy-loading“ für Bilder und iFrames

Zwar ist ist das neue „loading=lazy“-Attribut bisher nur in Chrome verfügbar, wird aber in Zukunft auch in andere Browser integriert. Außerdem gibt es entsprechende Plugins für WordPress und co.

Durch dieses Attribut werden Bilder und iFrames erst dann geladen, wenn sie auch sichtbar sind.

<img src="bild.webp" loading="lazy" alt="">
<iframe src="iframe.html" loading="lazy"></iframe>

Cache für Dateien einrichten

Um die Ladezeiten weiter zu verkürzen, müssen einige Dateien gecached werden. Dafür verwenden wir die .htaccess-Datei, um die zu cachenden Dateien zu definieren und die „Lifetime“ des Caches festzulegen:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 500 seconds"
ExpiresByType font/ttf "access plus 180 days"
ExpiresByType image/gif "access plus 180 days"
ExpiresByType image/ico "access plus 180 days"
ExpiresByType image/jpeg "access plus 180 days"
ExpiresByType image/jpg "access plus 180 days"
ExpiresByType image/png "access plus 180 days"
ExpiresByType image/jp2 "access plus 180 days"
ExpiresByType image/webp "access plus 180 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/javascript "access plus 14 days"
</IfModule>

Die Speicherdauer kann natürlich nach Belieben geändert werden. Sinnvoll ist es, Bilder länger zu cachen, da sich diese im Regelfall nicht ändern. JavaScript- und CSS-Dateien sollte man eher kürzer speichern, es sei denn, du hast nicht vor, an diesen Änderungen vorzunehmen.

Wenn all diese Tips befolgt wurden, sollte die Seite nun einen deutlich besseren Score erreichen. Google gibt aber auch dann weiterhin Infos, wie der Score verbessert werden kann.

Meine Entwicklungsumgebung

Um den Herausforderungen der modernen Webentwicklung gerecht zu werden, sind viele Tools von Nöten. Heute möchte ich meine Entwicklungsumgebung, mit allen genutzten Tools, vorstellen.

Design

Fast wichtiger als die Hardware, ist Software, die perfekt angepasst werden kann. Deshalb verwende ich GIMP und Affinity Designer, um Designs zu erstellen, Logos anzupassen und Bilder zu vektorisieren.
Seit Adobe mit der Creative Cloud arbeitet, habe ich mich bewusst gegen deren Produkte entschieden.

zeigt ein Programm namens Affinity Designer, mit welchem Grafiken erstellt werden können.
Affinity Designer

(S)FTP, WebDav und AWS S3

Als FTP-Client verwende ich die umfangreiche und schöne Software „Transmit“ von Panic!. Bis jetzt verwende ich noch Version 4.4, werde in Zukunft aber sicher auf Transmit 5 upgraden.

zeigt den FTP-Client "Transmit"
Transmit

Code

Um HTML, CSS, PHP, JavaScript und alle anderen Sprachen zu schreiben, verwende ich Sublime Text 3. Um Sublime Text zu erweitern, wird Package Control eingesetzt. Als Color-Scheme benutze ich One Dark. Zusätzlich habe ich nodeJS, Auto Close Tags, Minifier, AdvancedNewFile und HTML/CSS/JS Prettifier installiert.

zeigt das Editor-Programm "Sublime Text 3"
Sublime Text 3

Als LESS/SASS-Compiler benutze ich Prepros, da das Programm wunderbar aussieht und auch perfekt im Zusammenspiel mit Transmit funktioniert.

zeigt den SASS/LESS-Compiler "Prepros"
Prepros

Sans Forgetica – Eine Schrift, die du nicht vergisst

Level: Anfänger
Sprachen: HTML, CSS

Forscher der RMIT University haben eine Schriftart entwickelt: Sans Forgetica.

Bei dieser Schriftart, welche auch als Webfont verfügbar ist, fehlen Teile der Buchstaben. Dies erschwert das lesen, sorgt aber laut der Forscher auch dafür, dass der gelesene Text nicht so schnell vergessen wird.

Sans Forgetica ist unter anderem als Chrome Extension verfügbar, die mit ein wenig Fummelei Textpassagen in der Schriftart darstellt.

Rezensenten im Chrome Store merken allerdings an, dass das „W“ einem „A“ zum verwechseln ähnlich sieht und dass das Plugin eher schlecht als Recht funktioniert.

Hier siehst du die Sans Forgetica Schrift in Aktion.
Wenn alles funktioniert, wirst du diesen Absatz nicht mehr so schnell vergessen.

Die Schrift ist, wie du siehst, wirklich nicht einfach zu lesen. Daher braucht der Nutzer viel länger, um eine Textpassage zu lesen und zu verstehen. Während das im Alltäglichen Gebrauch wohl eher sinnlos ist, kann die Schrift sicherlich sinnvoll eingesetzt werden, um den Nutzer dazu zu zwingen, den Inhalt einer Seite oder auch nur wichtige Auszüge im Gedächtnis zu behalten.

Ob durch diese Schrift zum Beispiel die Absprungrate einer Seite erhöht wird, habe ich nicht getestet, ich gehe aber davon aus. Deshalb sollte sie tatsächlich nur begrenzt und selektiert eingesetzt werden. So oder so ist die Schriftart aber sehr interessant und lädt zum experimentieren ein.

Wie soll das funktionieren?

Hinter der Idee der Schriftart steckt das psychologische Phänomen der wünschenswerten Erschwernisse beim Lernen. Während normale Schriften den Forschern zufolge eher weniger Effektiv sind, um Informationen dauerhaft zu vermitteln, setzt Sans Forgetica genau hier an: Vermittelte Informationen können durch die schwere Lesbarkeit besser im Gedächtnis behalten werden. Ob dies wirklich funktioniert, kann nur ein Langzeit-Test zeigen.

Schriftart integrieren

Um die Schriftart in einer bestimmten Passage zu integrieren, muss diese nur heruntergeladen, wieder auf den eigenen Server hochgeladen (im Beispiel in assets/fonts) und wie folgt in die Passage eingebracht werden:

<style>
@font-face {
  font-family: Sans-Forgetica;
  src: url('assets/fonts/SansForgetica-Regular.otf');
.wichtigerabsatz {
  font-family: 'Sans-Forgetica', Fallback, sans-serif!important;
}
</style>

<p class="wichtigerabsatz">
Wichtiger Absatz
</p>

Um die Schrift auf der ganzen Seite einzubauen (was werde ich, noch die Entwickler selber empfehlen), muss die Schrift importiert werden und dann auf das ganze Dokument (den „body“) ausgeweitet werden:

@font-face {
  font-family: Sans-Forgetica;
  src: url('assets/fonts/SansForgetica-Regular.otf');

body {
  /* Hier ist es durchaus sinnvoll, ein Fallback einzubauen,
  zwingend erforderlich ist es aber nicht */
  font-family: 'Sans-Forgetica', Fallback, sans-serif;
}

Browser Kompatibilität

✔︎✔︎✔︎✔︎✔︎