Die Optimierung einer Webseite auf Ladezeit wird in 90% aller Fälle bei der Erstellung von neuen Webprojekten nicht berücksichtigt. Als Web-Entwickler und Frontend-Designer bekomme ich oft halbfertige Projekte zur Überarbeitung oder für einen Relaunch von Agenturen, oder direkt vom Kunden.
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 der Ladezeiten 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 potenzielle Kunden werden. Nicht oft springen User bei einer sich träge aufbauenden Web-Seite ab und gehen zum nächsten Anbieter oder Suchergebnis.
Als Programmierer kenne ich die Kniffe & Tricks und kümmere mich um die technische Umsetzung auf die Ladegeschwindigkeit Ihrer Page. Hierfür konzentriere ich mich auf den Quellcode, die eingebundenen Medien, die Auszeichnung im HTML jeder Seite, der Performance vom Hosting oder dem CMS, der Bildgröße, CSS-Dateien und JavaScripts.
Die „Technische Suchmaschinen Optimierung“ für Webportale ist die Grundlage jeglicher Umsetzungen, eine Internetseite 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. Hier helfen einige Tools,die meine Arbeit unterstützen und die Optimierungen auf Geschwindigkeit 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 schneller 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, zu verkleinern. Dabei habe ich einige Teaserbilder nochmal mit Photoshop in einer kleineren JPG Komprimierung gespeichert oder mit GIF’s Farben reduziert und die ein oder andere Grafik in ein PNG24 umgewandelt, wenn sich die Dateigröße dadurch nicht vergrößert 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“.
Hier hilft mir das online Tool von tinypng.com, um aus JPG’s und PNG’s 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.
Als weiteres Tool kommt bei mir CodeKit 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 rausschmeißen. Das ist mir für meinen Workflow aber zu umständlich, um die online 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 xxxx–min.js und xxxx-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. Auch hier gibt es online Dienste, die genau dasselbe erledigen, aber das macht in meinem Workflow zeitlich keinen Sinn.
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 auskommentiert wurde. Einige Hoster benötigen an der Stelle noch eine weitere Angabe, da es sonst zu einer fehlerhaften Konfiguration vom Webserver kommt.
Wenn ich Sie bei einer Optimierung Ihrer Firmenseite oder online Shop unterstützen kann, dann melden Sie sich gerne bei mir.
So können Sie die Ladegeschwindigkeit Ihrer Seite messen!
Ein kostenfreies Tool Google PageSpeed Insights gib es von Google mit Sie die Ladezeit messen können.
Auch mit dem Dienst Google Analytics und Google Search Console können bei der Analyse von Problemen auf der Seiten helfen, die aufzudecken.
Mit WebPageTest.org können auch Test von unterschiedlichen Ländern und Stätten mit verschiedenen Browsern gemacht werden.
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 nicht immer, da zu viel Ballast vom Anbieter mit kommt. Individuell auf das Layout erstellte Webseiten, wie ich sie für Agenturen erstelle, sind meist ohne die unnötigen CSS und JS Anteile, die viele KB einsparen.
Mit dem neuen 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 finale Version draußen sind.
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.
Zu den Bildern habe ich geschrieben, wie etliche KBs eingespart werden können.
Jetzt's wird's technisch. Die .htaccess ist eine Steuerdatei für den Webserver, an der einige Einstellung zur Komprimierung für die Übertragung und dem Cache eingestellt werden können. Am meisten bringt die Aktivierung von GZIP, die alle Dateien in einer gezipten / reduzierten Variante überträgt. Dazu muss aber das CMS (z.B. Contao) die eingebundenen CSS / JS Dateien als .gz parallel zur normalen Variante schreiben.
Das ist der Teil in der .htaccess:
Damit werden die Dateien mit gzip komprimiert übertragen!
##
# Gzip compression
# @see https://github.com/h5bp/html5-boilerplate
##
<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>Für den Fall falls es am Server noch nicht aktiviert ist!
##
# If you cannot use mod_deflate, uncomment the following lines to load a
# compressed .gz version of the aggregated Contao JavaScript and CSS files.
##
AddEncoding gzip .gz
<FilesMatch "\.js\.gz$">
AddType "application/javascript" .gz
</FilesMatch>
<FilesMatch "\.css\.gz$">
AddType "text/css" .gz
</FilesMatch>
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]
##