ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: 6 Tipps zur Optimierung Ihrer Elementor-Site
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
MacBook Pro (2023) vs. iPad Pro (2022): Was ist der Unterschied?
Gegen
macOS: So verwenden Sie Schnellaktionen im Finder
Wie man
Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)
Wie man
iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe
Wie man
Bewertung: OWC ThunderBay 8 bietet hochvolumigen, leistungsstarken Mac-Speicher
Technische Bewertungen
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tipps > 6 Tipps zur Optimierung Ihrer Elementor-Site
Tipps

6 Tipps zur Optimierung Ihrer Elementor-Site

Zuletzt aktualisiert: November 12, 2021 12:59 am
ThemeLocal vor 1 Jahr 12 Minuten Mindestlesezeit
Aktie
12 Minuten Mindestlesezeit
Aktie

Wie schnell eine Website geladen wird und welche Art von Erlebnis sie bietet, unabhängig von dem Gerät, mit dem sie aufgerufen wird, sind vielleicht die ersten beiden Dinge, die ein Besucher bemerkt, wenn er zum ersten Mal darauf landet.

Contents
Der WordPress Site Builder aus der Vogelperspektive1. Wählen Sie eine Methode zum Laden von Schriftarten, um die Seitengeschwindigkeit zu erhöhen2. Beheben Sie Serverkonfigurationskonflikte auf Ihrer Site3. Optimieren Sie Ihr Site-Layout4. Site-Visuals komprimieren, ohne die Qualität zu beeinträchtigenOptimolSmush5. Verbessern Sie die Leistung mit DOM-Ausgabe- und Asset-Ladefunktionen6. Wählen und verwalten Sie Ihre Plugins effizient

Es ist wichtig zu lernen, wie Sie Ihre Website für Leistung und Conversions optimieren, da dies sicherstellt, dass sie genau so hart arbeitet, wie sie sollte, und Ihre Besucher mit dem Surferlebnis zufrieden sind.

Wenn Sie sich auf dieser Website befinden, sind Sie wahrscheinlich hier, um nach Informationen über WordPress zu suchen. Und wenn Sie von WordPress gehört haben, müssen Sie Elementor kennengelernt haben – den führenden Drag-and-Drop-Website-Builder im Ökosystem.

Der WordPress Site Builder aus der Vogelperspektive

Wenn Sie eine Elementor-Site haben, diese aber noch nicht vollständig optimiert haben, verpassen Sie viele unglaubliche Vorteile. Elementor ist ein WordPress-Website-Builder zum Erstellen einzigartiger und optisch ansprechender Websites. Es hat eine aktive Community von über 8 Millionen Web-Erstellern.

Elementor zeigt Ihnen das Ergebnis Ihres Designs, während Sie verschiedene Elemente des Webdesigns zusammensetzen, was den Prozess für Sie beschleunigt. Das Tool lässt sich problemlos mit anderen Plugins kombinieren und funktioniert bequem mit jedem WordPress-Theme.

Elementor bietet intuitive Navigatoren und Menüs, die auch ohne HTML- oder CSS-Codierungskenntnisse verwendet werden können. Die neueste Version, dh Elementor 3.4, kommt mit ein paar raffinierten UX-zentrierten Funktionen und Verbesserungen.

Es bietet Benutzern die Möglichkeit, mit neuen Gestaltungsmöglichkeiten grenzenlos zu gestalten. Man kann das Menu Cart-Widget, AJAX Load More, Video Playlists und Dynamic WooCommerce Tags erkunden. Diese Funktionalitäten helfen bei Marketing- und anderen Funktionen auf den Websites.

So großartig Elementor auch out-of-the-box ist, es gibt immer noch Raum für Verbesserungen, wenn es um die Plugin-Leistung und die Funktionalität Ihrer Website geht. In diesem Artikel besprechen wir sechs Tipps, die Ihnen helfen, die Vorteile von Elementor zu nutzen und gleichzeitig das Plugin für Ihre Website zu optimieren. Lasst uns beginnen:

1. Wählen Sie eine Methode zum Laden von Schriftarten, um die Seitengeschwindigkeit zu erhöhen

Elementor-Schriftartlademethode

Elementor ermöglicht seinen Benutzern, die Lademethode für Google-Schriftarten auf den Websites zu ändern. Wie diese Schriftarten geladen werden, kann sich auf das Laden Ihrer Website auswirken. Das Elementor-Team veröffentlicht ständig Updates, die die Funktionsweise ihres Plugins im Hinblick auf die Verbesserung der Leistung optimieren.

