kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Performance


Warum werden Websites immer langsamer?

»Slow Websites« auf der sehr geschätzten Website »CSS-Tricks« geht in erster Linie auf »The Bullshit Web« von Nick Heer ein, der eine rapide Verfettung des Internets beklagt. Diese liegt seiner Meinung nach im grundlegenden Geschäftsmodell vieler Websites. Wenn das geschäftliche Fundament (fast) ausschließlich auf Anzeigen und/oder Datengewinnung beruht, rücken Kriterien wie Benutzerfreundlichkeit oder Geschwindigkeit allzu oft in den Hintergrund.

Wie der Artikel recht kurz, dabei sehr informativ zeigt, ist Heer mit dieser Ansicht nicht allein. In der Industrie wohlbekannte Kollegen wie Ethan Marcotte (»Bits.«), Brad Frost (»Death to Bullshit«, unbedingt mal »Turn bullshit on?« klicken!) und Addy Osmani (»The Cost Of JavaScript In 2018«) haben dieser Problematik mehr oder minder drastische Beiträge gewidmet.

Es handelt sich hierbei nicht nur um ein technisches, sondern auch ein kulturelles Problem, das für uns alle mit dem Stichwort »Gratiskultur« selbstkritisch nur angerissen werden kann. Der Artikel schließt mit einigen pragmatischen Ansätzen. Diese helfen uns Web Designern und Entwicklern, die dieses Thema ernst nehmen, zumindest die Websites, die wir selbst erstellen, auf Diät zu setzen.

Direkter Link zum Artikel

Ladezeit der Website wird Ranking-Kriterium für mobile Suchanfragen

Google hat offiziell angekündigt, dass die Geschwindigkeit von Websites ab Juli 2018 ein Ranking-Kriterium für die Suche auf mobilen Geräten wird. Das ist im Grunde genommen nicht neu, allerdings wurden bisher nur vom Desktop aus gestartete Suchanfragen berücksichtigt. Für die Zukunft heißt das, dass Entwickler noch stärker für langsamere mobile Netzwerke optimieren müssen, um ein gleichbleibend gutes Ranking bei Google erzielen zu können.

Direkter Link zum Artikel

CSS asynchron laden

Laut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the fold« (ohne Scrollen sichtbar) vorhanden sein.
Code, der nicht inline im Dokument eingebunden sondern in eine eigene Datei ausgelagert ist, blockiert das Rendering. Daher empfiehlt es sich JavaScript am Ende der Seite vor dem schließenden <body>-Tag anzubringen. Für CSS-Dateien muss jedoch eine andere Methode angewandt werden, wenn der HTML-Code valide nach den Richtlinien des W3C-Konsortiums sein soll. Eine Möglichkeit hierfür ist das asynchrone Laden. Wie das umgesetzt wird beschreibt Scott Jehl ausführlich.

Direkter Link zum Artikel

Die CSS-Eigenschaft »font-display«

Webfonts sind heutzutage eine Selbstverständlichkeit. Allerdings wird die Schrift von modernen Browsern so lange versteckt, bis sie komplett geladen ist. Mit der CSS-Eigenschaft font-display kann der Fallback- und Ladeprozess (FOIT, FOUT) von Webschriften ähnlich gestaltet werden wie mit JavaScript-basierten Lösungen. Allerdings ist dafür nur noch eine Codezeile nötig. Jeremy Wagener erklärt, wie font-display eingesetzt wird und welche Auswirkung die verschiedenen Werte haben.

Direkter Link zum Artikel

Emojis aus WordPress entfernen

Seit WordPress 4.2 habt ihr die Möglichkeit Emojis in euren Beiträgen zu verwenden. Leider wird das JavaScript, das die Darstellung der Grafiken ermöglicht, auch dann geladen, wenn ihr gar keine Emojis verwendet. Und darüber hinaus schreibt WordPress das Script in den <head> der Website, was wiederum von Performance-Optimierungs-Tools wie Googles Page Speed Insights kritisiert wird. In diesem Beitrag archivieren wir ein Snippet mit dem Ihr die Emojis deaktivieren könnt.

Beitrag zu Ende lesen

Das Performance Budget als Hilfsmittel für schnellere Websites

Die Performance einer Website ist ein wichtiger Qualitätsfaktor. Es existieren zahlreiche Tipps und Tools um kürzere Ladezeiten zu erreichen, doch auch ein anderer konzeptioneller Ansatz kann ein mächtiges Werkzeug sein. Das sog. Performance Budget ist ein solcher Ansatz. Mit seiner Hilfe wird die Website schlank gehalten, was die Geschwindigkeit verbessert und somit die Qualität des Projekts steigert.

Beitrag zu Ende lesen