Leistungstest Die meistverkauften WordPress-Themes im ThemeForest

Die Leistung ist einer der wichtigsten Aspekte einer Website, aber dies wird von den Benutzern selten beim Kauf von WordPress-Themes berücksichtigt. In dieser Zusammenfassung betrachten wir die zehn meistverkauften Themen von Themeforest in der Reihenfolge ihres Auftritts, führen sie einige grundlegende Leistungstests durch und sehen, welche Schlussfolgerungen wir ziehen können.

Die ausgewählten Themen

Die Liste der meistverkauften WordPress-Themes von ThemeForest wird wöchentlich aktualisiert. Sie werden jedoch häufig von bekannten Spielern gesehen, die einige Zeit an der Spitze stehen. Wir haben die Top Ten (siehe unten) genommen und sie mit einigen Leistungstests gegeneinander angesetzt.

Bestseller-WordPress-Themes - wöchentlich aktualisiert

Die Tests

Es gibt viele Tools zum Testen von Websites. Wir haben einige Klassiker ausgewählt: Google Pagespeed Insights, Webpagetest.org, Pingdom und Chrome-Entwicklungstools. Die meisten geben Rückmeldungen darüber, wie schnell eine Webseite geladen wird, wie viel Gewicht insgesamt zur Verfügung steht und wie effizient ihre Assets geleitet werden, was letztendlich zu einer Punktzahl führt. Wir haben für jedes Thema eine Demo durch diese Tools laufen lassen und die Figuren zusammengestellt (siehe Tabelle am Ende des Beitrags)..

Zusätzlich zu diesen Tests haben wir das Plugin "Accessibility Audit" für Chrome-Entwickler verwendet. Dies hat nichts mit Performance zu tun, aber die Ergebnisse geben immer Aufschluss darüber, wie ein Thema erstellt wird.

Einige Dinge zu beachten:

  • Diese Demos werden alle von den jeweiligen Autoren des Themas gehostet. Hosting-Spezifikationen sind nicht alle gleich.
  • Eine zufällige Demo wurde ausgewählt, bei der mehrere Optionen verfügbar waren. WooCommerce, BuddyPress oder andere Plattform-Plugins wurden nach Möglichkeit vermieden. Es wurden auch keine offensichtlichen Bildvoreingenommenheitsthemen (wie zum Beispiel Fotoportfolios) verwendet.
  • Alle URLs wurden, soweit möglich, aus Kalifornien getestet.
  • Präzise Ergebnisse können von Tag zu Tag variieren.
  • Theme-Demos sind oft so aufgebaut, dass sie visuelle Wirkung zeigen und mit qualitativ hochwertigen Bildern und möglichst vielen Funktionen ausgestattet sind. Dies bedeutet, dass Demos nur selten ein genaues Spiegelbild dafür sind, wie eine Website aussehen und sich verhalten kann. Es ist wahrscheinlich, dass Sie mit Ihrer eigenen Kopie die Leistungswerte all dieser Demos verbessern würden.
  • Alle Theme-Autoren sind herzlich eingeladen, ihre Bewertungen zu diesen Demos zu verbessern. Der Artikel wird entsprechend den neuen Nummern aktualisiert.

Avada

Avada: Kreative Demo
  • Pagespeed-Erkenntnisse mobil: 73%
  • Pagespeed Insights Desktop: 88%
  • Webpagetest.org: Straight A's: AAAAA☑
  • Pingdom: 92% (A-Klasse)
  • Pingdom-Ladegeschwindigkeit: 0,97 s
  • Chrome Dev Tools Seitengewicht: 1.3Mb
  • Erreichbarkeitsprüfung: 94% (ausgezeichnet). ARIA-Attribute folgen Best Practices, Elemente sind gut strukturiert und Metatags werden ordnungsgemäß verwendet.

Auf der ganzen Linie hervorragende Ergebnisse. Anfängliche Tests waren weniger stark, aber ThemeFusion konnte die Anzahl durch Optimierung der in dieser Demo verwendeten Bilder erheblich verbessern. Der Desktop-Score von Pageview Insights stieg von 48% auf 88%, allein aufgrund der Bildgewichtung. Dies zeigt, wie wichtig die Bildoptimierung ist! Toll zu sehen, dass Avada auch barrierefrei gebaut ist.

The7

