Häufige Fehler bei der Performanceanalyse einer Website

Eine Frage, die eigentlich fast ständig bei Meetups, Facebook-Gruppen oder ähnlichem aufkommt sind Fragen zur Performance einer Seite. Daher möchte ich heute mal einen kleinen Überblick geben, welche Tipps ich in diesem Fall gebe um eine Seite erst einmal

Analysefehler 1: Die falschen Schlüsse ziehen

In den allermeisten Fällen startet das Gespräch damit, dass ein schlechtes Ergebnis bei Google PageSpeed Insights erreicht wurde. Auf einigen Seiten liest man, dass man möglichst 95 Punkte oder mehr erreichen und alle Fehler beheben muss. Ich verrate euch jetzt mal ein schockierendes Geheimnis: das ist Blödsinn 😉

Weiterlesen →

Edit Shortcuts im Customizer

Im Beitrag von gestern hatte ich euch am Ende ja noch kurz einen Hinweis auf die „Edit Shortcuts“ gegeben. Heute möchte ich ein wenig genauer darauf eingehen, worum es sich dabei handelt und wie ihr diese auch für eure Optionen verfügbar machen könnt.

Automatisch verfügbar für neue Features

Die Edit Shortcuts sind fest mit den sogenannten „Selective Refresh Partials“ verbunden. Also mit jenen Elementen des Customizers, die bei einer Änderung der Einstellungen das Ergebnis sofort im Vorschaubereich anzeigen, ohne dabei die gesamte Vorschau neu laden zu müssen.

Aber hier kommt auch schon die schlechte Nachricht. Man kann Edit Shortcuts deshalb nicht einfach zu global für alle Optionen aktivieren. Es muss stattdessen die Customizer Option ebenfalls um einen „Selective Refresh“ erweitert werden.

Weiterlesen →

Neuen Video-Header in TwentyThirteen einsetzen

Zusammen mit WordPress 4.7 wurden die sogenannten Video-Header eingeführt. Damit ist es möglich, anstelle eines Bilder, ein Video als Hintergrundbild zu verwenden. Eingestellt werden diese dann über den Customizer. Ich habe mir das neue Feature mal angesehen. Es gibt ja schon einige Anleitungen mit dem Code-Snippet, das man dazu verwenden muss. Aber ich hatte noch keine Anleitung gesehen, die es mal in ein bestehendes Theme einbaut. Daher möchte ich euch heute zeigen, wie ihr es beispielsweise in TwentyThriteen verwenden könnt.

Der Bild-Header in TwentyThirteen

Ich setze ja selbst kein Theme mit Bild-Header ein. Allerdings verwenden viele Seiten, die ich kenne, das beliebte Default-Theme TwentyThirteen. Hier gehört ein Bild-Header ja fest zum Layout (auch wenn man es im Grunde sogar ausblenden kann).

Das Bild wird hierbei über einen CSS-Hintergrund umgesetzt.Die Größe des Headers wird durch dessen Textinhalt festgelegt und hat mindestens 230px Höhe:

Weiterlesen →

Wiederkehrende Aufgaben mit WP-CRON ausführen

Als ich letztes Wochenende in Philadelphia beim WordCamp US war, hatte ich einige Beiträge für den Adventskalender vorgeschrieben. Da ich meine Artikel immer um 9 Uhr morgen veröffentlichen wollte, dies aber um 3 Uhr nachts Ortszeit gewesen wäre, habe ich die Artikel „geplant“, damit sie pünktlich online gehen. Leider hat das an zwei Tagen nicht funktioniert, was mir erst sehr spät mitgeteilt wurde.

Woran es genau lag, kann ich leider aktuell nicht sagen. Es kam aber die Frage auf, wie die Artikel veröffentlicht werden und wie hierbei der Reihenfolge ist. Das möchte ich heute versuchen rauszufinden und euch berichten.

Automatisierung mit WP-CRON

Die Basis für das zeitgesteuerte Veröffentlichen ist ein sogenannter Cronjob. Dies sind Vorgänge, die in einem bestimmten Intervall ausgeführt werden. Ein solcher Cronjob kann beispielsweise direkt auf einem Webserver. Dies kann ein Nutzer entweder über den Befehl crontab tun, oder aber über eine Administrationsoberfläche seines Hosters.

Weiterlesen →

Einzelne SVG Bilder mit Gulp zusammenfassen

In den letzten beiden Artikeln habe ich ja erzählt, wieso man anstelle von Icon-Fonts besser SVG verwenden sollte und welchen Vorteil hierbei die Verwendung von Symbols hat. Nun werden sich vielleicht einige von euch gefragt haben, wie man eine solche Datei am besten erstellen kann. Oft hat man ja SVG Icons eher als Einzeldateien rumliegen und bei großen Sammlungen wäre der manuelle Aufwand doch recht groß.

Genau dieses Problem hatte ich diese Woche auch bei einem Projekt. Ein Kollege wollte die Icon-Sammlung Entypo verwenden, die allerdings nur in Form einzelner SVG-Dateien vorlag. Ich konnte auch auf die Schnelle keine Variante mit nur einer einzelnen Datei finden. Ich hatte aber schon so eine Idee, die ich das umsetzen könnte 🙂

Automatisierung mit Gulp