Auf dem Elementor-Einstellungsbildschirm können Sie die Änderungen in Ihrer Google Fonts-Lademethode auswählen. In der neuesten Version haben Sie Zugriff auf fünf Optionen zur Auswahl, nämlich:

  • Standard: Hier legt der Browser die Strategie für die Schriftdarstellung fest.
  • Blockierung: Gibt dem Schriftbild eine kurze Blockperiode und eine unendliche Wechselperiode.
  • Zurückfallen: Gibt der Schriftart eine extrem kleine Blockperiode und eine kurze Austauschperiode.
  • Optional: Dies ist dasselbe wie Fallback, wenn es darum geht, den Text auszublenden. Der einzige Unterschied besteht darin, dass eine Fallback-Schriftart verwendet wird, es sei denn, die Schriftart ist vollständig geladen.
  • Wechsel: Dies bedeutet, dass, wenn eine Schriftart nicht wie erforderlich geladen wird, Fallback-Schriftarten verwendet werden, bevor sie mit einer aktualisierten Version erneut gerendert werden, sobald sie verfügbar ist.

2. Beheben Sie Serverkonfigurationskonflikte auf Ihrer Site

Bei jedem Plugin ist es möglich, dass Sie in einen Serverkonflikt geraten. Um Ihre Hosting- oder Server-Schwierigkeiten bei der Verwendung von Elementor zu minimieren, können Sie einen einfachen Schalter verwenden, auf den Sie über die Elementor-Kerneinstellungen zugreifen können.

Klicken Elementor > Einstellungen > Erweitert Aktivieren Sie unter „Editor Loader“ die Option „Frontend-Editor-Loader-Methode wechseln“, um Serverkonfigurationskonflikte zu lösen (siehe Screenshot oben).

Auf diese Weise würden Sie die Loader-Methode des Elementor-Editors aktivieren, die sich zum Lösen verschiedener Arten von Hosting-Serverproblemen als nützlich erweist.

3. Optimieren Sie Ihr Site-Layout

Um Ihre Website interaktiv und benutzerfreundlich zu gestalten, bietet Elementor verschiedene Layouts zum Hinzufügen von Designs zu Ihrer Website. Es gibt verschiedene Optionen, z. B. Rasterformat oder Mauerwerksstil, die Sie je nach dem, was gut mit dem Inhalt Ihrer Website funktioniert, auswählen können.

Das jüngste Update des Theme Builder ermöglicht Ihnen tatsächlich einen visuellen Überblick über die gesamte Site. Sie können verwalten, welche Vorlage für welche Bereiche der Site gilt, und Inhalte bei Bedarf einfach bearbeiten, aktualisieren und ändern.

Sie können auch ein Standard-Blog-Layout verwenden, um Ihre Produkte gut anzuzeigen. Mit den neu eingeführten benutzerdefinierten Breakpoints können Sie reaktionsschnellere Websites erstellen. Ein Breakpoint ist im Grunde ein Punkt, an dem ein Inhaltselement auf die Breite des Geräts reagiert.

Das heißt, Ihre Website würde auf jeder Bildschirmgröße gut aussehen und Besuchern auf jedem Gerät ein besseres Erlebnis bieten. Das Website-Layout ändert sich dynamisch je nach Gerätebreite mit diesen Breakpoints, die mit dem reaktionsschnellen Steuerelementlademechanismus von Elementor optimiert werden können. Jetzt kann die Server-Reaktionszeit um bis zu 23 % gesteigert werden.

Elementor-Haltepunkte

Darüber hinaus können Sie mit Elementor 3.4 (und höher) Ihr Design-Layout an sieben Geräte anpassen, einschließlich des ursprünglichen Desktops, Mobiles und Tablets.

Es bietet Breakpoints zusammen mit neuen Widescreen-Gerätegrößen für mehr Bildschirmfläche. Es bietet Ihnen vollständige Flexibilität, um die Vorschaugröße bei Bedarf unabhängig hoch- oder herunterzuskalieren, wodurch Sie eine Plattform erhalten, die eine viel höhere Leistung bietet.

4. Site-Visuals komprimieren, ohne die Qualität zu beeinträchtigen

Die Bildoptimierung ist ein entscheidender Faktor bei der Verbesserung der Gesamtleistung Ihrer Website. Kunden suchen nach mehr visuellen Inhalten und wollen schneller ladende Websites. Um die Ladezeit der Website zu verkürzen, müssen Sie Ihre Bilder optimieren.

