Release Checklist

Back to Documentation Intro Contents

info

See Release for more information on the release phase of the SDLC.

Checklist

Use this checklist tool for each site released - frontendchecklist.io

and Meta Data

• This will depend on the project and its requirements and if it needs to be SEO friendly (private projects may not need this)
• Set up in the index.html file
  • metatags.io
  • The Power of Metadata in Next.js 13 (Part 3): Optimize Your Website's SEO NOW!
  • The Power of Metadata in Next.js 13 (Part 2): Optimize Your Website's SEO NOW!
  • Theme colour HTML tag

Favicon

• Create a favicon for the site and for all applications that may access the site
  • realfavicongenerator.net

    Note: you can create a subfolder at the root called "favicon" and then update the head links to refer to this folder to keep the project tidy

User Experience

• 12 Frontend Micro-Interactions That Users Secretly Judge

• Create a 404 page for catching routing errors
  • error404.fun
  • For a Next.js, use the following steps and code (example on Big Lynn site);
    • Add a new page to the pages directory
    • Add the following import code: import { useRouter } from "next/router";
    • Add the following code: const router = useRouter(); within the page component
    • Add the following onClick code to a button: onClick={() => router.back()} // Go back to the last visited page
• Consider if additional 404 pages are required for other errors, such as 500, 503, etc.

Page Speed Testing

• Remove unused packages in package.json - You can check those items by running npx depcheck.
• Reduce your image sizes
  • 9 Image optimisation techniques
  • Convert all of your jpg and png files to smaller image types such as webp
  • • Lazy load images and videos - add to the image and iframe tags loading="lazy"
• Optimise your data speed
  • JSON is incredibly slow, here's what's faster
  • How to Make Your JavaScript Code Blazingly Fast With This One Simple Trick! 🔥
• Optimise the site for speed
  • Remove dependencies that are not required - npx depcheck
  • If using React, then visit Reacthandbook.dev
    • See ways to optimize loadtimes - Link
    • See ways to optimize runtimes - Link
  • Next.js App speed increases
  • Next.js Caching Animation
  • Low-Hanging Web Performance Fruits: A Cheat Sheet
    • Optimize Your Assets
    • Cache Your Assets
    • Split Your Code
    • Optimize Your Bundle
    • Manage Third-Party Scripts
  • Everything you need to know about Web Performance (in 5 Minutes)
  • Senior Engineering Strategies for Advanced React and TypeScript
    • Specifically look at the Performance section for the LazyLoadedComponent
  • Clean up CSS
    • Unused CSS
    • Sniper-CSS, avoid unused styles
• Check the speed of the app and improve where possible
  • Use WebPageTest to test the speed of the site
    • Mark the tick box to Audit using Lighthouse
    • Review the results and make improvements based on the potential opportunities the tool suggests
  • Reduce tasks over 50ms
  • Other Speed Testing Tools
    • Use Chrome DevTools LightHouse tool
    • GTmetrix

Console Logs

• Delete all console.logs - It's important to remove console.log in production code to prevent sensitive information leaks and enhance performance
• Investigate and fix all console.errors and console.warning - It's important to address console errors in production code to maintain a smooth and error-free user experiences.
• Framework links
  • Next.js - Removing Next JS Console Logs

Framework Specific Checks

• If using Next.js
  • Advanced Next JS Concepts
  • Get the best performance from your Next.js app

  • Make sure to optimize images using next/image. e.g.

    import Image from "next/image";
    <Image
      src="/images/my-image.jpg"
      alt="My Image"
      width={500}
      height={500}
      loading="lazy"
    />;

  • Add Next.js Analytics (see section 4.d of the above article) - Link

Other General Tests

• Check that if you have a fixed header, the page scrolls to the correct position when clicking on a link - Link
• Check that the site works on all devices and browsers - BrowserStack
• Check that input boxes are using the correct attributes to help user input - Better Mobile Inputs

GitHub Information

• Check that the GitHub repo has all the details that it needs, such as:
  • About Section
    • Description
    • Tags
  • Is public/private
  • Is pinned to main GitHub profile if suitable
• Check that the README has all the required details it needs, including;
  • Structure - see here
  • Project Title
  • Project Description
  • Table of Contents
  • Installation
  • Usage
  • Contributing
  • License
  • Badges
    • Version number
    • Repo status
    • Tests passing
    • Netlify deployment status

Other Options

• Remove console logs from Production
• Add a share button
• Markup validation