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 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 aktualisiertEs 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:
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.
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
).
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.
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.
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.
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.
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.
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.
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.
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.
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: