kulturbanause Blog

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

Performance


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

Responsive Images – <picture>, srcset, sizes & Co.

Flexible Bilder sind ein wichtiger Bestandteil von responsiven Websites. Doch leider stellte genau dieses Thema Web Designer in den vergangenen Jahren vor enorme Herausforderungen. Ohne Scripte war es bisher nicht möglich Bilder ohne Performance- oder Qualitätsverluste auf allen Displaygrößen darzustellen. Und selbst mit der Unterstützung von Scripten waren einige Änderungen – z. B. die Veränderung des Bildausschnitts – eine mehr als lästige Aufgabe. Mit <picture>, srcset & sizes sind neue HTML-Elemente und -Attribute in die Spezifikation gewandert, mit deren Hilfe sich viele Probleme bald lösen werden.

Beitrag zu Ende lesen