Archiv der Kategorie: Erfolg mit der Homepage

WordPress Website-Performance = Website Ladezeit

Die Ladezeit Deiner Website ist ein wichtiger Erfolgsfaktor

Da hat mir hosteurope ja einen schönen Strich durch die Rechnung gemacht. Nach einer angemeldeten Server Umstellung stieg die Ladezeit einer meiner Seiten durchschnittlich auf über 3 Sekunden. Und es ist serverseitig auch keine Besserung in Sicht – einzig ein Paketupgrade soll Abhilfe schaffen. Da ich keine Lust auf noch mehr Kosten habe, war basteln angesagt.

Ladezeit unterhalb 1 Sekunde

Nach zahlreichen Optimierungen habe ich die Ladezeit für viele Unterseiten wieder unterhalb einer Sekunde drücken können. Meine liebste Seite lädt jetzt in 871 ms, das tut sie nicht immer und nicht von jedem Kontinent aus, aber es ist wieder im vertretbaren Rahmen.

Ladezeit wird immer wichtiger für die Suchposition bei google

Besucher wollen ungern warten und ab einer Ladezeit von größer fünf Sekunden springen viele Besucher schon ab, oder kehren unverrichteter Dinge zur Suche zurück. Gemessen habe ich mit den pingdom tools. Versuch’s doch auch einmal für Deine Website.

Deine Seite lädt langsam?

Dann wirst Du im Verhältnis zu Deinen Wettbewerbern bei google im Suchergebnis schlechter positioniert.

Du suchst Hilfe bei der Performance-Optimierung Deiner Vereins- oder Karateseite

Dann kannst Du gerne – ich schaue mir Deine Seite gerne an, stelle Dir ein paar technische Fragen und gebe Dir anschließend Tipps zur Optimierung.

Update 25.01.2017

Heute habe ich eine weitere Konfigurationsänderung beim Hoster vorgenommen und nun geht es ab wie Schmitz-Katze mit der Websiteauslieferung. Durch Zufall habe ich eine für wordpress sehr brauchbare Option entdeckt. Ein Bericht aus dem gedruckten t3n Magazin hat mich zum experimentieren veranlasst und siehe da, sogar wptouch performed jetzt ordentlich. 

Update 08.03.2017

Ein guter Schritt nach vorne, ist der Betrieb von wordpress unter php7, das zündet den Turbo 🙂 Grund für die Performanceverbesserung: php7 benötigt viel weniger Ressourcen. Bei den shardehosting Angeboten ist Speicher ja immer ein Problem und so wird das Gesamtsystem Deiner Instanz unter geringerer Last betrieben.

google macht den mobilen Index übrigens zum Hauptindex, da sind für das ranking weitere Optimierungen außerhalb der Ladezeit angesagt! stay tuned.

Update 08.03.2017

Ein weiterer, guter Grund ungenutzte Plugins in WordPress zu deaktivieren: Das Laden der zugehörigen CSS und Javascript Dateien entfällt und blockiert die Anzeige der Seite nicht mehr.

Zudem habe ich mir heute die Mühe gemacht, das CSS der meisten Plugins in eine einzelne Datei zu packen und aus den „Controllern“ das Registrieren (wp_enqueue_style) der Styles rausgeworfen. Das muss ich jetzt zwar nach jedem Plugin Update erneuern, ging aber zügig und hat sich, besonders für mobile Geräte, sehr gelohnt.

Die Maßnahmen haben die Laufzeit noch einmal gut gedrückt, gemessen mit den pingdom tools

pingdom tools

Die Seite die hier gepimpt wird ist übrigens mein Test-, Spiel- und Lieblingsprojekt karate-kampfkunst.de .

Update 09.03.2017

Habe eben noch einmal googles pagespeed insights angeschmissen, Fazit: Es bleibt noch genug zu tun 🙂

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
idee_internet_1

Tipps für Deine Website

In regelmäßige Abständen durchforste ich die etablierten Info-Plattformen mit verschiedenen Werkzeugen nach Neuigkeiten aus der Online Welt. Auf einem eher spontanen Streifzug bin ich durch Zufall auf www.deine-idee-im.net gestoßen.

Die Seite bietet umfangreiche Tipps rund um kommerzielle Websites. Die Artikel sind inhaltlich erstaunlich gut und greifen aktuelle Themen auf – man findet sogar Informationen die manche Agentur nur gegen Bares verkauft.

