Front-end Checklist for Websites

Use the following checklist for pre-launch websites or websites that are already live. This checklist is for the front-end of your website or blog, and are based on Google’s Progressive Web App Checklist.

Fork on GitHub

Performance

General

  • HTTP/2 is being used
  • CDN is used for assets
  • CDN is used for static resources
  • Cookie-less domain used for static files
  • DNS prefetching is used
    • <link rel="preload" as="script">
    • <link rel="dns-prefetch">

Resources

  • JavaScript files combined into one file
  • JavaScript is minified
  • JavaScript is compressed
  • No inline JavaScript
  • CSS files combined into one file
  • CSS is minified
  • CSS is compressed
  • CSS has no use of @import
  • No inline CSS
  • HTML is minified
  • Static files are compressed with gzip or brotli
  • Static files are server-side pre-compressed
  • HTML is compressed with gzip or brotli
  • Usage of correct image formats
  • Usage of responsive images
  • Images are optimized
  • Image size served is only what is required
  • Image are cached in the browser
  • SVG files are minized
  • SVG files are used where possible
  • Only fonts that are used are loaded
  • Browser cache is used efficiently
  • ETags is not used
  • Expires, cache-control and max-age headers for static resources is set to 1 year
  • Asychronous or deferred loading of non-critical content
  • Tracking scripts loaded asynchronously

Measurements

Usually I measure the main pages of a project here.

  • Count of all files
  • Size of all files combined
  • Download time of the page
  • Google Page Speed analysis (Desktop, Mobile and Mobile UX; x of 100)
  • SpeedIndex

Rendering Performance

  • Intrinsic image sizes are specified in the markup
  • CSS is loaded in the document head
  • Scripts are loaded at the end of the document
  • Scripts are loaded with defer-attribute
  • Scripts are loaded in the document head after styles are loaded
  • Scrolling is possible with 60fps
  • No usage of document.write
  • CSS animation causing layout(reflow) is not heavily used

Device performance

  • CPU usage
  • Memory usage
  • GPU usage

Cross-Browser

  • Website is loading on all current desktop browsers (Safari, Firefox, Chrome, IE11, EDGE)
  • Website is loading on all current mobile browser (Chrome for Android, iOS Safari)
  • For Shops: Checkout is usable on all necessary devices and browsers
  • Viewport Meta Tag is used correctly
  • Usage of correct input types

SEO

  • Pages can be indexed
  • Mobile version of website is available
  • Sitemap is available
  • Structured-Data is used where possible
  • Headlines used
  • Headlines in correct order
  • Meta descriptions used
  • Meta keywords used
  • Meta title is filled correctly
  • Keywords used in headlines
  • Images use the alt-attribute
  • Links use a title-attribute
  • Links in navigation do not use title-attribute
  • No Duplicate Content
  • Usage of absolute URLs
  • Internal links point to HTTPS version of page
  • Redirects are done with 301
  • No 404-errors
  • No 500-errors
  • Canonical Tags are used if applicable
  • Ratio of code and content is around 25% for shop pages and 50% for content pages
  • Affiliate links have rel="nofollow"
  • Website uses HTTPS

Accessibility

  • Color Contrast is good (WCAG 2.0)
  • WAI-ARIA roles are used
  • Usage of accessible elements like nav, footer, aside
  • URLs are accessible
  • Keyboard accessibility is available
  • Correct input types are used

Security

  • HTTPS is used
  • There is no mixed content on the pages
  • External plugins and trackings get loaded via HTTPS
  • Robots.txt is in use
  • Cross-Site-Scripting is not possible
  • HSTS Header is set
  • Content-Security-Policy is set and only allows specific hosts and no inline scripts

More

  • Strict usage of domain with or without www
  • Correct language set in HTML tag
  • Charset is set
  • HTML is valid
  • 404-page is available
  • A special print style sheet is in place

Server

  • Correct language set by the server
  • Correct content types set by the server

