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