All Projects → drublic → Checklist

drublic / Checklist

📋 A Frontend Checklist for Websites

Projects that are alternatives of or similar to Checklist

Front End Performance Checklist
🎮 The only Front-End Performance Checklist that runs faster than the others
Stars: ✭ 13,815 (+5470.56%)
Mutual labels:  checklist, performance, frontend
Front End Performance Checklist
🎮 더 빠르게 작동하는 프론트엔드 성능 체크리스트
Stars: ✭ 183 (-26.21%)
Mutual labels:  checklist, performance, frontend
Front End Design Checklist
💎 The Design Checklist for Creative Web Designers and Patient Front-End Developers
Stars: ✭ 4,136 (+1567.74%)
Mutual labels:  checklist, frontend
Checklist Tools Website
🍿 The perfect Checklist Website for meticulous developers.
Stars: ✭ 73 (-70.56%)
Mutual labels:  checklist, frontend
Learning Pwa
📱some samples and blogs about how to start with your first PWA
Stars: ✭ 162 (-34.68%)
Mutual labels:  performance, frontend
Performance Handbook
Webフロントエンド パフォーマンス改善ハンドブック
Stars: ✭ 99 (-60.08%)
Mutual labels:  performance, frontend
Webpack Libs Optimizations
Using a library in your webpack project? Here’s how to optimize it
Stars: ✭ 3,187 (+1185.08%)
Mutual labels:  performance, frontend
Fe Foundation
前端开发学习指南
Stars: ✭ 113 (-54.44%)
Mutual labels:  checklist, frontend
Front End Checklist
🗂 The perfect Front-End Checklist for modern websites and meticulous developers
Stars: ✭ 57,386 (+23039.52%)
Mutual labels:  checklist, frontend
The Front End Knowledge You May Not Know
😇 你可能不知道的前端知识点
Stars: ✭ 2,238 (+802.42%)
Mutual labels:  performance, frontend
Fe Performance Journey
🚵 a Journey of Performance Optimizing in Frontend 🚀
Stars: ✭ 169 (-31.85%)
Mutual labels:  performance, frontend
Web Launch Checklist
📋 A simple website launch checklist to keep track of the most important enrichment possibilities for a website.
Stars: ✭ 214 (-13.71%)
Mutual labels:  checklist, performance
Awesome Casestudy
📕 Curated list of technical case studies on WebGL and creative development
Stars: ✭ 2,324 (+837.1%)
Mutual labels:  performance, frontend
Hiper
🚀 A statistical analysis tool for performance testing
Stars: ✭ 2,667 (+975.4%)
Mutual labels:  performance, frontend
Router
Router implementation for fasthttp
Stars: ✭ 234 (-5.65%)
Mutual labels:  performance
Phunctional
⚡️ λ PHP functional library focused on simplicity and performance
Stars: ✭ 243 (-2.02%)
Mutual labels:  performance
Adlik
Adlik: Toolkit for Accelerating Deep Learning Inference
Stars: ✭ 237 (-4.44%)
Mutual labels:  performance
Shunter
A Node.js application built to read JSON and translate it into HTML
Stars: ✭ 236 (-4.84%)
Mutual labels:  frontend
Go Tooling Workshop
A workshop covering all the tools gophers use in their day to day life
Stars: ✭ 2,683 (+981.85%)
Mutual labels:  performance
Laravel Zero
A PHP framework for console artisans
Stars: ✭ 2,821 (+1037.5%)
Mutual labels:  performance

Frontend Checklist for Websites

Performance

General

  • [ ] HTTP/2 is being used
  • [ ] CDN is used for static files
  • [ ] CDN is used for content pages
  • [ ] Cookie-Less Domain is used for static files
  • [ ] DNS prefetching is used
    • [ ] <link rel="preload" as="script"> (CSS, JS and fonts)
    • [ ] <link rel="dns-prefetch"> (for Domain, which provides static resources, eg.: Images, and Tracking Tools)

