Bei der Entwicklung, Fehlerbehebung und Untersuchung von Websites stehen uns in der Webabteilung zahlreiche Tools zur Verfügung, welche unsere Arbeit erleichtern. So können wir unsere erstellten Seiten auf Herz und Nieren prüfen und stetig optimieren. Im nachfolgenden Beitrag wollen wir Ihnen unsere Favoriten der Websitetools vorstellen.
Tools, die Sie ganz leicht selbst anwenden können:
1. Entwicklerwerkzeuge
Die meisten gängigen Browser stellen Werkzeuge zur Verfügung, um die geöffnete Website zu untersuchen. So lassen sich Websitestruktur aufschlüsseln, JavaScript ausführen oder Cookies auf der Seite anzeigen. Das waren noch längst nicht alle Funktionen der sogenannten DevTools – aber die gängigsten. Es existieren noch unzählige weitere. Die meistgenutzten Entwicklertools in den Browsern heißen “Inspektor” (Firefox) und “Elements” (Chrome). Mit einem Rechtsklick auf einer beliebigen Stelle der aktuell geöffneten Seite und der Auswahl des erscheinenden Punktes “Untersuchen” oder “Element untersuchen” lassen sich diese Entwicklertools öffnen.
Zur Simulation und Überprüfung der verschiedenen Bildschirmgrößen an Smartphones und Tablets gibt es unzählige eigene Tools. Natürlich lässt sich einfach das Browserfenster verkleinern, um die responsive Ansicht kurz zu überprüfen. Dies sollte aber wirklich nur ein schneller Check sein, denn diese Art ist nicht immer zu 100% zuverlässig. Um das responsive Design ordentlich zu überprüfen, möchten wir Ihnen ein spezielles Tool vorstellen: Ish.
Dabei handelt es sich um ein Tool, das von dem bekannten Entwickler Brad Frost kreiert wurde. In der am Browserfenster angedockten Leiste lässt sich an der linken Seite die URL einer Website einfügen. Auf der rechten Seite der Leiste lassen sich Pixelbreite und Höhe der Vorschau sowie andere hilfreiche Optionen einstellen. So generiert z. B. ein Klick auf „M“ verschiedene Breiten, die sich in einem festgelegten Bereich befinden. Da die Fensterbreite für eine Website nie wirklich vorhersehbar ist, lassen sich so am besten aussagekräftige Entscheidungen bezüglich des Layouts treffen.
2. Google Analytics und Matomo
Google Analytics und Matomo sind Tools, die es erlauben, verschiedene Zugriffszahlen einer Website zu verfolgen. So können Inhalte über einen bestimmten Zeitraum überwacht werden.
Es lassen sich beliebte Inhalte ermitteln und die Seiten nach Suchprinzipien optimieren. Google Analytics lässt sich, wenn man einen Google-Account besitzt, extrem schnell in die Website integrieren und zeigt massenhaft Nutzerdaten. Zu diesen Daten gehören z. B. Besucheranzahlen, eingegebene Keywords in der Suchmaschinen, Ladezeiten, aufgerufene Seiten, Geräteinfos (zu Betriebssystem, Browser, Browserversion), Aufenthaltsdauer auf der Seite und Absprungraten.
Datenschutzkonformer ist hier Matomo. Es bietet zwar nicht so viele umfangreiche Daten und ist etwas aufwendiger zu integrieren, aber dafür landen keine Daten auf Drittservern im Ausland, sondern auf den eigenen Servern.
Bei jeden Analysetool sind datenschutzrechtliche Dinge zu beachten. Bei Google mehr – bei Matomo weniger. Diese müssen auf jeden Fall im Datenschutz der Website Erwähnung finden.
3. SEO – Suchmaschinenoptimierung
Für eine SEO-Analyse empfehlen wir das Tool Seobility. Fügen Sie einfach die zu prüfende URL in das dafür vorgesehene Feld ein- der Check zeigt die OnPage Optimierungen dieser einen URL bzw. Seite. Seobility offenbart dann, welche Punkte noch verbessert werden können, damit sich das SEO Ihrer Website verbessert. Für umfangreiche OnPage und OffPage sowie Keyword-Analysen lohnt sich die Anschaffung eines eigenen Accounts.
Häufig lassen sich nicht alle Tipps des Tools ausführen, da manche technische Lösungen schlichtweg nötig sind, damit die Seite einwandfrei funktioniert. Außerdem sollte man sich bewusste sein, dass die “100%” nicht ohne weitere Kosten und intensive Mühen zu erreichen sind.
4. Google Pagespeed
Über Google Pagespeed lässt sich die Geschwindigkeit einer Website und weitere Möglichkeiten zur Optimierung herausfinden. Allerdings ist Pagespeed seit letztem Jahr mit Vorsicht zu genießen, da es sich nun mehr nach Apps als auf traditionelle Websites ausrichtet. Auch hier lässt sich einfach die URL der entsprechenden Seite einfügen, um sie zu analysieren.
Ein kleiner Geheimtipp: Google hat neben Pagespeed noch ein weiteres Testtool. Dieses heißt „Web.dev„. Hier werden neben der Performance weitere Aspekte wie Accessibility, Best Practices und SEO (OnPage) getestet.
Tools, die wir gerne bei der Erstellung einer Website verwenden:
1. Visual Studio Code
Visual Studio Code ist ein offener, von Microsoft entwickelter Code-Editor. Hier wird der Code der Website geschrieben. Der Editor lässt sich über Erweiterungen individuell anpassen und bei Bedarf um viele zusätzliche Funktionen ausbauen.
2. Farb-Tools
Über den Farb-Kontrast-Checker lassen sich Farbkontraste auf Lesbarkeit untersuchen. Dies ist besonders wichtig, um Farbschemen zu finden, die auch Nutzer mit Farbsichtigkeitsproblemen gut erkennen können. Die Vordergrundfarbe und Hintergrundfarbe lässt sich im Hex-Format vergleichen.
3. Security
- Über Webbkoll lassen sich Implementierungen von Sicherheitsprotokollen, Server-Einstellungen, HTTP-Header, externe Cookies und viele weitere wichtige Einstellungen der Seite und des Servers abfragen. Dazu muss man nur die URL der zu prüfenden Seite eingeben.
- Sucuri scannt Ihre Website und den Server auf Sicherheitslücken. So wird beispielsweise empfohlen, die PHP-Version des Servers nicht nach außen dringen zu lassen, da sich so bei veralteten Versionen Sicherheitslücken schnell in Erfahrung bringen lassen. Auch in diesem Fall kann die Seite über die URL gecheckt werden.
4. CSS-Stats
CSS-Stats zeigt Ihnen, wie viele Style-Regeln für Ihre Website definiert sind. Je weniger, desto besser. Der Check erfolgt wieder über die Eingabe der URL.
Browsererweiterungen, die wir gerne einsetzen:
1. “Full Page Screen Capture” oder “Easy Screenshots”
Über diese Erweiterung lassen sich schnell und einfach Screenshots der ganzen Seite erstellen und in verschiedenen Formaten exportieren.
2. “Empty Cache” oder “Clear Cache”
Auf diese Weise löschen Sie den Cache der Seite mit nur einem Klick.
Tipp: Regelmäßiges Löschen des Caches nicht vergessen. Änderungen oder neue Elemente auf der Website werden oft zu 90% wegen des eigenen PageCaches nicht oder falsch angezeigt.
3. “WhatFont”
Damit lassen sich die Schriftarten der Seite ganz einfach und schnell herauslesen.
4. “Colorpicker”
Hiermit lässt sich der HEX-Wert der jeweiligen gewünschten Farbe ohne großen Aufwand kopieren. Dieses Tool funktioniert genau wie die Pipette bei den bekannten Design-Programmen wie Photoshop, Illustrator etc..
5. “Quick JavaScript Switcher“
Schalten Sie doch einfach mal ab und sehen Sie sich an, wie Ihre Website ohne JavaScript aussieht.
6. “Wappalyzer”
Der Wappalyer identifiziert viele eingesetzte Technologien auf einer Website. So lassen sich das verwendete CMS, die PHP-Version und viele andere Serverspezifikationen schnell einsehen.
Tools, wie Sand am Meer
Wie Sie nach Lesen dieses Beitrags sicherlich schon festgestellt haben, gibt es jede Menge Tools, die einem Entwickler bei der Optimierung einer Website unter die Arme greifen. Und das waren natürlich noch nicht alle. Wer im Netz nach hilfreichen Tools sucht, der wird auf eine große Masse stoßen. Mit unseren Vorschlägen konnten wir Ihnen hoffentlich ein gutes Starterset mit an die Hand geben – Nun heißt es ausprobieren und seine Favoriten finden!
Bildnachweis:
Bild-Nummer: 268829000 von fgnopporn, von rh2010, von jdwfoto – stock.adobe.com
