Die Optimierung einer Webseite auf Ladezeit wird in den meisten Fällen bei der Erstellung einer neuen Webseite leider nicht berücksichtigt. Als Webentwickler und Frontend-Designer bekomme ich oft Projekte zur Überarbeitung um die Performance zu optimieren.
Die meisten Seiten wurden leider nie auf Geschwindigkeit oder für grundlegende notwendige SEO-Maßnahmen angepasst. Eine blitzschnelle Web-Seite ist mittlerweile ein Rankingkriterium bei Suchdiensten und wird von Ihren Usern begrüßt.
Welches ungenutzte Potential steckt in Ihrer Webseite?
Es gibt nichts nervigeres als eine langsam ladende Seite, die in der Handhabung nicht schnell ist. Vor allem über langsame Internetverbindungen unterwegs am Smartphone kann es zu einer Zerreißprobe für zukünftige Kunden werden. Nicht oft springen User bei einer sich träge aufbauenden Internetseite ab und gehen zum nächsten Anbieter oder Suchergebnis.
Als Programmierer kenne ich die Kniffe & Tricks und kümmere mich um die technische Umsetzung die Ladegeschwindigkeit Ihrer Seite zu optimieren. Hierfür konzentriere ich mich auf den semantischen Quellcode, die eingebundenen Medien, die Auszeichnung im HTML-DOM jeder Seite, der Performance vom Hosting, Einstellungen am CMS, der Bildgröße im richtigen Format und zu guter letzt die CSS / JavaScript Dateien.
Die „Technische Suchmaschinen Optimierung“ für Internetseiten ist die Grundlage jeglicher Programmierung die Ladezeiten auf Geschwindigkeit und Speed anzupassen.
Mit meinem Partnernetzwerk kümmern wir uns nach der Ladezeit-Optimierung, um die Keywords, interne Links und die Inhalte. Ich optimiere Ihre Seite nach W3C-Standards. Erst durch eine optimierte Internetpräsenz und der Semantik werden gute Platzierungen in den Suchdiensten gewährleistet. Hierbei nutze ich einige Online-Tools, die meine Arbeit unterstützen und die Optimierungen dokumentieren.
Performance und Page-Speed für Ihre Webseite vom Profi.
WWW - WORLD WIDE WAIT mit langen Ladezeiten muss nicht sein!
Auf Geschwindigkeit getrimmt!
Warum sollte man seine Seite auf Ladezeiten und Performance optimieren?
Das Thema „Auf Ladezeiten optimieren“ wird immer wichtiger, seitdem Google Webseiten bei der mobilen Suche besser rankt, die responsiv umgesetzt sind und schnell laden.
Ich zeige Ihnen anhand meines Webportals Snowboarden.de, wie ich vorgegangen bin, um den Magazinbereich der Seite auf Performance zu trimmen.
Als erstes habe ich angefangen, alle relevanten Grafiken, die immer wieder im Seitenlayout vorkommen verkleinert. Dabei habe ich einige Teaserbilder nochmal mit Photoshop in einer kleineren JPG Komprimierung gespeichert oder die Farben reduziert. Die ein oder andere Grafik habe ich in das moderne WebP umgewandelt, wodurch sich die Dateigröße durchaus verkleinert hat.
Das alleine reicht aber noch nicht, um die Dateigröße auf eine angenehme Größe zu reduzieren. Leider bietet Photoshop nativ keine gute Komprimierung für die Option „Für Web speichern“ an.
Hier hilft mir das online Tool von tinypng.com, um aus JPG und PNG noch mal einige KB’s raus zu holen. Es gibt zwar noch weitere Tools für WIN oder MAC, die die Arbeit lokal am Rechner abnehmen, nur leider ist das Ergebnis nicht so gut wie bei Tinypng. Am MAC nutze ich die APP ImageOptim von imageoptim.com mit der sich schon recht gute Ergebnisse für die Komprimierung der Bilder erzielen lassen. Mittlerweile exportiere ich alle Grafiken im WebP Format, das spart Ladezeiten und die Qualität bleibt erhalten.
Als weiteres Tool wie CodeKit kommt bei mir je nach Projekt zum Einsatz, mit dem ich die JavaScript und CSS Dateien verkleinere. Auch hier gibt es online Dienste die den gleichen Zweck erfüllen, die Dateien zu verkleinern und unnötige Leerzeichen und Kommentare zu entnehmen. Das ist mir für meinen Workflow aber zu umständlich, um die Komprimierungen vorzunehmen.
Was ist der Vorteil bei der Optimierung mit den Tools?
CodeKit habe ich in meinen Workflow für die Erstellung und Bearbeitung von CSS und JavaScript eingebunden. In den Einstellungen lasse ich für die CSS / JavaScript Dateien jeweils eine min.js und min.css generieren. Nur die komprimierte und auf Ladezeit optimierte Datei wird im Webprojekt auf der Live Seite eingebunden. Lokal arbeite ich mit der unkomprimierten Variante, um mich dort besser zurecht zu finden. Alternativ können über Plugins in PhpStorm, Gulp Scripts die Komprimierungen erfolgen.
So können unnötige Ladezeiten vermieden werden
Dazu habe ich in meinem Gipfelbuch schon eine kurze Anleitung geschrieben wie „CSS und JavaScript Dateien in Contao“ eingebunden werden können, um weniger Ballast zu erzeugen und somit eine PageSpeed Optimierung der Seite zu erlangen.
In den Einstellungen von Contao gibt es unter „Einstellungen“ die Optionen Markup komprimieren und Skripte komprimieren. Die Option Skripte komprimieren kann aber nur sinnvoll funktionieren, wenn auch die Konfiguration an der .htaccess eingetragen ist. Eine Umstellung auf https mit http2 komprimiert zusätzlich die Übertragung der Daten.
So können Sie die Ladegeschwindigkeit Ihrer Seite messen!
Ein kostenfreies Tool Google PageSpeed Insights gib es von Google mit der Sie die Ladezeit selber messen können.
Die Dienste Google Analytics und Google Search Console können bei der Analyse von Problemen auf der Seiten helfen die aufzudecken.
Mit WebPageTest.org können Sie Tests von unterschiedlichen Ländern und Stätten mit verschiedenen Browsern simulieren, um einen Einblick zu bekommen, wie performant die Anbindung vom Hosting ist.
Das sind weiter Stellschrauben für eine schnelle Webseite!
Ideal wäre eine Seite, die nur eine CSS und eine JavaScript Datei an den Browser sendet. Alle inline CSS und JS Codes sollten in die Dateien verfrachtet werden. Das geht mit fertigen Themes / Templates leider nicht, da die Anbieter zu viel Ballast mit einbinden. Individuell auf das Layout erstellte Webseiten, wie ich sie für Agenturen erstelle, werden ohne die unnötigen CSS und JS Anteile entwickelt, die Seiten schneller laden und viele KB einsparen.
Mit dem HTTP/2 Protokoll ist es zwar nicht mehr notwendig alle CSS und JS Dateien zusammen zu legen, aber schaden kann es nicht. Für die Projekte bei dem der Kunde Wert auf eine schnelle WebPage Wert legt, achte ich darauf, das unnötige Kommentare oder Leerzeichen mit CodeKit für die produktive Internetseite entnommen werden.
Die Einbindung von der CSS-Datei wird in meinen Projekten im Header aufgerufen und die JavaScript-Datei vor den Ende des Bodys. Damit ist gewährleistet, das erst das Layout gerendert wird und nicht durch die Scripte die Seite am laden gehindert wird.
Ladezeiten Optimierung anfragen
Gerne kann ich mir Ihre Webseite auf Ladezeiten ansehen und das Optimierungspotential aufzeigen.
Füllen Sie mir bitte das folgende Formular aus und erhalten von mir in Kürze ihren persönlichen Ladezeiten-Check.