Project Release Checklist
Use this checklist tool for each site released - frontendchecklist.io
SEO 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 meta tags in the index.html file
Favicon
- Create a favicon for the site and for all applications that may access the site
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
404 Page
- 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
pagesdirectory - 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
- Add a new page to the
- 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
- Lazy load images and videos - add to the image and iframe tags
loading="lazy"
- Lazy load images and videos - add to the image and iframe tags
- Optimise your data speed
- Optimise the site for speed
- Remove dependencies that are not required -
npx depcheck - If using React, then visit Reacthandbook.dev
- 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
- Remove dependencies that are not required -
- 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
- Use WebPageTest to test the speed of the site
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.errorsandconsole.warning- It's important to address console errors in production code to maintain a smooth and error-free user experiences.
Framework Specific Checks
- If using Next.js
-
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
- About Section
- 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
- Structure - see here