QA testing your website(s)
with free online tools
WordCamp Nederland 2022 WordPress Meetup Hamburg
Torsten Landsiedel
@zodiac1978
Slide 2
Slide 2 text
Do you want to cry?
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Why quality assurance (QA) at all?
Slide 5
Slide 5 text
Prevent failures
Why quality assurance (QA) at all?
Slide 6
Slide 6 text
Consistency across projects
Why quality assurance (QA) at all?
Slide 7
Slide 7 text
Proactive work
instead of reactive
Why quality assurance (QA) at all?
Slide 8
Slide 8 text
How to check?
Slide 9
Slide 9 text
1. The tool is better than you
2. The tool is outdated
Learning through reading reports
Slide 10
Slide 10 text
Do not chase the green check mark ✔
Only real data is relevant
Learning through reading source/specs
Slide 11
Slide 11 text
If you find a bug in an open source
plugin/theme, report via
forums/Github or website
Learning through sharing/discusssion
Slide 12
Slide 12 text
Typical mistakes
Slide 13
Slide 13 text
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!)
● …
Slide 14
Slide 14 text
Where to look first?
Slide 15
Slide 15 text
Browser DevTools
Slide 16
Slide 16 text
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)?
Slide 17
Slide 17 text
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
● …
Slide 18
Slide 18 text
Where to look next?
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
● Facebook Pixel helper
● Tag Assistant for Conversions
● Axe/WAVE Accessibility checking
● SEO Minion
● …
Extensions in Browser - examples
Slide 21
Slide 21 text
More checks!
Slide 22
Slide 22 text
Online-Tools FTW!
Performance
Security
Accessibility SEO