Slide 1
Slide 1 text
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
Slide 23
Slide 23 text
Online-Tools - the classics
● W3C Validator
● CSS Validator
● Feed Validator
Slide 24
Slide 24 text
Security
Slide 25
Slide 25 text
Security related checks
● Sucuri Sitecheck
● Security Headers
● Mozilla Observer
● Blacklist
● SSL-Check (Jitbit)
● etc.
Slide 26
Slide 26 text
Performance
Slide 27
Slide 27 text
Performance related checks
● GT Metrix
● Pagespeed
● Pingdom
● Webpagetest.org
● GZip-Check
● …
Slide 28
Slide 28 text
Accessibility
Slide 29
Slide 29 text
Performance related checks
● Axe
● WAVE
● Color Contrast checker
Slide 30
Slide 30 text
SEO
Slide 31
Slide 31 text
SEO related checks
● Linkcheck
● Mobile Friendly
● Structured Data/Schema Markup
● Keywords
● Heading Structure
● etc.
Slide 32
Slide 32 text
General
Slide 33
Slide 33 text
General checks
● Nibbler
● Powermapper
● Qualidator
● Lighthouse
● etc.
Slide 34
Slide 34 text
Manual Checks
Slide 35
Slide 35 text
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!)
Slide 36
Slide 36 text
Do it yourself …
● REST API open?
● XMLRPC open?
● Legal advice?
● Privacy policy?
● Cookies -> Cookie consent?
More ideas: https://wpaudit.site/
Slide 37
Slide 37 text
But where do I find all those tools?
https://torstenlandsiedel.de/wpmhh/
Slide 38
Slide 38 text
Thank you very much!
Hit me up for follow-up questions:
Slack // Twitter // WordPress.org // Github
@zodiac1978