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.
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.
WordPress komprimiert Bilder beim Upload in die Mediathek automatisch. Das kann praktisch sein, muss es aber nicht. Insbesondere bei Portfolios mit dem Fokus auf Design oder Fotografie stört die Kompression, da JPG-Artefakte sichtbar werden können. Mit einer kleinen Anpassung schaltet ihr die Kompression ab.
Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.
Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.
Wenn Website-Inhalte nachgeladen oder verändert werden ohne dass die Website dazu vollständig neu geladen werden muss spricht man von Ajax (Asynchronous JavaScript and XML). Meist wird Ajax mit komplexen Funktionen oder Formularabfragen in Verbindung gebracht, es macht es aber auch in eher einfachen Projekten Sinn nicht direkt benötigte Inhalte per Ajax nachzuladen und somit die Performance zu verbessern. In diesem Beitrag archiviere ich ein kleines jQuery-Snippet mit dessen Hilfe HTML-Inhalte per Klick nachgeladen werden können.
Ich behaupte einfach mal, dass wohl jeder Webdesigner schon Text mit der CSS-Eigenschaft text-indent: -9999px; versteckt hat. Die aus heutiger Sicht schon fast antike Technik entstammt noch Zeiten, in denen wir ausgefallene Schriftarten mit Hilfe von Grafiken einbetten mussten. Da es Webfonts noch nicht gab, wurden Schmuckschriften in Bildern gespeichert. Anschließend wurde einem Element die Grafik als Hintergrundbild zugewiesen; der für die Suchmaschinen enthaltene „echte“ Text wurde versteckt. Mit Hilfe von text-indent: -9999px; wurde er um 9999 Pixel aus dem sichtbaren Bereich heraus verschoben.
Ab der Version 77 unterstützt Chrome das Nachladen von Bildern und <iframes> ohne externe Hilfsmittel. Das Hinzufügen des HTML-Attributs loading=“lazy“ genügt, damit …
Beitrag zu Ende lesen»Slow Websites« auf der sehr geschätzten Website »CSS-Tricks« geht in erster Linie auf »The Bullshit Web« von Nick Heer ein, …
Beitrag zu Ende lesenGoogle hat offiziell angekündigt, dass die Geschwindigkeit von Websites ab Juli 2018 ein Ranking-Kriterium für die Suche auf mobilen Geräten …
Beitrag zu Ende lesenLaut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the …
Beitrag zu Ende lesennoopener in _blank geöffneten Links
Seit dem Update auf die Version 4.7.4 ergänzt WordPress Links, die in einem neuen Tab geöffnet werden, um das rel-Attribut noopener. …
Beitrag zu Ende lesenWebfonts sind heutzutage eine Selbstverständlichkeit. Allerdings wird die Schrift von modernen Browsern so lange versteckt, bis sie komplett geladen ist. …
Beitrag zu Ende lesen