Da sich WordPress-Themen und Designtrends immer mehr in Richtung visueller Elemente entwickeln, ist es unbedingt erforderlich, sicherzustellen, dass die Videos, Fotos und GIFs, die Sie auf Ihrer Website einfügen, diese nicht verlangsamen.

Aber anstatt alle Visuals beim Laden der Seite auf einmal herunterzuladen, können Sie Lazy Loading einsetzen – eine im Webdesign beliebte Technik, um das Laden nicht kritischer Ressourcen (z Moment der Notwendigkeit (zB das Herunterscrollen der Seite).

Lazy Loading ist seit WordPress 5.5 eine WordPress-Core-Funktion, funktioniert jedoch nicht mit Elementor, da das Plugin Hintergrundbild-CSS in einem separaten Stylesheet kompiliert. Aber keine Sorge, wir sprechen von WordPress, also gibt es für alles ein Plugin! Hier sind ein paar großartige Optionen, die Sie in Betracht ziehen sollten.

Optimol

Optimol

Infos & DownloadDemo ansehen

Eine All-in-One-Bildoptimierungslösung für WordPress, kompatibel mit Elementor. Ihre Bilder werden von einem CDN und nicht vom Hauptserver bereitgestellt, was die Ladezeiten und Ihre Bandbreitennutzung reduziert. Es wählt die richtige Bildgröße für den Browser und das Ansichtsfenster des Besuchers aus und verwendet Lazy Loading, um die Bilder anzuzeigen.

Smush

Smush-Bildkomprimierung

Infos & DownloadDemo ansehen

Mit Smush, einem weiteren hoch bewerteten Bildoptimierungs-Plugin, das gut mit Elementor funktioniert, können Sie Bilder einfach in der Größe ändern, optimieren und träge laden, um die Leistung zu verbessern. Es bietet verlustfreie Komprimierung und verarbeitet PNG-, JPEG- und GIF-Dateien in großen Mengen. Sie können auch eine automatische Optimierung einrichten, damit Ihre Anhänge beim Hochladen superschnell komprimiert werden.

5. Verbessern Sie die Leistung mit DOM-Ausgabe- und Asset-Ladefunktionen

Die neueste Version von Elementor enthält eine Reihe von Leistungshighlights, wie z. B. das verbesserte Laden von Assets und die Zugänglichkeit. Die neue Version reduziert die Dateigrößen von JS-Assets, indem sie Unterstützung für ältere Browser (wie den Internet Explorer) abzieht.

Kleinere Dateigrößen für Assets verbessern die Ladegeschwindigkeit, und bedingt geladene Leuchtkästen bieten die Möglichkeit, sie bei Bedarf zu laden.

Elementor arbeitet an DOM-Elemente reduzieren und Seitengewicht, wenn diese die Geschwindigkeit Ihrer Website verlangsamen. Es verfügt auch über Inline-Laden, sodass Benutzer Widgets anzeigen können, ohne darauf warten zu müssen, dass alle JavaScript-Dateien vollständig heruntergeladen sind, bevor Inhalte oder Funktionen gerendert werden.

DOM-Ausgabe- und Asset-Ladefunktionen

Um sicherzustellen, dass Ihre Website nach besten Kräften optimiert ist, nimmt Elementor Änderungen am CSS-Rendering vor und entfernt DOM-Elemente.

Einige Verbesserungen können jedoch einige Zeit in Anspruch nehmen, da sie ein geringes Störungspotenzial haben, während andere ein hohes Risiko mit einem noch höheren Potenzial für Probleme bergen, wenn sie falsch gemacht werden.

6. Wählen und verwalten Sie Ihre Plugins effizient

Elementor verfügt über eine eigene Builder-Funktion, integriert und verwaltet jedoch problemlos Plugins für individuellere Anforderungen. Elementor lässt sich beispielsweise gut in renommierte WordPress-Plugins wie WooCommerce, Yoast, Rank Math, ACF, Toolset, Pods, LearnDash, Tutor LMS und MemberPress integrieren.

Um Formulare in Elementor zu integrieren, können Sie das Shortcode-Widget verwenden. Diese Methode ermöglicht jedoch keine visuelle Anpassung Ihres Formulars auf einer von Elementor bereitgestellten Seite, da Shortcodes verwendet werden, um Ihre Formulare in Seiten einzubetten.

Nehmen Sie sich Zeit, um Plugins auszuwählen, die für die Zusammenarbeit mit Elementor entwickelt wurden. Add-ons wie Happy Addons und Essential Addons werden mit Elementor-Widgets geliefert, mit denen Sie die Formulare Ihrer Site in den visuellen Editor integrieren können.

Egal, ob Sie Gravity Forms, Contact Form 7 oder andere beliebte Plugins verwenden, diese Integrationen sorgen dafür, dass Ihre Formulare sowohl im Designmodus als auch auf veröffentlichten Seiten gut aussehen. Und sie laufen auch so effizient wie eh und je, ohne die Leistung der Site zu beeinträchtigen.


Es ist nicht zu leugnen, dass Elementor 3.4 ein großer Schritt nach vorne in Bezug auf Website-Design und -Leistung ist. Es bietet viele verbesserte Funktionen wie Schieberegler, Animationen und Live-Formular-Builder, die die Benutzeroberfläche von Websites verbessern können, um Produkte zu verkaufen und gleichzeitig Informationen von Benutzern zu sammeln, die die Website besuchen.

Aber noch wichtiger ist es, einen Schwerpunkt auf die Optimierung der Website zu legen. Die Leistung Ihrer Website ist der Hauptdiktator für den Erfolg moderner Online-Unternehmen. Schließlich frustrieren unscheinbare, langsame und klobige Websites die Website-Besucher und bringen das Endergebnis eines Unternehmens zunichte. Wenn Sie nicht möchten, dass Ihre potenziellen Kunden nach Alternativen suchen, optimieren Sie Ihre Website.

Verwandter Beitrag

Fokusmodus funktioniert nicht? Probieren Sie diese 8 Tipps zur Fehlerbehebung aus

Wie man Siri beibringt, einen Namen zu sagen, indem man die phonetische Schreibweise zur Kontakte-App hinzufügt

Die 8 besten Tools zur Optimierung von Online-Inhalten für WordPress (2023)

So erhalten Sie ChatGPT auf Ihrer Apple Watch

So aktivieren Sie Imagick auf Ihrer WordPress-Site

MARKIERTE: ElementorSite, Ihrer, Optimierung, Tipps, zur
ThemeLocal November 12, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So senden Sie Abonnenten automatisch neue Beiträge per E-Mail
Nächster Artikel Tipps für einen produktiveren WordPress-Entwickler
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

So verbergen Sie Ihren Online-Status auf WhatsApp
Wie man
Dieser Switch OLED-Preissturz ist zu gut, um darauf zu verzichten
Angebote
Thrustmaster TX Leather Edition im Test
Technische Bewertungen
Vollformat vs. APS-C: Welchen Kamerasensor sollten Sie wählen?
Gegen
Eine PS5 Pro könnte Sonys gebrochenes Versprechen endlich einlösen
Technische Bewertungen
So erhalten Sie ChatGPT auf Ihrer Apple Watch
Wie man

También podría gustarte

Wie man

Fokusmodus funktioniert nicht? Probieren Sie diese 8 Tipps zur Fehlerbehebung aus

vor 17 Stunden 8 Minuten Mindestlesezeit
Wie man

Wie man Siri beibringt, einen Namen zu sagen, indem man die phonetische Schreibweise zur Kontakte-App hinzufügt

vor 2 Tagen 2 Minuten Mindestlesezeit
Showcase

Die 8 besten Tools zur Optimierung von Online-Inhalten für WordPress (2023)

vor 4 Tagen 12 Minuten Mindestlesezeit
Wie man

So erhalten Sie ChatGPT auf Ihrer Apple Watch

vor 6 Tagen 2 Minuten Mindestlesezeit
Plugins

So aktivieren Sie Imagick auf Ihrer WordPress-Site

vor 1 Woche 11 Minuten Mindestlesezeit
Angebote

Verleihen Sie Ihrer PS5 oder Ihrem PC mit diesem fantastischen SSD-Angebot einen Schub von 2 TB

vor 3 Wochen 2 Minuten Mindestlesezeit
Wie man

So bearbeiten Sie Verknüpfungen auf dem iPhone zur schnellen Anpassung (iOS 16)

vor 3 Wochen 6 Minuten Mindestlesezeit
Technische Bewertungen

Sound und Vision: Die AirPods Max kommen voll zur Geltung

vor 4 Wochen 5 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?