DEV Community


Front End Checklist

effingkay profile image Klaudia ・2 min read

This article was originally published on my personal blog and can be found here.

Just before I call website done and abandon it, I like to go through these to make sure everything is in place.

This my personal list that I put together over time, I know there's lots of different checklists out there already but I made my own with the resources I found most useful and the ones I like to use. I included other similar checklists at the bottom of the page, just for completion.


Accessibility checks

Security checks

Image optimisation


// Preload resources you have high-confidence 
// will be used in the current page. 
// Prefetch resources likely to be used for future navigations 
// across multiple navigation boundaries.

`<link rel="prefetch" href="image.png">
<link rel="preload" href="image.png">`

Other checklists

Last words

If you have any other tips and resources that you'd like to share, plese do. You can always ping me on twitter (I rarely check it) or don't hesitate to open a PR with newly added links, I welcome any additions :) You can find this article on github here.

Discussion (17)

chandrasd profile image
Chandra Dasari

This is great list! Squoosh would be pretty good add on to image optimization category.

enbonnet profile image
Ender Bonnet

Thanks for share Klaudia, we made a list of Frontend Tools if you want to look it, we hope this help someone like your post

rezi profile image
Tomas Rezac

Good to see people use FE checklist. I have only implementation of mine one, which can be used by teams as each checklist has its TODO like state synchronisation. Just create new one copy unique link and send it to your team ;) You are welcome to use it:

zakokor profile image
Gonzalo Aragón

Thanks Klaudia, very useful...maybe you could create a list with this links and share on, my open source project :) I would be happy to know if that is useful for you too.

ioan profile image
Luca Ionescu

Thank you for putting together and sharing this list, it's very useful!

_ronini profile image
Ronnie Villarini

Nice! I'll be sure to check some of these when we're ready to publish our current project! Thanks for sharing 😀

hassankrayem profile image

Very useful 👍

gilad profile image
Gilad Tsehori

I think there are also some services that check if your code is written using best practices (or rather avoiding bad practices 🙂)

jamesthomson profile image
James Thomson • Edited

For JS, it's usually (eslint)[], but that's done while developing so more of a constant validator rather pre-launch.

toastking profile image
Matt Del Signore

Chrome has some really nice tools for time to interactive and accessibility. The lighthouse checks in the audit tab of dev tools are sweet!

ezequiel_caste profile image

Thanks! Nice list to have.

junedmullani profile image

great work. This is good list but if you want more click here.

yunusemreozcan profile image

You can purchase to Screpy lifetime subscription on AppSumo.

Or you can become a standard member for only $ 2 per month on Screpy.

gwllmnn profile image
Grégoire Willmann

Great list Klaudia!

Do you manually check all of the links/items?
It would be great if we could automate these checks :)

thedaviddias profile image
David Dias

Hey Klaudio, thanks for sharing that list! I know another Front-End Checklist that has a lot you can use 😉

effingkay profile image
Klaudia Author

Hi David,

Thanks for commenting.

Couple of notes:

  • it's Klaudia, not Klaudio
  • I literally linked that very same project above
  • but you know, thanks for reading the article! Much appreciated


Forem Open with the Forem app