Website-Check mit kostenlosen Online-Tools

Ich sehe so viele fehlerhafte Websites. Einfache Fehler, wie ein unveränderter Slug auf der Beispielseite oder ein unveränderter Untertitel „Just another WordPress website“. Und es geht weiter mit kaputten Links, fehlenden „Skip to content“-Links, fehlenden Farbkontrasten, etc. – Es gibt sehr viel zu tun und zu überprüfen. Aber hey, dafür haben wir ja Computer und Skriptsprachen! Es gibt viele kostenlose Tools und Hilfsmittel da draußen. Wir brauchen nur 1 Stunde, um eine Website direkt nach dem Start zu prüfen (die Korrektur kann auch länger dauern …). Qualitätssicherung ist wichtig, auch wenn du nur ein kleiner Freelancer bist.

Generalprobe für meinen Talk auf dem WordCamp Nederlands, gehalten auf dem WP Meetup Hamburg, August 2022

Transcript

1. QA testing your website(s) with free online tools WordCamp Nederland 2022 WordPress Meetup Hamburg Torsten Landsiedel @zodiac1978
2. Do you want to cry?
4. Why quality assurance (QA) at all?
5. Prevent failures Why quality assurance (QA) at all?
6. Consistency across projects Why quality assurance (QA) at all?
7. Proactive work instead of reactive Why quality assurance (QA) at all?
8. How to check?
9. 1. The tool is better than you 2. The tool is outdated Learning through reading reports
10. Do not chase the green check mark ✔ Only real data is relevant Learning through reading source/specs
11. If you find a bug in an open source plugin/theme, report via forums/Github or website Learning through sharing/discusssion
12. Typical mistakes
13. Typical mistakes - easy to avoid • “Just another WordPress website” as subtitle ◦ Fixed in Wordpress 6.1 • WordPress logo as favicon (since version 5.5) • Example page and/or “Hello world” post still there • Gravatar/comments open (default for posts!) • …
14. Where to look first?
15. Browser DevTools
16. Browser DevTools • Warnings and errors in the console? • Non 200 status codes in network tab? • Third party resources in network tab (GDPR)? • Non secure resources in network tab (GDPR)? • Ignored/invalid CSS in inspector tab? • Big images (sort by size in network tab)?
17. Source code of the HTML page • Markup failures in red? (Firefox) • Caching remarks? • Broken umlauts or special characters? • Handle for ressources helps to identify the calling plugin • …
18. Where to look next?
19. Extensions in Browser • Language dictionaries show typos in input fields • Bookmarklets help to debug, show problems or missing things • Add-ons bring whole new features to the browser
20. • Facebook Pixel helper • Tag Assistant for Conversions • Axe/WAVE Accessibility checking • SEO Minion • … Extensions in Browser - examples
21. More checks!
22. Online-Tools FTW! Performance Security Accessibility SEO
23. Online-Tools - the classics • W3C Validator • CSS Validator • Feed Validator
24. Security
25. Security related checks • Sucuri Sitecheck • Security Headers • Mozilla Observer • Blacklist • SSL-Check (Jitbit) • etc.
26. Performance
27. Performance related checks • GT Metrix • Pagespeed • Pingdom • Webpagetest.org • GZip-Check • …
28. Accessibility
29. Performance related checks • Axe • WAVE • Color Contrast checker
30. SEO
31. SEO related checks • Linkcheck • Mobile Friendly • Structured Data/Schema Markup • Keywords • Heading Structure • etc.
32. General
33. General checks • Nibbler • Powermapper • Qualidator • Lighthouse • etc.
34. Manual Checks
35. Do it yourself … • Skip to content link? • Favicon? • Links underlined? • Zoom not disabled on touch devices? • Search engines allowed? • Google Search Console connected? • Third-Party-requests? (GDPR!)
36. Do it yourself … • REST API open? • XMLRPC open? • Legal advice? • Privacy policy? • Cookies -> Cookie consent? More ideas: https://wpaudit.site/
37. But where do I find all those tools? https://torstenlandsiedel.de/wpmhh/
38. Thank you very much! Hit me up for follow-up questions: Slack // Twitter // WordPress.org // Github @zodiac1978