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
   

   View Slide

2. Do you want to cry?
   

   View Slide

3. View Slide

4. Why quality assurance (QA) at all?
   

   View Slide

5. Prevent failures
   Why quality assurance (QA) at all?
   

   View Slide

6. Consistency across projects
   Why quality assurance (QA) at all?
   

   View Slide

7. Proactive work
   instead of reactive
   Why quality assurance (QA) at all?
   

   View Slide

8. How to check?
   

   View Slide

9. 1. The tool is better than you
   2. The tool is outdated
   Learning through reading reports
   

   View Slide

10. Do not chase the green check mark ✔
    Only real data is relevant
    Learning through reading source/specs
    

    View Slide

11. If you find a bug in an open source
    plugin/theme, report via
    forums/Github or website
    Learning through sharing/discusssion
    

    View Slide

12. Typical mistakes
    

    View Slide

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!)
    ● …
    

    View Slide

14. Where to look first?
    

    View Slide

15. Browser DevTools
    

    View Slide

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)?
    

    View Slide

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
    ● …
    

    View Slide

18. Where to look next?
    

    View Slide

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
    

    View Slide

20. ● Facebook Pixel helper
    ● Tag Assistant for Conversions
    ● Axe/WAVE Accessibility checking
    ● SEO Minion
    ● …
    Extensions in Browser - examples
    

    View Slide

21. More checks!
    

    View Slide

22. Online-Tools FTW!
    Performance
    Security
    Accessibility SEO
    

    View Slide

23. Online-Tools - the classics
    ● W3C Validator
    ● CSS Validator
    ● Feed Validator
    

    View Slide

24. Security
    

    View Slide

25. Security related checks
    ● Sucuri Sitecheck
    ● Security Headers
    ● Mozilla Observer
    ● Blacklist
    ● SSL-Check (Jitbit)
    ● etc.
    

    View Slide

26. Performance
    

    View Slide

27. Performance related checks
    ● GT Metrix
    ● Pagespeed
    ● Pingdom
    ● Webpagetest.org
    ● GZip-Check
    ● …
    

    View Slide

28. Accessibility
    

    View Slide

29. Performance related checks
    ● Axe
    ● WAVE
    ● Color Contrast checker
    

    View Slide

30. SEO
    

    View Slide

31. SEO related checks
    ● Linkcheck
    ● Mobile Friendly
    ● Structured Data/Schema Markup
    ● Keywords
    ● Heading Structure
    ● etc.
    

    View Slide

32. General
    

    View Slide

33. General checks
    ● Nibbler
    ● Powermapper
    ● Qualidator
    ● Lighthouse
    ● etc.
    

    View Slide

34. Manual Checks
    

    View Slide

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!)
    

    View Slide

36. Do it yourself …
    ● REST API open?
    ● XMLRPC open?
    ● Legal advice?
    ● Privacy policy?
    ● Cookies -> Cookie consent?
    More ideas: https://wpaudit.site/
    

    View Slide

37. But where do I find all those tools?
    https://torstenlandsiedel.de/wpmhh/
    

    View Slide

38. Thank you very much!
    Hit me up for follow-up questions:
    Slack // Twitter // WordPress.org // Github
    @zodiac1978
    

    View Slide