Besonders gut gefällt mir der prominent platzierte Leitfaden für Unternehmer, der Schritt für Schritt den Weg zur Präsenz im Internet darlegt, Grundlagen anschaulich vermittelt und durchaus als Werkzeug zur Vorbereitung eines Webprojektes verwendet werden kann.

Die Informationen sind auch hervorragend für persönliche Websites oder nicht kommerzielle Vorhaben wie Vereins-Websites geeignet – die konzentrierte Form macht es auch dem Neuling leicht einen Einstieg zu finden.

Wer sich das Geld für ein Grundlagenbuch zum Thema eigene Internet Präsenz sparen möchte oder vor dem ersten Termin mit einer Agentur gut vorbereitet sein möchte, findet unter www.deine-idee-im.net alle notwendigen Informationen.

Das Projekt selbst ist „Powered by Verisign“, was den seriösen Charakter unterstreicht.

Tipps für Deine Website

VN:F [1.9.22_1171]
Rating: 5.0/5 (4 votes cast)
rechtschreibung

WordPress und die Rechtschreibprüfung

Und sie funktioniert doch – doch wieder. Das ist nicht das erste mal, daß mir die Rechtschreibprüfung im tinymce (WordPress Editor) Probleme bereitet, aber diesmal war es nur schwer zu durchschauen.

Fehlerursache

Javaskript aktiv, keine Fehlermeldung – trotzdem wurde nicht ein Rechtschreibfehler erkannt – wundersam, wenn meine Tippqualität sich derart verbessert hätte.

Die Veränderungen seit dem zuletzt erstellten Artikel an beteiligter Software und genutzten Systemen waren naturgemäß zahlreich und als mögliche Fehlerquelle denkbar:

  • Browserupdate – Firefox und Chrome betroffen
    • neue Browserplugins
  • Betriebssystem Update – Fehler war auch an anderem Systemen wiederherstellbar
  • Umzug des Projektes zu einem anderen Webhoster
    • stehen die benötigten libraries zu Verfügung?
  • neue Plugins in WordPress

Lösungsansatz

Ein Blick in die Konfigurationsdatei des spellchecker plugin im tinymce (/wordpress/wp-includes/js/tinymce/plugins/spellcheckerder/config.php) hat mich auf die richtige Fährte gebracht.

Als engine war googles API aktiviert: $config['general.engine'] = 'GoogleSpell';

Nachdem ich die vom Webhoster unterstützte Pspell library ein- und die google API auskommentiert hatte (erfreulicherweise war diese bereits in der Konfig Datei „vorbereitet“) lief die Rechtschreibprüfung wieder wie erwartet. Also ein Problem mit der google API?! Scheint wohl so zu sein, siehe dieses Ticket.

Vielleicht sollte man mit der Recherche grundsätzlich hier anfangen, nur wie bei 3598 Tickets das passende Problem finden? Aber wer weiß, vielleicht findet sich ja ein anderes, schöneres 😉

Die im Ticket genannte Lösung ist auch wirklich wunderbar: „Remove the Spellchecker button from TinyMCE.“ – was nicht funktioniert wird gelöscht – oder ein Programm lässt sich solange optimieren bis es NULL ist.

Alternativen

Eine Alternative ist die Rechtschreibprüfung durch den Browser. Chrome unterstützt das ohne weiteres Zutun, Firefox z.B. nach Installation eines geeigneten Wörterbuches in mehrzeiligen Textfeldern. Mehr dazu hier. Allerdings gefällt mir die Funktion bei „Mausklick links“ mögliche Korrekturvorschläge zu erhalten besser (tinymce), als z.B. die Anzeige der Vorschläge durch Rechtsklick (firefox). Die Browserfunktion markiert möglicherweise fehlerhaften Text aber bereits bei der Eingabe.

Update 03.03.2014:

Für firefox gibt es mit SpellcheckEverything ein sehr cooles addOn, welches die Rechtschreibprüfung für eine ganze Seite ermöglicht – ein Klick und die Fehler werden angezeigt.

 

VN:F [1.9.22_1171]
Rating: 4.8/5 (8 votes cast)
load_javascript

WordPress Performance – laden von Javascript

