So nutzen Sie Elementor-Typografie zur Optimierung der Website-Leistung

Typografie spielt eine entscheidende Rolle für die Leistung einer Website. Die Schriftarten und Textelemente auf einer Seite erfordern zusätzliche Downloads und Ressourcen, die die Ladezeiten verlangsamen können. Bei WordPress-Sites, die den beliebten Seitenersteller Elementor verwenden, ist die Optimierung der Typografie sowohl in der kostenlosen als auch in der Pro-Version ganz einfach.

In diesem Beitrag besprechen wir, wie die Funktionen von Elementor die Website-Leistung verbessern können, indem sie die Art und Weise optimieren, wie Schriftarten geladen und angezeigt werden. Wir werden uns die kostenlosen Funktionen wie Ressourcenhinweise, Inline-Schriftarten und den Austausch von Schriftarten ansehen, die die Leistung verbessern. Anschließend erkunden wir die zusätzlichen Pro-Funktionen wie benutzerdefinierte Schriftarten und unterstützte Schriftartformate, die die Geschwindigkeit weiter steigern.

Durch die richtige Nutzung der Typografiefunktionen von Elementor können Sie eine schnelle, effiziente Website erstellen, die Besucher schnell bedient, ohne auf gut gestaltete Textelemente zu verzichten. Wir geben umsetzbare Tipps zur Implementierung dieser Funktionen für eine bessere Leistung. Lass uns eintauchen!

Kostenlose Elementor-Funktionen, die die Leistung verbessern

Elementor verfügt bereits in der kostenlosen Version über fantastische integrierte Leistungsoptimierungsfunktionen. Diese Funktionen ermöglichen es Ihnen, Besuchern eine schnellere und effizientere Website bereitzustellen, ohne dass ein Upgrade auf den kostenpflichtigen Pro-Plan erforderlich ist. Wir behandeln die wichtigsten kostenlos angebotenen Funktionen, die Typografie und Leistung direkt verbessern.

Ressourcenhinweise

Mit der Funktion „Ressourcenhinweise“ können Sie die Priorität für das Herunterladen wichtiger Schriftartressourcen festlegen. Dies bedeutet, dass Sie Browsern mitteilen können, welche Schriftarten am wichtigsten sind und zuerst bereitgestellt werden müssen. Durch die strategische Auswahl der Priorität vermeiden Sie das Standardverhalten des Browsers, das die Bereitstellung wichtiger Schriftarten verzögern und zu FOUT führen kann.

Insbesondere zwingt der Ressourcenhinweis zum Vorladen das Laden von Schriftarten zu einem frühen Zeitpunkt beim Laden der Seite. Anschließend stellt der Preconnect-Ressourcenhinweis frühzeitig Verbindungen zu Schriftartenanbietern wie Google Fonts her, um eine schnellere Bereitstellung zu ermöglichen. Wenn Sie diese sorgfältig für die von Ihnen gewählte Typografie konfigurieren, steigern Sie die Leistung, indem Sie CLS- Verschiebungen reduzieren.

Inline-Schriftart

Durch die Aktivierung von Inline Font können die CSS-Schriftartdaten von Textelementen direkt in den HEAD und nicht in ein externes Stylesheet eingefügt werden. Dies verringert die Abhängigkeit vom Laden externer Ressourcen, um Text auf der Seite schnell und scharf anzuzeigen.

Die Reduzierung der Dateien, die für die Textformatierung separat heruntergeladen werden müssen, wirkt sich enorm positiv auf die Geschwindigkeit der Website aus. Es minimiert auch den FOIT, da der Text deutlich geladen wird, anstatt unsichtbar zu beginnen und dann einzutauchen. Die Inline-Methode ist eine großartige Möglichkeit, die Typografie hervorragend aussehen zu lassen und gleichzeitig die Effizienz zu optimieren.

Austausch der Schriftartenanzeige

Der in Elementor integrierte Font Display Swap-Mechanismus ermöglicht Ihnen eine intelligente Steuerung des Ladens von Schriftarten. Sie können zunächst eine gängige Systemschriftart als Ersatz anzeigen und dann nach dem Laden zu Ihrer bevorzugten benutzerdefinierten Schriftart wechseln, um FOIT zu vermeiden. Um benutzerdefinierte Schriftarten in Elementor Pro hinzuzufügen, fügen Sie den folgenden Code-Elementor Pro-Plugin-Ordner hinzu.

function update_font_display() {

	return 'swap'; // Or any other value.

}
add_filter( 'elementor_pro/custom_fonts/font_display', 'update_font_display' );

