This blog post will be updated as I learn new stuff.
Head Tags
Do not forget to set head tags correctly for each page.
- meta title
- meta description
- meta keywords
- meta image
- meta open graph tags (og)
- meta twitter share tags
- meta color-scheme
- meta theme-color
- link favicon with different sizes (16x16, 32x32)
- link apple-touch-icon
- link canonical
- link manifest
Image optimization
- Don't load image which has big file sizes on mobile.
- Use lazy loading
- Use placeholder (for example blur)
User Preferences
- dark mode support
- reduce motion support
Browser Compability
You should pay attention to support at least major browsers
- Known css bugs and browser engines' issues
- caniuse.com
- polyfills
Mobile Compability
Come on!
Performance
Don't forget to optimize website. You can use:
- Lighthouse
- page speed insights
Security
- ...
Analytics
- Microanalytics.io
- Google Analytics
SEO
- add meta tags
- add your website to search engines (https://search.google.com/search-console)
- create sitemap of the website
- add robots.txt and set your sitemap (https://www.cloudflare.com/learning/bots/what-is-robots.txt/)
Misc
- webmanifest file