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

Block Semalt From Crawling Your Website

Add the following to your .htaccess file to help block Semalt / Semalt.com from crawling your website or blog.

## BLOCK SEMALT ##
RewriteEngine on
RewriteCond %{HTTP_REFERER} semalt\.com [NC]
RewriteCond %{HTTP_REFERER} ^(.*)\.semalt\.com [NC]
RewriteRule .* - [F]
## END BLOCK SEMALT ##

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

Example Compass config.rb File

The following is an example of a Sass Compass config.rb file.

preferred_syntax = :sass
http_path = '/'
css_dir = 'assets/stylesheets'
sass_dir = 'assets/sass'
images_dir = 'assets/images'
javascripts_dir = 'assets/javascripts'
relative_assets = true
line_comments = true
# output_style = :compressed

Remove Payment Method from Emails in WooCommerce

Add the following code snippet to your theme’s functions.php to remove the payment method from e-mails in WooCommerce.

function custom_woocommerce_get_order_item_totals( $totals ) {        
  unset( $totals['payment_method'] );         
  return $totals;       
}
add_filter( 'woocommerce_get_order_item_totals', 'custom_woocommerce_get_order_item_totals' );  

Hide Price Suffix When Product is Not Taxable in WooCommerce

Add the following to your theme’s functions.php file to hide the price suffix when the product is not taxable in WooCommerce.

function custom_woocommerce_get_price_suffix( $price_display_suffix, $product ) {         
  if ( ! $product->is_taxable() ) {         
    return '';        
  }       
  return $price_display_suffix;     
}
add_filter( 'woocommerce_get_price_suffix', 'custom_woocommerce_get_price_suffix', 10, 2 );