The7: Baudemo
  • Seitenzugriffe mobil: 64%
  • Pagespeed Insights Desktop: 91%
  • Webpagetest.org: A's auf der ganzen Linie. AAAAA☑
  • Pingdom: 68% (D-Klasse)
  • Pingdom-Ladegeschwindigkeit: 1,51 s
  • Chrome Dev Tools Seitengewicht: 1.3Mb
  • Erreichbarkeitsprüfung: 83% Bewertung (nicht schlecht). Einige Bildelemente fehlen alt Attributen kann das Farbkontrastverhältnis für einige Textbereiche (relativ zum Hintergrund) besser sein. Insgesamt sind die Elemente jedoch gut strukturiert und die Zugänglichkeit ist solide.

Im Allgemeinen lädt diese Demo ziemlich schnell; Die Bilder und Assets sind nicht zu schwer, und die Seite ist beim Laden relativ schnell nutzbar. Der Pingdom-Grad ist jedoch nicht optimal. Verbesserungen könnten durch die Kombination einiger JavaScript- und CSS-Elemente erzielt werden. Das Zwischenspeichern kann jedoch vereinfacht werden, indem keine Versionsnummern für Dateinamen erzwungen werden (z. /assets/css/settings.css?ver=5.4.5.2).

BeTheme

BeTheme: 3D-Demo
  • Pagespeed-Erkenntnisse mobil: 76%
  • Pagespeed Insights Desktop: 87%
  • Webpagetest.org: AAAAA☑ von Straight A
  • Pingdom: 98 (A-Klasse)
  • Pingdom Lastgeschwindigkeit: 1,27 s
  • Chrome Dev Tools Seitengewicht: 1.8Mb
  • Barrierefreiheits-Audit: 80% unterschreitet die Kontrastverhältnisse (dies ist ein ziemlich dunkles Thema) und die unvollständige Verwendung von ARIA-Rollen.

Dieses Thema wird sehr schnell geladen. Viele der sichtbaren Inhalte werden durch die Aufnahme wesentlicher Inline-Stile in die Prioritätenliste priorisiert Kopf, und viel von dem, was geladen ist, ist minimiert und verkettet. Wie häufig machen Bilder den Hauptanteil der Seitengewichtung aus (69,5%), so dass es nicht schwierig sein würde, die Homepage dieses Demos unter die goldene 1-MB-Grenze zu bringen.

Impreza

Impreza: Restaurant-Demo
  • Seitenzugriffe mobil: 63%
  • Pagespeed Insights Desktop: 68% 
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (Klasse B)
  • Pingdom-Ladegeschwindigkeit: 2,34 s
  • Chrome Dev Tools Seitengewicht: 2.5Mb
  • Erreichbarkeitsprüfung: 94% (ausgezeichnet). Ordnungsgemäß verwendete Attribute für Elemente, einschließlich ARIA-Rollen. Erkennbare Elementnamen und gut beschriebene Inhalte.

Zwar ist die Ladegeschwindigkeit der Restaurant-Demo von Impreza nicht schlecht, aber die Leistung wird durch über 2 MB Bilder beeinträchtigt. Bemerkenswert sind auch das fehlende CDN und die schlechte Antwortzeit des Servers. Zwei Aspekte, die für das Hosting dieser Demo spezifisch sind und die Sie leicht verbessern können. 

Umfalten

Enfold: Fitnessstudio-Demo
  • Seitenzugriffe mobil: 60%
  • Pagespeed Insights Desktop: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (Klasse C)
  • Pingdom-Ladegeschwindigkeit: 2,79 s
  • Chrome Dev Tools Seitengewicht: 5.2Mb
  • Barrierefreiheits-Audit: 89% Eines der Top-Demos mit dem stärksten Thema bezüglich Barrierefreiheit, das eine grundlegende Stärke in der Verarbeitungsqualität zeigt.

Auch hier wurde keine CDN für das Hosting dieser Demo verwendet, wodurch sie auf webpagetest.org ein paar Punkte verliert. Ein Mangel an HTTPS hätte Enfold möglicherweise auch eine schwarze Marke eingebracht. Wie üblich fällt diese Demo in die Falle, so visuell wie möglich zu sein und das Seitengewicht für die Bildqualität zu opfern. Bei über 5 MB ist dies das Schwergewicht der Gruppe, aber die Bildgröße ist immer etwas, das leicht zu beheben ist.

X

