johnvincent.io Website Validation

Verify the Website Implementation

johnvincent.io Website Validation

by John Vincent


Posted on June 20, 2018



This document discusses validation issues for the www.johnvincent.io website.

It references the Website Validation Reference

Using the Website Validation Reference, the following were the issues found and their solutions.

Check for Vulnerabilities

Using Snyk

Snyk reported no issues.


Favicons

For details, see Using Favicons

Ran the Favicon checker for www.johnvincent.io

Android Chrome

Problem: Short name is required.

Problem: Background color is required

Problem: Icons could not be found.

Changed favicons/manifest.json to

{
	"short_name": "John Vincent",
	"name": "John Vincent Portfolio",
	"icons": [
		{
			"src": "\/favicons\/android-chrome-192x192.png",
			"sizes": "192x192",
			"type": "image\/png"
		},
		{
			"src": "\/favicons\/android-chrome-256x256.png",
			"sizes": "256x256",
			"type": "image\/png"
		}
	],
	"background_color": "#382838",
	"theme_color": "#ffffff",
	"orientation": "portrait",
	"display": "standalone"
}

Windows 8 and 10 Error

Cannot find https://www.johnvincent.io/resources/favicons/mstile-150x150.png

problem is caused by incorrect entry in favicons/browserconfig.xml

<square150x150logo src="/resources/favicons/mstile-150x150.png"/>

changed to

<square150x150logo src="/favicons/mstile-150x150.png"/>


Web App Manifest

For details, see About Web App Manifests

No additional issues found.


Meta tags for search engines

Changed

meta-title
meta-description
meta-keywords

for all pages.


Meta Tags for Google, Facebook and Twitter

For details, see Configuring Meta Tags

Facebook

Used Facebook Sharing Debugger to test https://www.johnvincent.io

Warning:

Missing Properties
The following required properties are missing: fb:app_id

See Facebook Application Id for details on how to configure the Facebook Application Id.

Added 2 new apps

johnvincent.local
http://localhost:4000

johnvincent.io
https://www.johnvincent.io

Tried to set johnvincent.io Status to live but got the error

Invalid Privacy Policy URL

You must provide a valid Privacy Policy URL in order take your app Live. Go to Basic Settings and make sure it is valid.

Added Privacy Policy and Terms of Services URLs to the website.

https://www.johnvincent.io/privacy-policy/
https://www.johnvincent.io/terms-of-service/

Now set Status to live works fine.

Added meta tag

<meta property="fb:app_id" content="xxxxx">

where content is the Facebook Application Id.

Retested using Facebook Sharing Debugger to test https://www.johnvincent.io

All tests passed.

Twitter

Used Twitter Validate meta tags to test https://www.johnvincent.io

All tests passed.


Varvy SEO Tool

Varvy SEO Tool

Enter each URL and test.

Clean up any issues found.

  • Accessibility
    • Language not declared ideally

Fix:

<html lang="en">

Varvy Speed Tool

Varvy Speed Tool

Enter each URL and test.

Clean up any issues found.

  • CSS not minimized
    • https://www.johnvincent.io/css/all.css

Edit file on server, file has 24 lines. Problem is caused by Scss files with comments at the top.

Fix:

Remove the header comments. Verify destination/css/all.css is only one line.
  • Browser caching
    • Browser caching not enabled for all resources
      • Not enabled for third party resources www.google-analytics.com

Could fix with Nginx Header Module. for details, see How to Implement Browser Caching with Nginx’s header Module on Ubuntu 16.04

#browser caching of static assets
    location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 7d;
}

I have decided not to implement at this time.

Varvy Mobile Tool

Varvy Mobile Tool

Enter each URL and test.

Clean up any issues found.

Browser caching issues

See above

Visible content not prioritized

Decided to leave this for the moment.


Lighthouse

To run Lighthouse

  • Open Chrome
  • Enter URL
  • Plugin Icon (top right)
    • Generate Report

Test www.johnvincent.io

There were many findings.

Performance Diagnostic

Text is invisible while the web fonts are loading

  • Decided to leave this alone.

Accessibility

Background and foreground colors do not have a sufficient contrast ratio.

The text color is #888 against a white background. Change it to #666.

This fixed the problem.

Progressive Web App

Manifest does not have short_name.

The problem is caused by a problem with favicons/manifest.json

To see the problem,

  • Developer Tools
  • Application
  • Application (top left menu)
    • Manifest

Changed favicons/manifest.json to

{
	"short_name": "John Vincent",
	"name": "John Vincent Portfolio",
	"icons": [
		{
			"src": "\/favicons\/android-chrome-192x192.png",
			"sizes": "192x192",
			"type": "image\/png"
		},
		{
			"src": "\/favicons\/android-chrome-256x256.png",
			"sizes": "256x256",
			"type": "image\/png"
		}
	],
	"background_color": "#382838",
	"theme_color": "#ffffff",
	"orientation": "portrait",
	"display": "standalone"
}

This fixed the problem.

Best Practices

Includes front-end JavaScript libraries with known security vulnerabilities.

Solution is to upgrade libraries.

Updated libraries to the latest which fixed the problem.

www.johnvincent.io