Mit dieser Funktion können Sie eine Ersatzschriftart wie Arial oder Times New Roman angeben, um Text sofort beim Laden der Seite anzuzeigen. Wenn der Download Ihrer ausgewählten schicken Schriftart dann abgeschlossen ist, wird sie nahtlos eingeblendet, sodass Besucher Ihre gewünschte Typografie weiterhin ohne Verzögerung sehen können. Dies verhindert das „unsichtbarer Text, dann blinken“-Verhalten, das die Lesbarkeit beeinträchtigt.

Elementor Pro-Funktionen für Leistung

Während die kostenlose Version von Elementor über hervorragende Optimierungsmöglichkeiten verfügt, werden durch ein Upgrade auf den kostenpflichtigen Plan Elementor Pro zusätzliche nützliche Typografiefunktionen für ein noch schnelleres Laden der Seite freigeschaltet. Die Pro-Funktionen ermöglichen eine stärkere Anpassung und ein effizienteres Laden benutzerdefinierter Schriftarten, die auf Ihre Marke zugeschnitten sind.

Die wichtigsten Bereiche, in denen Elementor Pro die Leistung weiter steigert, sind benutzerdefinierte Schriftarten und unterstützte Schriftartformate. Lassen Sie uns diese genauer untersuchen.

Benutzerdefinierte Schriftarten

Mit der Funktion für benutzerdefinierte Schriftarten in Elementor Pro können Sie Ihre einzigartigen Markenschriftarten ordnungsgemäß hochladen und hosten , um eine optimale Bereitstellung zu gewährleisten. Ohne die Aktivierung benutzerdefinierter Schriftarten müssten Sie Schriftarten separat hosten und dann eine Verknüpfung zu ihnen herstellen, wodurch zusätzliche Verbindungen und Ressourcen entstehen.

Durch die direkte Integration Ihrer Signaturschriftarten in das Kit von Elementor Pro optimieren Sie das Laden von Schriftarten. Dadurch werden externe Anforderungen entfernt, die Ladungsgröße verringert und die Angabe erweiterter Zustellungsanweisungen wie das Vorladen ermöglicht. Besucher werden Ihre Seiten als schneller und ausgefeilter wahrnehmen.

Darüber hinaus verhindern selbst gehostete Schriftarten Probleme wie Ausfälle bei Drittanbietern von Schriftarten. Selbst wenn Sie zuverlässige Quellen wie Google Fonts verwenden, ist das lokale Einfügen von Schriftarten effizienter. Elementor Pro übernimmt die schwere Arbeit, sodass die benutzerdefinierte Typografie die Arbeit nie verlangsamt.

Unterstützte Schriftformate

Zusätzlich zur vereinfachten Verwendung benutzerdefinierter Schriftarten unterstützt Elementor Pro mehrere optimierte Schriftartformate. Dazu gehören WOFF-, WOFF2-, TTF-, SVG- und EOT-Dateien, die auf bestimmte Browser zugeschnitten sind.

Die Formate WOFF und WOFF2 bieten gegenüber älteren Formaten wie TTF erweiterte Komprimierungsfunktionen. Dadurch werden die Dateigrößen klein gehalten und das Laden beschleunigt. SVG-Schriftarten eignen sich ideal für Symbolsysteme, um eine fein abgestimmte Steuerung und eine gestochen scharfe Anzeige in jeder Größe zu ermöglichen.

Wenn Elementor Pro die Konvertierung und Bereitstellung Ihrer Schriftarten in diesen optimalen Formaten übernimmt, ist eine schlanke, effiziente Bereitstellung und Wiedergabe gewährleistet. Textelemente, die Ihre bevorzugten Schriftarten verwenden, verfügen inline über alle erforderlichen Informationen, um sich blitzschnell schön auszufüllen.

Zusammenfassung

Die Optimierung der Typografie ist eine wichtige Möglichkeit, die Leistung einer Website zu verbessern. Indem Sie die integrierten Geschwindigkeitsfunktionen von Elementor sinnvoll nutzen, können Sie Text schnell anzeigen, ohne Ressourcen aufzublähen oder auf externe Dienste angewiesen zu sein.

Die kostenlosen Funktionen wie Ressourcenhinweise, Inline-Schriftart und Schriftanzeige-Swap ermöglichen eine fein abgestimmte Bereitstellung von Schriftressourcen. Und Elementor Pro erschließt erweiterte Funktionen wie das Selbsthosten von Schriftarten und die Nutzung moderner Schriftartformate.

Zusammen machen diese Typografie-Tools Websites belastbar, effizient und schnell, ohne Kompromisse beim visuellen Design einzugehen. Wenn Sie die verschiedenen Leistungsoptionen verstehen und aktivieren, können Sie eine blitzschnelle Website bereitstellen, bei der Textelemente eher ins Auge fallen als verzögert werden. Nutzen Sie die Kräfte von Elementor, um schöne, optimierte Websites zu erstellen.