X: Kirchendemo
  • Pagespeed-Einblicke mobil: 77%
  • Pagespeed Insights Desktop: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (Klasse B)
  • Pingdom-Ladegeschwindigkeit: 2,45 s
  • Chrome Dev Tools Seitengewicht: 2.1Mb
  • Erreichbarkeitsprüfung: 91% Ein sehr gesunder A11y-Wert, der nur durch einen Mangel an Aids gesenkt wurde alt Attribute auf einigen Bildern, geringer Kontrast in einigen Bereichen (dieses Kirchenthema ist ziemlich gedämpft) und das Fehlen eines Titel Attribut auf ein iframe. In Anbetracht der Tatsache, dass der iframe von einem YouTube-Embed stammt, das standardmäßig kein title-Attribut enthält, werden wir dieses Versäumnis vergeben.

Diese Demo ist eine der wenigen, die eine vernünftige Arbeit leistet, um den Image-Overhead auf ein Minimum zu reduzieren. webpagetest verleiht ihm eine solide 97/100 für die Bildkomprimierung. Stattdessen stammen die niedrigen Bewertungen hauptsächlich vom Hosting. Kein CDN, kein HTTPS, schlechte anfängliche Antwortzeit und ein Mangel an "Keep Alive" ("Keep Alive"), ansonsten als persistente HTTP-Verbindung bezeichnet, die leicht eingeschaltet werden kann. Nach wie vor können einfache Verbesserungen, die Sie selbst ausführen, wirksam werden.

Brücke

Brücke: Spa-Demo
  • Pagespeed-Einblicke mobil: 78%
  • Pagespeed Insights Desktop: 91%
  • Webpagetest.org: AAAAA☒
  • Pingdom: 80% (Klasse B)
  • Pingdom-Ladegeschwindigkeit: 1,11 s
  • Chrome Dev Tools Seitengewicht: 1.6Mb
  • Erreichbarkeitsprüfung: 91% (sehr gut). Kleine Punkte, die die Gesamtbewertung herabsetzen, aber ARIA-Attribute folgen Best Practices, und Seitenelemente haben erkennbare Namen, beschreiben ihren Inhalt gut und sind ordnungsgemäß strukturiert.

Eine der leichteren Demos hier, aber die Bildschieberegler werden das Seitengewicht immer erhöhen, selbst wenn die Bilder so optimiert sind. Durch die Reduzierung von HTML und anderen Assets hätten die mobilen Pagespeed-Erkenntnisse mehr Punkte erzielt, obwohl der Desktop-Score extrem gut ist. Verbessertes Hosting würde wiederum eine bessere Serverreaktionszeit bewirken, ein CDN und Caching, die nur wenig Früchte tragen.

Flatsome

Flatsome: Go Explore Demo
  • Seitenzugriffe mobil: 53%
  • Pagespeed Insights Desktop: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (A-Klasse)
  • Pingdom-Ladegeschwindigkeit: 1,02 s
  • Chrome Dev Tools Seitengewicht: 3.7Mb
  • Barrierefreiheits-Audit: 83% Punkte auf der A11y-Front verloren, wenn die Tasten nicht richtig benannt wurden (die WooCommerce-Wunschliste-Symbolschaltflächen können von Bildschirmlesern nicht richtig gelesen werden) und einige Links sind ebenso unbestimmt. Geringer Kontrast bei einigen Elementen und doppelte Element-IDs sind ebenfalls einfache Korrekturen.

Von Pagespeed Insights nicht durch günstige Augen gesehen, obwohl die anderen Bewertungskennzahlen Flatsome absolut lieben! Gutes Hosting dient der Seite effizient (Motivautoren beachten), Ressourcen werden minimiert, und durch das langsame Laden von Bildern wird das, was andernfalls eine mittelschwere Seitenlast wäre, progressiv unterstützt.

Jupiter

Jupiter: Bellona-Vorlage
  • Seitenzugriffe mobil: 38%
  • Pagespeed Insights Desktop: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (A-Klasse)
  • Pingdom-Ladegeschwindigkeit: 1,07 s
  • Chrome Dev Tools Seitengewicht: 3.3Mb
  • Erreichbarkeitsprüfung: 91% (sehr gut). Aufgrund der wirkungsvollen Natur der Grafiken (die ich übrigens auch liebe), führt der Text auf einigen Bildern zu schwachen Kontrastverhältnissen. Die Seitenstruktur und die beschreibende Verwendung von Elementen sowie die ordnungsgemäße Verwendung von ARIA machen die Unzulänglichkeiten des Kontrastes wett.

Ich werde hier wie eine kaputte Platte klingen, aber fünf Minuten Bildoptimierung würden den Aufwand dieser Demo erheblich reduzieren. home-bg-08.jpg allein wiegt fast ein ganzes Megabyte; Wenn Sie es durch TinyPNG laufen lassen, sparen Sie sofort 87%. Warum nicht? Wie Pingdom und Webpagetest vermuten lassen, sind die meisten anderen Leistungsaspekte sehr gut.