Eine Sache, die mir bei WordPress überhaupt nicht gefällt, daß Javascript und CSS von Plugins und Widgets geladen werden, die auf einer Seite gar keine Verwendung finden. Bisher kenne ich keine elegante Alternative, das zu unterbinden.

Für ein paar wenige Plugins gibt es ergänzende Optimizer – selbst eingesetzt habe ich bisher nur den Optimizer für die nextgen gallery.

Dabei wird das Laden der Seite durch „nicht genutzten Code“ unnötig verzögert – besonders bei schlechter Verbindung ein Ärgernis. Auch Nutzer von Volumentarifen wird es nicht freuen, wenn eine Seite grundlos hunderte Kilobytes lädt.

Eigentlich wäre es Sache der Plugin Entwickler, hier für Abhilfe zu sorgen, denn das Laden ließe sich von vornherein an diverse Bedingungen knüpfen (Shortcode enthalten, Widget enthalten usw.).

Beschleunigung durch Codeanpassung

Aus zuvor benannten Gründen habe ich mich auf die Suche gemacht, wo die einzelnen Plugins denn Javascript und CSS beisteuern. Dabei habe ich mich über eine Volltextsuche auf die Funktionen wp_enqueue_script und wp_enqueue_style konzentriert.

Nun kann man zum Beispiel an entsprechender Stelle prüfen, ob es sich bei der auszugebenden Seite um „Home“ ( is_home() ), die „Frontpage“ ( is_front_page() ) oder eine andere beliebige Seite ( is_page($page ) handelt und wo es sinnvoll erscheint, den Aufruf der o.a. Funktionen dementsprechend unterbinden.

Natürlich sind alle Funktionen die WordPress bietet geeignet, um relevante Seiten / Kategorien Posts etc. zu bestimmen (Stichwort „is_“ in der Funktionsreferenz).

Ökonomische Eleganz

Es ist Unsinn, jedes Plugin anzufassen und dann im Quellcode lästig jeweils Bedingungen zu ergänzen, also ist der nächste Schritt mit der Frage verbunden: Wie lässt sich das sinnvoll lösen?! To be continued.

Konkatenieren und Komprimieren

In der Datei wp_includes script_loader bin ich auf folgende Funktionen gestoßen:

  • CONCATENATE_SCRIPTS
  • COMPRESS_SCRIPTS
  • COMPRESS_CSS

Tatsächlich lässt sich für diese in der wp-config.php eine entsprechende Konstante setzen (mit Wert true/false) und so das Ausliefern von CSS und Javaskript Dateien beeinflussen, ohne ein Plugin zu installieren.

 

VN:F [1.9.22_1171]
Rating: 4.3/5 (6 votes cast)
farbverlauf

Farben, Formen, Styles

CSS Gradient erstellen

Mit Colorzillas CSS Gradient Generator erstellst Du im Handumdrehen professionelle Farbverläufe.

Farbschemata

colr.org und Adobe Kuler helfen Dir bei der Suche eines geeigneten Farbschemas.

VN:F [1.9.22_1171]
Rating: 3.0/5 (4 votes cast)
toolbox

Tools rund um Website und Projektarbeit

Etwas unübersichtlich ist der Markt der Tools und Software Produkte für Erstellung, Pflege, Test und Anlayse von Website Projekten schon. Wer einmal seinen „Werkzeugkoffer“ gepackt hat, ist froh, sich damit um seine Projekt kümmern zu können.

Wer noch nach speziellen Lösungen oder einer guten Dokumentation sucht bekommt heute eine weitere Liste brauchbarer Werkzeuge und Seiten:

der WYSIWYG Web Builder

Ein wenig aus der Mode geraten, sind Webeditoren schon, aber für kleine Projekte, den Heimgebrauch oder einen Prototypen immer noch eine ernstzunehmende Alternative. Mit dem  WYSIWYG Web Builder lassen sich auch komplexere Projekte ohne HTML Kenntnisse erstellen und pflegen. Die Software ist nicht kostenlos, aber stabil und umfangreich.

ibm Maqetta

Maqetta lässt Dich Online HTML 5 Prototypen für User Interfaces erstellen. Alles was man braucht, ist ein Browser und einen Account – und schon kann der Designprozess losgehen.

Open Site Explorer

Open Site Explorer analysiert alle Backlinks einer Website. In der neuesten Version werden auch tweets, likes und shares berücksichtigt. Man kann Seiten vergleichen und erhält zahlreiche Information rund um seine Online Reputation. In der kostenlosen, unregistrierten Version ist das Abfragelimit stark eingeschränkt.

dochub

dochub könnte man als selfhtml 2.0 bezeichnen. In einem durchdachten, schnellen Interface lässt sich leicht und schnell durch die Dokumentation von css, html, php, javascript, dom, jquery und python navigieren und das benötigte Wissen nachschlagen. Nicht ganz so komfortabel, aber auf dem Weg zu einem Kompendium ist man bei web platform docs.

infogr.am

infogram lässt Dich Deine Präsentationen langweiliger Zahlenmaterialien und Statistiken in einem neuen frischen Design erstellen. Infografiken können auch einmal anders aussehen und für diejenigen, die gestalterisch kein Händchen haben, ist es ein echte Hilfe. Alternativ kann man auch einen Blick auf piktochart werfen.

mindmeister

mindmeister bietet Dir die Möglichkeit, Mindmaps online zu erstellen. Dabei legt man größten Wert darauf, gemeinsam an einer Mindmap arbeiten zu können. Ganz bequem lässt sich von mehreren Rechnern aus gemeinsam über eine Browsersitzung an einem Brainstorming arbeiten. Livechat, Zugriff von überall aus und ein sicherer Zugang machen echt Spaß.

prezi

Prezi bietet echte Online Präsentation auf so vielen Rechnern, wie man mag. Und das in einer neuen und modernen Art. Deine Päsentation steht – einfach weltweit Gäste einladen und es geht los.

Opera Dragonfly

Was dem Firefox sein Firebug, ist dem Opera sein Dragonfly – development und debugging im Browser und in diesem Fall halt im Opera.

resizeMyBrowser

Es geht zwar auch mit zahlreichen development addons, aber wenn man mal beim Kunden sitzt und schnell ein definiert großes Browserfenster benötigt hilft resizeMyBrowser.

google Closure Tools

Die google closure tools helfen Dir dabei, schnellen, sauberen und leichtgewichtigen Javaskript Code zu erstellen.

Zulu URL Risk Analyzer

Zulus URL Risk analyzer überprüft eine angegebene URL auf mögliche Sicherheitsrisiken.

 

 

 

VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)

