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
   • 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