Icon-Schriften durch Inline-SVG ersetzen (Elementor)
Drei mit Font Awesome gezeichnete Icons können eine ganze Icon-Schrift von 80 KB oder mehr laden, oft mit mehreren Stylesheets. Die Option Icon-Schriften durch Inline-SVG ersetzen (Elementor) wandelt diese Icons in Inline-SVG um und entfernt die Schriftdateien von Seiten, die sie nicht mehr brauchen. Sie ist standardmäßig ausgeschaltet und setzt Elementor voraus, weil die Zeichnungen aus den eigenen Dateien von Elementor stammen.
Einschalten
- Öffnen Sie Baza Helper > Cache und Optimierung.
- Aktivieren Sie Icon-Schriften durch Inline-SVG ersetzen (Elementor). Die Option steht in der Liste der Einstellungen über Barrierefreiheits-Markup automatisch reparieren.
- Leeren Sie den Seiten-Cache, damit Seiten, die schon im Cache liegen, mit der neuen Option neu erstellt werden.
So funktioniert es
- Jede fertige Seite wird beim Rendern gelesen, und das Ergebnis landet im Seiten-Cache.
- Ein leeres Font-Awesome-5-Icon (solid, regular oder brands) oder ein Elementor-Icon (eicon) wird zu Inline-SVG, das aus den Zeichnungen von Elementor entsteht. Andere Attribute und Klassen bleiben erhalten.
- Ein Icon, das das Theme im CSS mit einem Pseudoelement und einem Font-Awesome-5- oder 6-Code zeichnet, wird zu einer SVG-Maske mit derselben Zeichnung.
- Wenn auf einer Seite nichts mehr eine Icon-Schrift braucht, werden deren Stylesheets, die Schrift-Preloads und das Font-Awesome-4-Shim-Skript von dieser Seite entfernt.
- Jede Seite wird für sich beurteilt. Ein Scan der ganzen Website ist nicht nötig, und neue Inhalte werden automatisch erfasst.
Was die Schrift noch braucht
Eine Seite behält ihre Icon-Schriften, wenn sie noch ein Icon enthält, das das Plugin nicht zeichnen kann:
- Font-Awesome-4-Namen, etwa die Klasse fa mit dem Namen FontAwesome.
- Klassen für Größe, Drehung und Animation, etwa fa-2x, fa-spin und fa-fw.
- Icon-Namen, die das Plugin nicht kennt.
- Eine Icon-Schrift, die Ihre eigene @font-face-Regel im Theme deklariert.
Seite nach dem Einschalten prüfen
Sehen Sie sich Akkordeons, Icon-Listen, Menüs und Icons von Social-Media-Profilen an. Icons, die direkt in ein Theme-Stylesheet geschrieben sind und vom Plugin nicht gelesen werden können, bleiben unverändert. Prüfen Sie diese deshalb auch auf der Website.
Warum das wichtig ist
Eine Seite mit drei Font-Awesome-Icons lädt meist eine Schrift von 80 KB oder mehr und mehrere CSS-Dateien. Wenn diese Icons als SVG gezeichnet werden, entfällt dieser Download auf Seiten, auf denen nichts anderes die Schrift braucht.