Why is mobile speed important?

In our mobile-first world, we don’t just expect to have all the world’s information at our fingertips: we expect to get it the instant we’re looking for it.

Unfortunately, most mobile sites don’t live up to this expectation, despite major advancements in network speeds. Slow loading sites frustrate people with bad user experiences and cause publishers to lose revenue.

You can be the exception— with careful planning, you can optimize your site for mobile speed. The mobile web revenue calculator below will help you explore how optimizing the speed of your mobile website could help you increase your revenue.

Continue Reading >>

Supporting the Future of wp-cli

Matt Mullenweg, the founder of WordPress, just posted on WordPress.org that he will be supporting the future of wp-cli, a command-line interface. Matt Mullenweg states:

wp-cli is a command-line interface that is deployed and relied upon by almost every major user of WordPress out there.

The website of wp-cli.org, the code / GitHub, Twitter, and such are all coming in under the WordPress.org umbrella and there will be a CLI Make site with a P2 and all of the resources that used to be under wp-cli.org. There is already #cli on Slack and that will continue. (Will live at https://make.wordpress.org/cli.)

This will all happen the first part of January, and I’m looking to a full and exciting year for wp-cli.

Display Product Description in Categories

Add the following code snippet to your theme’s functions.php file if you want to display production descriptions in categories for WooCommerce.

// WooCommerce: Display product descriptions in categories
add_action( 'woocommerce_after_shop_loop_item_title', 'output_product_excerpt', 35 );
function output_product_excerpt() {
global $post;
echo $post->post_excerpt;
}

Web Accessibility Checklist

A quick checklist for web accessibility, which also acts as a great beginners’ guide.

Landmarks

<header role="banner">

Typically your website’s header.

<nav role="navigation">

Navigation of your website, which contains navigation links.

<main role="main">

The one area where content is primarily focused.

<article role="article">

One content item. An example is a single blog post in an index.

<aside role="complementary">

Separated content section that supports the main content.

<footer role="contentinfo">

Footer that contains information about the document such as website author, website ownership, copyright information, links to legal documents, etc…

<form role="search">

Give the end user the ability to search your document or website.

Language Attribute

<html lang="en">

Specify the language of the document.

Document Outline

Use semantic headings and structure

Links

Ensure links have a :focus state

Ensure links are recognizable, such as by underline and different colour then the text.

Images

State what the image is about using alt

JavaScript

Unobtrusive Javascript

Use unobtrusive Javascript.

No-JavaScript Alternatives

Provide an alternative for end users who don’t have JavaScript enabled or where JavaScript is unavailable.

Forms

Logical layout

Form controls have label

An example would be: <label for="name">Your Name:</label> <input id="name" type="text">.

Don’t use placeholder attributes instead of the label tag

Group related form elements

Group related form elements with fieldset.

Media (Audio and Video)

Provide text transcripts for audio

Subtitles for videos

Colour and Contrast

Test colour contrast

Colour Blindness Test

Deuteranopia

Protanopia

Tritanopia

Testing

Test using a screen reader

Test using only the keyboard

List of Awesome WordPress Resources

The following is a list of useful and helpful WordPress resources that are designed to help you create, build, grow and maintain your WordPress website. The vast majority of these WordPress resources are free but some maybe paid for.

General Info

Generic information and links to help you learn more about WordPress and get access to WordPress.

Websites

Downloads (.zip or .tar.gz)

Version control (stable)

These builds roll the latest commits.

  • SVN: svn checkout https://core.svn.wordpress.org/trunk/
  • Git: git clone git://core.git.wordpress.org/
  • GitHub: git clone https://github.com/WordPress/WordPress.git

Version control (develop)

These repositories contain source code, tools, and tests.

  • SVN: svn checkout https://develop.svn.wordpress.org/trunk/
  • Git: git clone git://develop.git.wordpress.org/
  • GitHub: git clone https://github.com/aaronjorbin/develop.wordpress.git