$30 off During Our Annual Pro Sale. View Details »

Website-Check mit kostenlosen Online-Tools

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

Torsten Landsiedel

September 01, 2022
Tweet

More Decks by Torsten Landsiedel

Other Decks in Programming

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