Social Media Planner

Die Zahl der relevanten Plattformen, für die eine Online Kampagne lohnt ist auch bei nationaler Betrachtung groß. Der Social Media Planner hilft bei der Auswahl erfolgversprechender Ziele – oder ermittelt die Zielgruppe anhand diverser Kriterien.

Das Tool wurde 2010 mit dem Social Media Preis ausgezeichnet.

 

VN:F [1.9.22_1171]
Rating: 4.0/5 (2 votes cast)

Mal schnell die Komprimierung prüfen

Du willst mal schnell prüfen, welche Ressourcen einer Website gepackt ausgeliefert werden? Dann nimm doch gzipWTF und tu es 🙂 Alle ausgelieferten css und js Dateien werden angezeigt und der Komprimierungs-Status angezeigt.

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

Online Reputation

Die Reputation-Blogger zeigen in einer einfachen Grafik welche Plattformen und Faktoren das Standing der Seite bzw. einer Marke im Web beeinflussen können. Dabei ist die Auswahl der Faktoren relativ breit aufgestellt und nicht alleMarken / Produkte / Themen unterliegen den gleichen Einflüssen gleich stark. Trotzdem: Recht vollständige und hilfreiche Übersicht:

Einflussfaktoren auf die Online Reputation einer Marke

VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)

XRAY- der Röntgenblick für Deinen Browser

XRAY ist eine Erweiterung für moderne Desktop Browser. Klickst Du bei aktiviertem XRAY auf ein Website-Element, werden Dir alle seine Eigenschaften angezeigt.

xray

In einem modalen Dialog werden die Eigenschaften ausgeweisen, bei Bildern und anderen Elementen werden zudem einige Maßinformationen ausgegeben. Natürlich funktioniert das auch mit Firebug und anderen Browser Plugins, was mir aber gefällt, sind leichte Handhabung, übersichtliche und Element nahe Anzeige und die Tatsache, daß sich das modale Fenster automatisch optimal platziert.

VN:F [1.9.22_1171]
Rating: 4.0/5 (4 votes cast)