Webfonts/Schriftarten asynchron laden

Webfonts werden im Normalfall direkt in dem HEAD-Bereich des Quellcodes einer Webseite geladen. Der Code dafür sieht in etwa wie folgt aus: <link rel='stylesheet' id='redux-google-fonts-mom_options-css' href='http://fonts.googleapis.com/css?family=Exo+2' type='text/css' media='all'/> In diesem Beispiel wird die Schriftart Exo 2 als Webfont geladen. Webfonts asynchron laden Google selbst bietet Euch einen Web Font Loader …

Komplett lesen »

Webhoster oder Webhosting-Paket wechseln

Ist Eure Webseite zu langsam, obwohl Ihr schon fast alle technischen Möglichkeiten getestet und ausgeschöpft habt? Wenn die eigene Webseite immer noch gefühlt zu langsam ist, solltet Ihr eventuell einmal über den Wechsel des Webhosters oder zu mindestens über eine Änderung des Webhosting-Paketes nachdenken. Einige werden jetzt denken: „Oje, bloß …

Komplett lesen »

TinyPNG.com

Das online Tool TinyPNG.com ist ein sehr hilfreiches Werkzeug zur Komprimierung von JPG und PNG Bildern. Damit eignet sich TinyPNG.com hervorragend zur Komprimierung von Bildern die später auf einer Webseite, z.B. in einem Onlineshop eingebunden werden sollen. Der große Vorteil von TinyPNG.com ist die ausgefeilte Komprimierungstechnik für die JPG und …

Komplett lesen »

Plugins und Addons als Performance-Killer

Viele Content Management Systeme wie etwa WordPress sind aufgrund der Vielzahl an Plugins Addons und Erweiterungen sehr beliebt, denn damit lassen sich viele benötigte Funktionen realisieren. Doch genau diese Plugins können bei der Performance-Optimierung hinderlich sein, sie können die Ladezeit beträchtlich erhöhen. Dabei ist es absolut egal ob Ihr ein …

Komplett lesen »

Ad-Codes minimieren

In vielen Fällen sind Ad-Codes, Werbung, die Ursache für hohe Ladezeiten. Manche Anbieter lassen jede Art von Werbebanner über ihre Ad-Server laufen, ohne auf Größen und Komprimierungsmöglichkeiten zu achten. Aus diesem Grund kann sich durch den Einsatz der „falschen“ Ad-Codes die Ladezeit der Webseite extrem erhöhen. Testet daher unbedingt die …

Komplett lesen »

CSS mit PHP und GZIP komprimieren

CSS Dateien spielen bei vielen Webseiten eine entscheidende Rolle und Größe bei der Ladezeit. Da viele CSS Dateien die Größe von 10 kB überschreiten, lohnt es sich nach einer Variante der Komprimierung für diese CSS Dateien zu suchen. Mittels PHP und GZIP lässt sich schnell eine effektive Komprimierung und damit …

Komplett lesen »

GZIP Kompression / GZIP Komprimierung

Da die meisten modernen Browser eine GZIP Komprimierung unterstützen, ist es ratsam auch als Webmaster auf diese Technik zu setzen. Der klare Vorteil der GZIP Komprimierung ist eine Reduzierung Dateien und damit einhergehend der Ladezeiten der Webseiten. Für den Einsatz der GZIP Kompression auf der eigenen Webseite gibt es einige …

Komplett lesen »

CSS Dateien mit PHP zusammenfassen

Wird ein Projekt größer und besteht aus verschiedenen Designelementen, dann kann es schnell sehr unübersichtlich für den Webmaster und Designer werden, falls alle CSS-Klassen in einer CSS-Datei zusammengeführt werden. Dann ist es übersichtlicher mehrere CSS-Dateien zu erstellen und diese in dem HEAD-Bereich des Quellcodes nacheinander einzubinden. Doch was für die …

Komplett lesen »

@import-Funktion in CSS-Dateien vermeiden

Immer wieder setzen einige Webdesigner die @import-Funktion innerhalb der CSS-Dateien ein, um das Design aufzubauen. Damit versucht man den HTML-Quellcode der Seite möglichst kurz zu halten und nur eine CSS-Datei mittels link rel=’stylesheet‘ einzubinden. Weitere CSS-Dateien werden dann durch die @import-Funktion in die Start-CSS-Datei aufgerufen. Lösungsansätze des @import-Problems Um diesen …

Komplett lesen »

Templates und Datenbankabfragen

Wenn ein fortschrittliches CMS (Content Management System) auf einem Projekt eingesetzt wird, dann lassen sich auch hier einige Ansatzpunkte für eine zusätzliche Optimierung finden. So verwenden viele CMS dynamische Anweisungen, die dann in dem Template-Code ausgegeben werden. Solche dynamische Anweisungen können Titel, Ladezeitangaben (im Footer), Copyright-Angaben, etc. sein. Diese werden …

Komplett lesen »

Webfonts mit GZIP optimieren

Wer sein Webdesign mit einer schönen Schriftart von anderen abheben möchte, der setzt auf Webfonts. Diese lassen sich auf verschiedene Arten in das Design einbinden. Sie bieten den Vorteil das in allen Browsern die gleiche Schriftart angezeigt wird, auch ohne das diese auf den PC´s der Besucher installiert sind. Damit …

Komplett lesen »

Sichtbare Inhalte priorisieren

Das google PageSpeed Insights Tool bringt folgende Meldung zu diesem Punkt: „Für Ihre Seite sind zusätzliche Netzwerk-Roundtrips erforderlich, um die ohne Scrollen sichtbaren Inhalte („above the fold“-Inhalte) darstellen zu können. Reduzieren Sie die zur Darstellung von „above the fold“-Inhalten erforderliche HTML-Menge, um eine optimale Leistung zu erzielen.“ Gemeint ist damit, …

Komplett lesen »

Asynchrones Laden (CSS und JS Scripte)

Seit der Einführung von google PageSpeed Insights wird bei vielen Webseiten die Meldung “JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen” angezeigt. Mit dem Tipp, das oder die betreffenden Scripte asynchrone laden zu lassen. Oftmals ist die von dem PageSpeed Insights-Tool leichter …

Komplett lesen »

JavaScript später parsen

Um den Punkt JavaScript später parsen lösen zu können, gibt es verschiedene Herangehensweisen. Dabei muss jeder Webmaster für sich selbst entscheiden ob er diesen Punkt überhaupt angeht, oder aber alles lieber so beibehält, denn es kann sehr schnell zu technischen Problemen kommen. Sichert daher vor eine Änderung alle wichtigen Dateien! …

Komplett lesen »

Anforderungsgröße minimieren

Der Punkt Anforderungsgröße minimieren kommt meistens bei Werbe-URLs von Affiliate-Netzwerken, wie etwa Affili.net in der PageSpeed-Analyse vor. Durch die Einbindung eines solchen Werbecodes, z.B. eines Werbebanners, wird nicht nur der Banner selbst geladen, sondern auch ein Cookie, eine Verweis-URL, etc. Somit werden mehrere Elemente gleichzeitig geladen, was wiederum zu einer …

Komplett lesen »