Performance-Measurements

Tooling to measure website performance

Why Performance Matters

https://developers.google.com/web/fundamentals/performance/why-performance-matters/

Topics -

Topics on “Tooling to measure your website performance” as below…

1. Chrome Developer Tools overview
   • Audit
   • Performance
   • Network - Resource Priorties for Critical Rendring Path
   • Profiles Panel - Memory/Heap Profiling
   • Find unused CSS and JS with the Coverage feature and attempt to optimize.
   • Framework tools - React, Angular

2. Progressive Tooling

   What are the different performance tools?

   • Lighthouse
   • WebPageTest
   • TestMySite
   • PageSpeed Insights
   • SpeedCurve
   • peed Scorecard
   • Impact Calculator = PWMetrics = Treo
   • Chrome Developer Tools(CDT)
3. Front-end performance with HTTP/2
   • HTTP/2 Frequently Asked Questions
4. Service Workers: an Introduction
5. Google workbox
6. Server side rendering & code splitting.
7. Browserslist Integration
   • babel 7
   • autoprefixer, stylelint, eslint-plugin-compat and many others.
8. Server configurations.

   • [Content compressions - gzip

     deflate

     brotli](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer)

   • Content Caching
9. Assessing Loading Performance in Real Life with Navigation and Resource Timing
10. Reduce JavaScript Payloads with Tree Shaking
11. Web Performance Optimization with webpack
12. Offscreen Images - IntersectionObserver
13. Performance
    • Critical Request Chains
    • Defer unused CSS
    • Enable Text Compression
    • Resource Hints and Client Hints
14. Best Practices
    • Opens External Anchors Using rel=”noopener”
15. Walkthrough - Front-end performance checklist
16. Community Resources - Blogs, GitHub, Twitter, Stack overflow, Videos, Books
17. Lighthouse CI
18. Web Worker

Demo - nginx configurations nginx-performance-tooling

• Content Compression gzip, brotli etc.
• http2
• Content Caching