Früher hätte ich für diese Aufgabe vermutlich PHP verwendet. Nicht sehr elegant, aber eben eine Sprache, die ich ganz gut beherrsche. Nun ist aber die Arbeit mit XML-Dateien in PHP nicht wirklich schön und außerdem wollte ich mal einen neuen Weg versuchen, der dazu noch möglichst wenig Aufwand bedeutet.

Weiterlesen →

SVG Icons per CSS bearbeiten

In meinem Beitrag von gestern hatte ich euch ja erzählt, die Icons als SVG Dateien in TwentySeventeen eingebunden werden. Ich habe darauf einige Kommentare und Nachrichten erhalten die darauf hindeuten, dass viele von euch noch nicht wirklich mit dieser Methode gearbeitet haben und ich möchte daher noch einige hilfreiche Tipps nachreichen.

Einbindung als CSS-Background

Als erstes ein kleiner Nachtrag zu Einbindung, da diese Frage häufiger vorkam. Einige von euch verwenden Icons als CSS-Hintergrundsbild in einen „before-Pseudoelement“. Hierbei kam die Frage auf, ob man auch dort auf SVG-Dateien setzen könnte, als Ersatz für Icon-Fonts. Die Frage würde ich mit Ja beantworten, allerdings gibt es eine Einschränkung. Es ist nicht möglich, Icons aus einer eingebundenen SVG-Datei zu verwenden, wie ich es euch gestern mit dem <use> Tag gezeigt habe. Es ist aber sehr wohl möglich, Icons aus SVG-Symbolen einer externen Datei einzubinden. Das funktioniert wie folgt:

Weiterlesen →

SVG-Icons statt Icon-Font im neuen Default Theme

Vorgestern hatte ich euch ja einige Neuerungen von WordPress 4.7 vorgestellt. Eine weitere Neuerung betrifft ein Detail des neuen Default Theme TwentySeventeen. Bisher wurden für Icons immer sogenannte Icons-Fonts verwendet. Also Schriftarten, die nur Icons enthalten.

Nachteile von Icon Fonts

In meinen Folien zum Vortrag beim WordCamp Nürnberg 2016 hatte ich euch ja schon berichtet, weshalb Icons-Fonts gegenüber SVG Dateien viele Nachteile haben. Hier noch einmal die Übersicht:

Weiterlesen →

Bereichsattribute für Datum-Formularfelder

Mit HTML5 wurden ja einige neue Formularfelder eingeführt. Neben Feldern für E-Mail-Adressen, URLs, Zahlen, Farben und anderen gibt es auch zwei Felder für Datumsangaben – mit und ohne Uhrzeit.

Viele verwenden anstelle dieser neuen Felder aber den jQuery Datepicker. Um diesen richtig zu Konfigurieren sind aber komplizierte JavaScript Funktionen notwendig. Auch eine Mehrsprachigkeit ist nicht ganz trivial. Und nicht zuletzt sind diese Datepicker auf mobilen Endgeräten nicht gut zu bedienen.

Native Datumsauswahl

Aus diesen Gründen bin ich eigentlich schon lange ein großer Fan der nativen Formularfelder für die Datumsauswahl. Das ganz sieht wie folgt aus:

Weiterlesen →

Neues für Entwickler in WordPress 4.7 „Vaughan“

Seit heute Abend ist die nächste und, wie gestern schon erwähnt, vorerst letzte regelmäßig erscheinende WordPress Version veröffentlicht worden. Auf de.wordpress.org wurde ein ausführlicher Artikel dazu veröffentlicht. Ich möchte daher an diese Stelle nicht alles noch einmal erzählen, sondern auf die Änderungen eingehen, die vor allem Entwickler interessieren könnte.

Post Type Templates

Die Template Hierarchie sollte ja einigen von euch ein Begriff sein. Diese gibt vor, welche Datei in einem Theme für welche Darstellung verwendet werden soll. Daneben gibt es noch die Möglichkeit, weitere Seitentemplate anzulegen, die man dann auf Seiten manuell auswählen kann. Damit diese verwendet werden können, muss der Post Type allerdings die Option page-attributes auf true gesetzt werden muss. Hat man aber keinen Einfluss auf diesen Wert, dann kann man nun die neue Funktion in WordPress 4.7 nutzen. Alles, was ihr dazu tun müsst, ist den Kommentar um die Angabe der Post Types zu erweitern:

Weiterlesen →

Rückblick auf das WordCamp US 2016

Da sitze ich nun in Philadelphia auf dem Flughafen und warte auf meinen Flug, der in etwas mehr als eineinhalb Stunden abfliegt. Hinter mir liegen drei Tage auf meinem ersten WordCamp außerhalb Europas. Obwohl das WordCamp US schon alleine vom Namen her darauf schließen lassen würde, dass sich hier nur die US Community getroffen hat, waren doch erfreulich viele Teilnehmer aus Europa, Asien, Afrika und anderen Teilen der Welt auf dem WordCamp.

Eine kurzfristige Entscheidung

Dass ich euch heute überhaupt vom WordCamp US berichten kann hätte ich mir noch vor zwei Wochen nicht vorstellen können. Den Anstoß gab der Tweet, dass das WordCamp US ab nächsten Jahr die Stadt wechselt:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von X.

Tweet direkt öffnen

Weiterlesen →