Resources

  • [ ] JavaScript combined in one file

  • [ ] JavaScript minified

  • [ ] JavaScript is compressed

  • [ ] No JavaScript inline

  • [ ] CSS combined in one file

  • [ ] CSS minified

  • [ ] CSS is compressed

  • [ ] CSS: No usage of @import

  • [ ] No CSS inline

  • [ ] HTML minified

  • [ ] Static files are compressed with gzip or brotli

  • [ ] Static files are pre-compressed on the server

  • [ ] HTML is compressed with gzip or brotli

  • [ ] Usage of correct image formats

  • [ ] Usage of responsive images

  • [ ] Images are optimized (ImageOptim…)

  • [ ] Image are cached in the browser

  • [ ] SVG files are minized

  • [ ] SVG files are used where possible

  • [ ] Only fonts that are used are loaded

  • [ ] Browser cache is used efficiently

  • [ ] ETags is not used

  • [ ] Expires, cache-control and max-age headers for static resources is set to 1 year

  • [ ] Asychronous or deferred loading of non-critical content

  • [ ] Tracking scripts loaded asynchronously

Measurements

Usually I measure the main pages of a project here.

  • [ ] Count of all files
  • [ ] Size of all files combined
  • [ ] Download time of the page
  • [ ] Google Page Speed analysis (Desktop, Mobile and Mobile UX; x of 100)
  • [ ] SpeedIndex

Rendering Performance

  • [ ] Intrinsic image sizes are specified in the markup
  • [ ] CSS is loaded in the document head
  • [ ] Scripts are loaded at the end of the document
  • [ ] Scripts are loaded with defer-attribute
  • [ ] Scripts are loaded in the document head after styles are loaded
  • [ ] Scrolling is possible with 60fps
  • [ ] No usage of document.write
  • [ ] CSS animation causing layout(reflow) is not heavily used

Device performance

  • [ ] CPU usage
  • [ ] Memory usage
  • [ ] GPU usage

Cross-Browser

  • [ ] Website is loading on all current desktop browsers (Safari, Firefox, Chrome, IE11, EDGE)
  • [ ] Website is loading on all current mobile browser (Chrome for Android, iOS Safari)
  • [ ] For Shops: Checkout is usable on all necessary devices and browsers
  • [ ] Viewport Meta Tag is used correctly
  • [ ] Usage of correct input types

SEO

  • [ ] Pages can be indexed

  • [ ] Mobile version of website is available

  • [ ] HTTPS is used on all pages

  • [ ] Sitemap is available

  • [ ] Structured-Data is used where possible

  • [ ] Headlines used

  • [ ] Headlines in correct order

  • [ ] Meta descriptions used

  • [ ] Meta keywords used

  • [ ] Meta title is filled correctly

  • [ ] Keywords used in headlines

  • [ ] Images use the alt-attribute

  • [ ] Links use a title-attribute

  • [ ] Links in navigation do not use title-attribute

  • [ ] No Duplicate Content

  • [ ] Usage of absolute URLs

  • [ ] Internal links point to HTTPS version of page

  • [ ] Redirects are done with 301

  • [ ] No 404-errors

  • [ ] No 500-errors

  • [ ] Canonical Tags are used if applicable

  • [ ] Ratio of code and content is around 25% for shop pages and 50% for content pages

Accessibility

  • [ ] Color Contrast is good (WCAG 2.0)
  • [ ] WAI-ARIA roles are used
  • [ ] Usage of accessible elements like nav, footer, aside
  • [ ] URLs are accessible
  • [ ] Keyboard accessibility is available
  • [ ] Correct input types are used

Security

  • [ ] HTTPS is used on all pages
  • [ ] There is no mixed content on the pages
  • [ ] external plugins and trackings get loaded via HTTPS
  • [ ] Robots.txt is in use
  • [ ] Cross-Site-Scripting is not possible
  • [ ] HSTS Header is set
  • [ ] Content-Security-Policy is set and only allows specific hosts and no inline scripts

More

  • [ ] Strict usage of domain with or without www
  • [ ] Correct language set in HTML tag
  • [ ] Charset is set
  • [ ] HTML is valid
  • [ ] 404-page is available
  • [ ] A special print style sheet is in place

Server

  • [ ] Correct language set by the server
  • [ ] Correct content types set by the server
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].