Skip to content

Latest commit

 

History

History
92 lines (83 loc) · 2.94 KB

README.md

File metadata and controls

92 lines (83 loc) · 2.94 KB
Raw

Page optimization 🤷‍

Table of contents

  • SEO 🧐
    • being SEO compliant usually means you used the standards properly
  • Framework development / VanillaJS / Custom development 💀 ☠
    • detached frontend
    • cms theming
    • use built in functionality of the framework vs custom
    • one source of truth (unique)
    • one way data-flow
    • one way data-binding
    • single responsibility for functions/components
  • Best Practices 🤓
    • Structure
      • Lazy load
      • Critical Path and Render Blocking Resources (CSS + JS)
      • Avoid redirect and 404
      • Mobile first ?
      • first paint of the page vs content
      • reduce http requests
    • JS
      • javascript modules
      • how to import external libraries
        • CDN
        • async js / defer <script async src="foobar.js"></script>
        • Move your scripts to the bottom of the page right before your tag.
        • Concatenate your JS files into one file (with HTTP/2 this is no longer as important)
        • HTTP/2
      • Add/Remove event listener and bindings
      • Avoid infinite loops
      • Avoid unreachable code
    • CSS
      • concatenate your CSS files into one file
      • Use media queries to mark some CSS resources as non-render blocking
      • When using SASS, avoid too many nested levels as in the compiled version the code will be duplicated too many times
      • webfonts
      • iconfont/SVG vs immagini (icomoon)
    • Server side
      • Cache ( client and server side )
      • dns prefetch and preconnect
      • gzip/ file compression
      • SQL query opt
  • Minification / Uglify 👹
    • drop_console, remove comments, uglify, .map files
    • concat css and combine media queries
    • image optimization ( manual and automatic )
  • DevTools 🤖
    • for testing purposes
      • Lighthouse/Audit
        • Mobile / Desktop
        • Audits Performances
        • Throttling
      • Performance tab
        • loading
        • scripting
        • rendering
        • painting
        • other
        • idle
      • IDE code inspections
      • PageSpeed modules server side (apache/nginx)
      • SpeedTest tools online
    • for development purposes
      • Dev/Production ENV & Build
        • .env files
      • Webpack/Parcel
      • Gulp/Grunt
      • Babel
      • ESLINT
  • Extra 🤟

Contributing

Feel free to send you own contribution to this repo. Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the guidelines:

License

The code is available under the MIT license.