David Vierkötter am 01.04.2021 | Beitrags-ID: 4 0 Kommentare
Die Ladezeit einer Webseite ist vor allem im kommerziellen Bereich das A und O. Wie man die furchteinflößende Punktzahl bei z.b. "Google PageSpeed Insights" oder "GTmetrix" an die "90" bis "99" bekommt, erkläre ich folgend in einfach zu verstehenden Sätzen.
Zwischenwort: Die Punktzahl von "100" werden wir nicht erreichen können, denn aufgrund der DSGVO ist von der Nutzung von sogenannten "CDNs" (Content Delivery Networks) nur abzuraten. Das Laden von externen Dateien kann auch das unkontrollierte Laden von Cookies bedeuten.
Das Herausstechen der eigenen Webpräsenz kann auch unter anderem auf das Verzichten von Cookies generell erreicht werden. Keine Cookies benutzen zu müssen, bedeutet zugleich auch keinen notwendigen Cookie-Banner.
- Javascript-Dateien, wenn nicht anders möglich, unbedingt erst im Footer laden lassen. So wird die Zeit, die der Browser zum Starten des Rendern des DOMs benötig, stark reduziert.
- Die Größe der hochgeladenen Bilder reduzieren! Die meisten Aufrufe kommen von Mobilgeräten, welche keine 25MB großen RAW-Fotos benötigen. Eine Breite von ungefähr 1000 Pixel, bei einer Qualitätsstufe von 80%, ist völlig ausreichend. Zusätzlich sollte überwiegend nur noch das Dateiformat "webp" genutzt werden. Für z.b. Wordpress gibts es ausreichend Plugins, die diese Aufgabe übernehmen.
- Quellcode komprimieren! Entweder händisch per "Web-Minifier" oder vollautomatisch per Apache- und Nginx- Modul in Form von "mod_pagespeed". Bei dem Einsatz von "mod_pagespeed" muss aber gewisse Grundkenntnisse von Webservern vorausgesetzt werden.
- HTTP/2 und gzip auf dem Webserver aktivieren. Eine schnellere, effizientere und sicherere Datenübertragung sollte als Erklärung genügen.
- Unnötige CSS-Animationen (oder im schlimmeren Fall "jQuery-Animationen") vermeiden. Übergroße Animationen, wie z.b. animierte Hintergründe, sehen auf den ersten Blick vielleicht "fancy" aus, sorgen aber für eine gewisse Unruhe beim Besucher und quält durchgehend die CPU mit der dauerhaften Modifizierung des DOMs. Gerade für Mobilgeräte sorgt das fürs "Ruckeln".
Diese Schritte reichen im Regelfall aus um eine Punktzahl über 90 zu bekommen.
Bonus Tipps fürs "SEO" (Suchmaschinenoptimierung)
- Das Einhalten der korrekten Hierarchie für Überschriften ist sehr wichtig. (Keyword: H1, H2, H3).
- ALT-Tags für Bilder, sowie TITLE-Tags für Links sind unabdingbar.
- Blogbeiträge, Artikel oder sonstiges mit den dazugehörigen "ARTICLE, SECTION und HEADER"-Tags versehen.
- Das Einreichen des RSS-Feeds als Sitemap bei "Google Search Console" (vormals bekannt unter dem Namen "Webmaster Tools").
Bonus Tipps für Shop-Betreiber
- Verzichtet weitestgehend auf Javascript oder jQuery! Kein dynamisches Nachladen von Artikeln auf Seite des Besuchers, lasst das den Webserver machen! Fehlerhaftes Rendern oder Ausführen von Scripten beim Endgerät des Besuchers kostet euch Geld!
- Reduziert die benötigten "Klicks" die der Besucher braucht um einen Artikel zu kaufen! "1-Page-Checkout" etc.
- B2B Shops müssen nicht "Fancy" oder "Hipp" aussehen, sondern funktionieren! Einfach, effizient und möglichst ohne JS! In Industriebetrieben wird EDV-Seitig oft JS deaktiviert.
- Das "A und O" bei B2C Shops ist die Responsivität! Der Begriff "Mobile First" ist in dem Fall sehr zutreffend.
- Der aktuelle Design-Standard ist pures Gift für Webshops. Verzichtet auf übergroße Elemente, Schriftgrößen, animierte Elemente oder übermäßige Abstände in Containern (Padding)
- Weg mit der Slideshow! Die Dinger waren vor 10 Jahren vielleicht noch im "Trend", sind heute aber nur noch störend. Unmöglich sauber responsiv zu bekommen und bremst den Besucher nur beim konsumieren eures Inhalts.
- Cross-Selling macht immer Sinn! Legt der Kunde einen "Akku" in den Warenkorb, schlagt ihm das passende "Ladegerät" dazu vor! Verknüpft die Produkte per Hand, damit das ganze auch Sinn macht.
Persönliche Bitte an Wordpress-Seitenbetreiber
- Bitte unterlasst das willkürliche installieren von Plugins! Nur weil die Dinger meistens kostenlos sind, ist es nicht ratsam jede Kleinigkeit per Plugin umzusetzen. Jedes Plugin erhöht die Unsicherheit der gesamten Wordpress-Installation exponentiell!
- Pflichtplugins: Duplicator, Wordfence, Yoast SEO
- Täglich nach Updates prüfen! Wöchentlich per Duplicator ein Vollbackup eurer Wordpress-Installation machen.
Datenschutz und Compliance in der Webentwicklung
In der heutigen digitalen Landschaft sind Datenschutz und Compliance für Webentwickler von...
Die Rolle von Gamification-Elementen in der Verbesserung der Benutzererfahrung von Shops
Gamification bezieht sich auf die Integration von spielähnlichen Elementen wie Punktesystemen,...
Micro-Frontends: Eine Architektur für skalierbare Webprojekte
Micro-Frontends: Eine Architektur für skalierbare WebprojekteIn der schnelllebigen Welt der...
Die Ladezeit einer Webseite ist vor allem im kommerziellen Bereich das A und O. Wie man die...
0
Kommentare