97: Performance
64: Progressive Web App
100: Accessibility
100: Best Practices
100: SEO


Test www.johnvincent.io/about

Same accessibility problem. Changed color to #666

Lazy loaded the image.

www.johnvincent.io/about

99: Performance
64: Progressive Web App
100: Accessibility
100: Best Practices
100: SEO


Test www.johnvincent.io/contact

Google Maps Problems

Many problems are listed. I chose to leave them alone.

Accessibility problem
Links do not have a discernible name

For example

<a href="https://www.johnvincent.io/feed.xml">

Solution is to use the title property.

Fixed all social icons using this solution.

Accessibility problem
Form elements do not have associated labels

For example

<input type="email" name="email" class="form-control" placeholder="Email Address">

To fix the problem

Programmatically associate labels to all form controls and ensure there are no duplicate labels. You can do so by using an implicit

I chose to use the aria-label

www.johnvincent.io/contact

80: Performance
64: Progressive Web App
95: Accessibility
88: Best Practices
100: SEO


Test www.johnvincent.io/portfolio

Performance
Defer offscreen images

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

Changed portfolio to lazy load all images.

Performance went from 80 to 96.


Properly size images

Ideally, your page should never serve images that are larger than the version that’s rendered on the user’s screen. Anything larger than that just results in wasted bytes and slows down page load time.

The technology icons are only needed at 60x60 pixels. Thus the images should be no larger than 60x60 pixels.

I resized some of the technology icons.

It would probably be better to have SVG files instead.

More details at Tools for Web Developers

Accessibility
Buttons do not have an accessible name

For example

<button role="button" class="owl-dot">

This is a third party library. Also the code with the buttons is not visible in this implementation. It is safe to ignore this warning.

Best Practices
Links to cross-origin destinations are unsafe

For example

<a href="https://www.taskmuncher.com" target="_blank">

To fix the problem

Add `rel="noopener"` or `rel="noreferrer"` to any external links to improve performance and prevent security vulnerabilities. 

More details at Tools for Web Developers

Changed to

<a href="https://www.taskmuncher.com" target="_blank" 
rel="noopener">

Also changed footer links.

www.johnvincent.io/portfolio

96: Performance
64: Progressive Web App
87: Accessibility
94: Best Practices
100: SEO


Test blog www.johnvincent.io/taskmuncher/deploy/overview/

Removed the TaskMuncher image as it worked very poorly on mobile. The viewport would require multiple images. As the image is referenced from markdown, I cannot style the image to lazy load or not load at all if mobile. The only sensible thing to do is remove the image.

If an application image is required, do not use markdown.

Accessibility

Background and foreground colors do not have a sufficient contrast ratio.

For example

<a href="/taskmuncher/deploy/overview/">

Color is #337ab7

Make that darker, to #1f6bad

Fixes the problem.

Best Practices

Uses document.write()

For example

/embed.js

This is caused by disqus.com which appears to be doing a lot of network chatting.

The only solution is to remove Disqus but I am not prepared to not use Disqus.

There is no fix.

www.johnvincent.io/taskmuncher/deploy/overview/

85: Performance
64: Progressive Web App
100: Accessibility
100: Best Practices
100: SEO

I run some other blog posts and they were basically the same as above.

No action required.


Test www.johnvincent.io/privacy-policy/

No action required.

www.johnvincent.io/privacy-policy/

97: Performance
64: Progressive Web App
100: Accessibility
100: Best Practices
100: SEO


Test www.johnvincent.io/terms-of-service/

No action required.

www.johnvincent.io/terms-of-service/

97: Performance
64: Progressive Web App
100: Accessibility
100: Best Practices
100: SEO


Test www.johnvincent.io/blog

Performance

Uses an excessive DOM size

Has significant main thread work

Implemented pagination, reduced DOM size without changing the functionality of the page.

www.johnvincent.io/blog

88: Performance
64: Progressive Web App
100: Accessibility
100: Best Practices
100: SEO


Google Page Speed Insights

Google PageSpeed Insights

  • Leverage browser caching

https://www.google-analytics.com/analytics.js

Decided to leave it alone.

Nibbler Tools

Free version of Nibbler is limited to 5 URLs but is still very powerful.

  • Marketing is extremely weak.
    • Unable to find social media icons

Moved social icons to the footer.

Added website and other social media links to Facebook. This improved the scores somewhat.

HTML Validator

W3C Markup Validation

No errors

CSS Validator

CSS Validator by W3C

RSS Feed Validator

RSS Feed Validator

Usability Checklist

Usability Checklist

Review all pages with this checklist.

Check Google Fonts

For details, see Google Fonts and Google Web Font Loader

Check HTML for ARIA

For details, see HTML ARIA

Check HTML for Microdata

For details, see HTML Microdata

Verify each URL with Google Structured Data Testing Tool

Review HTML5 Semantics

Useful HTML5 Semantics Guide

Review your HTML5 Semantics

Verify each page with Test HTML5 Semantics

Check your Libraries

Ensure you are using a cloud version.

Look up your libraries

  • https://cdnjs.com/

Review Application

  • set focus (.focus())
  • prevent double submits
  • ensure image has alt tag
  • review icons and images - can they be sprited?
  • Using SVG?