Zeitung

Zeitung: Tech News
  • Pagespeed-Erkenntnisse mobil: 76%
  • Pagespeed Insights Desktop: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (Klasse A)
  • Pingdom-Ladegeschwindigkeit: 1,19 s
  • Chrome Dev Tools Seitengewicht: 1.5Mb
  • Erreichbarkeitsprüfung: 86% Eine gute Bewertung könnte verbessert werden, indem Verknüpfungen und Schaltflächen, die tatsächlich für JavaScript-Steuerelemente, Toggles und dergleichen verwendet werden, richtig beschrieben werden.

Auf der ganzen Linie werden hervorragende Ergebnisse erzielt, es gelten Standardverbesserungen (Bildoptimierung, JS- und CSS-Komprimierung / Verkettung). Beachten Sie jedoch, dass diese Demo auch mit einem großen Pull-Out ausgestattet ist, das andere Versionen des Themas unterstützt (zusätzliche Komplikation, die Ihre eigene Version darstellen würde) unwahrscheinlich sein müssen). Ohne großen Aufwand kann diese Demo in die Gewichtsklasse unter 1 MB einsteigen.

So machen Sie Ihre WordPress-Site schneller

Damit ist unsere Zusammenfassung der Ergebnisse abgeschlossen. Nachdem Sie ein WordPress-Theme erworben haben, wie könnten Sie die damit erstellte Website optimieren?

Es wird Sie nicht überraschen: Eine einfache erste Anlaufstelle bei der Optimierung Ihrer Website sind Ihre Bilder. Entfernen Sie unerwünschte Bilder, komprimieren Sie die Bilder, die Sie benötigen, und speichern Sie JPEGs als „progressiv“ (damit beim Laden mindestens etwas zu sehen ist), und Sie haben einen guten Start. Sie können auch ein Lazy Loading-Plugin installieren, um einen Schritt weiter zu gehen. Wir haben gesehen, dass nur sehr wenige dieser Demos der Bildoptimierung Priorität einräumen, aber das bedeutet zumindest, dass Sie ihre Ergebnisse verbessern können.

In Bezug auf die notorisch unbeständigen Pagespeed Insights-Ergebnisse haben Sie festgestellt, dass alle diese Demos (mit Ausnahme eines) besser für Desktop als für mobile Versionen sind. Dies spiegelt nicht mehr die Art und Weise wider, wie das Internet genutzt wird. Um Google (und Nutzer) zufrieden zu stellen, sollten Sie die mobile Leistung sorgfältig prüfen. Eine mobile erste Einstellung hilft auch Ihrem SEO.

Wie kannst du das machen? Das Verketten und Verkleinern von CSS und JavaScript kann mit WordPress schwierig sein. Die Verwendung von Drittanbieter-Plugins bedeutet, dass Dateien sehr viele sein können und Sie ohne sie nicht viel Kontrolle über sie haben. Trotzdem sollten Sie Ihr Bestes geben, um wichtige Inline-Stile für die anfängliche Ansicht in die und machen Sie Ihre Website so schnell wie möglich nutzbar, indem Sie verhindern, dass "Render-Blocking" -Skripts den Ladevorgang verlangsamen. Wenn der Schieberegler oben auf Ihrer Homepage erfordert, dass die gesamte Seite geladen wird, bevor sie angezeigt wird, bestraft Google Sie.

Darüber hinaus betrachten Sie Ihr Hosting. Aktivieren Sie die GZIP-Komprimierung. HTTPS schadet auch nicht. Verwenden Sie auch einen Caching-Dienst. Das Installieren und Konfigurieren von W3 Total Cache ist ein Kinderspiel. Verwenden Sie ein CDN, wenn Ihre Inhalte für ein breites Publikum bestimmt sind. Sehen Sie sich schließlich diese Tutorials und Kurse an, um weitere Informationen und Hilfe zu diesem Thema zu erhalten:

WordPress-Leistungsressourcen

  • Optimieren Sie Ihre Website ohne AMP von Kezz Bracey
  • Warum (WordPress) Performance Matters von Rachel McCollin
  • Beschleunigen Sie WordPress von Barış Ünver
  • Optimieren von Google PageSpeed ​​auf 100 in WordPress von Jeff Reifman
  • So verwenden Sie WordPress-Plugins, ohne die Leistung von Barış Ünver zu beeinträchtigen