Web Development Checklist

This interactive checklist aims to give web developers a list of web development best practices in a single page that can be followed to ensure right progress towards a high quality website.

View

  • High
  • Medium
  • Low

Code

  • CSS ID's should be unique to a page

    medium

    Validate that If CSS IDs are used, they are unique to a page.

    The id attribute specifies its element’s unique identifier (ID). The value must be unique amongst all the IDs in the element’s home subtree and must contain at least one character. The value must not contain any space characters.

  • CSS style lint check

    high

    Validate that your CSS or SCSS files does not have lint errors

  • CSS files are loaded before javascript files

    high

    Validate that all CSS files are loaded before any JavaScript files in the HEAD.

  • CSS should be printer friendly

    low

    Validate that all CSS files are printer friendly so that it is readable when printed on paper for offline reading.

  • CSS validation

    high

    Validate your CSS code to identify possible issues in CSS Code with a standard CSS validator tool and correct errors.

  • Use CSS vendor prefixes

    medium

    Verify that CSS vendor prefixes are used and are generated accordingly with your browser support compatibility.

  • Avoid inline Javascript and CSS

    medium

    Avoid using inline Javascript and CSS mixed with your html code

  • HTML validation

    high

    Validate your HTML code to identify possible issues in HTML with a standard W3C validator tool.

  • Javascript static analysis

    high

    Validate your Javascript files does not have errors with static analysis tools

  • Broken links check

    high

    Check that there are no broken links on your websites page and there are that not any 404 error.

  • All CSS files should be non-blocking

    high

    Validate that all CSS files are non blocking.

  • Remove Render-Blocking JavaScript

    high

    Avoid and minimize the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed

  • Resource minification

    high

    Validate that all JavaScript,CSS and HTML files are minified correctly.

Performance

  • Preconnection of resources

    low

    DNS lookup, resolution, TCP handshake and TLS negotiation with services that will be needed soon is done in advance during idle time using preconnect.

  • Prefetch resources

    low

    Resources that will be needed soon (e.g. lazy loaded images) are requested in advance during idle time using prefetch.

  • Preloading resources

    low

    Resources needed in the current page (e.g. scripts placed at the end of <body>) in advance using preload.

  • Enable Resource Compression

    High

    Enable compression on all Resources for HTTP requests to improve performance.

  • Verify speed test for your webpages with online tools

    high

    Make sure that your pages are tested with google pagespeed tool and have a score of at least 90/100.

Usability

  • Setup all proper Error pages

    high

    Make sure that proper error pages are present for most common errors like 404, 4xx and 5xx.

  • Verify favicons

    medium

    Verify each favicon has been created and displays correctly.

  • Verify focus style support

    medium

    Verify that in cases where focus is disabled, it is replaced by visible state in CSS for ease in identification by user.

  • Headings usage

    medium

    Verify that all pages have an H1 which is not the title of the website also Headings should be used properly and in the right order (H1 to H6).

  • Input form labels

    medium

    Make sure that a label is associated with each input form element. In case a label can’t be displayed, use aria-label instead.

  • Verify keyboard navigation for all interactive elements

    medium

    Test your website using only your keyboard in a previsible order. All interactive elements are reachable and usable.

  • Provide layout images to support retina display.

    low

    Verify that you have provided layout images 2x or 3x in order to support retina display.

  • Use responsive web design

    high

    Make sure that the website is using responsive web design

  • Verify Page Titles

    high

    Verify that all page have proper and meaningful titles.

  • Verify Viewport declarations

    high

    Verify that the viewport is declared correctly.

Testing

  • Test page preview support on social media

    medium

    In case your website is getting shared on social platforms like facebook or twitter make sure that they are showing proper preview information.

  • Validate structured data on the pages

    high

    Validate that all pages using structured data are tested and are without errors. Structured data helps crawlers understand the content in the current page.

  • Test on all current desktop browsers

    high

    Verify that all pages were tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, EDGE…)

    In case they are not then show proper browser support warning to website users.

  • Test on all current mobile browsers

    high

    Verify that all pages were tested on all current mobile browsers (Native browsers, Chrome, Safari…)

    In case they are not then show proper browser support warning to website users.

  • Test website on all current OS and Platform versions

    high

    Verify that all pages were tested on all current and popularly used OS versions.

    In case they are not then show proper browser support warning to website users.

  • Test Responsive web design

    high

    Make sure that all pages were tested with the correct breakpoints which are needed to be supported.

Best Practices

  • Cookie size limit

    high

    If case you are using cookies make sure that each cookie doesn’t exceed 4KB and your domain name doesn’t have more than 20 cookies.

  • Prevent cross site scripting and forgery attacks

    high

    Add proper checks to handle XSS attacks and CSRF on your site.

  • Error logging and monitoring support to website

    medium

    Add support for Logging and monitoring of Javascript and server errors for easy debugging of issues identified on testing and production environments

  • Images should be optimized for performance

    high

    All images are optimized to be rendered in the browser quickly

    • Docs

    Optimizing Images doc by google

  • Images should have alternative text

    medium

    All have an alternative text which describe the image visually.

  • Images and scripts should be lazy loaded

    medium

    All Images, scripts, videos ,CSS and external resources should be lazy loaded to improve the response time of the current page.

  • Verify Meta Description

    high

    Verify that there are proper, unique and meaningful meta descriptions and doesn’t possess more than 150 characters.

  • verify robots.txt file

    high

    Verify that the robots.txt is correct and not blocking webpages.

  • RSS feeds

    low

    In case your website is has a blog or articles, make sure that an RSS link was provided.

  • validate and submit sitemap xml and html

    high

    Validate that a proper sitemap.xml exists and was submitted to Google Search Console

    Also Validate that a proper sitemap html exists and is accessible in the footer of your website

  • Webfonts should be optimized

    medium

    Make sure that Webfont should be in correct format and loaded correctly also it should not exceed a size limit of 2 MBs including all variants.

    WOFF, WOFF2 and TTF are supported by all modern browsers.