Performance Tuning

Django + JS Performance Tuning

Principles of performance tuning

• optimize one thing at a time: memory, cpu, network size, latency, etc
• optimize systems in isolation: break everything down into components and turn everything else off, optimize each component then build it back up
• binary search for problematic components in big systems by commenting out large swaths of code
• test & verify, don't optimize based on a hunch, test exactly how slow the system is before hand, make the change, and then test afterwards to verify the assumption
• always go for low-hanging fruit first, don't waste 6 hours tuning a 2ms db query problem, when you can fix the 120ms of request latency first by adding a cache

Backend

Three major factors:

• Request python timing
• SQL query timing
• Template rendering timing

Others:

• cache timing (redis vs db) & what content is suitable to cache
• nginx & cloudflare latency on top of daphne

Tools:

• Django Debug Toolbar — Django Debug Toolbar 1.9 documentation
• GitHub - uber/pyflame: 🔥 Pyflame: A Ptracing Profiler For Python
• ping, traceroute, mtr, wget, curl
• ./manage.py shell_plus --print-sql
• from django.db import connection; print(connection.queries)
• Model.objects.only('id').values().select_related().prefetch_related()
• Model.objects.filter().values('name').annotate(badge_count=Count('name'))

Examples of existing performance tuning:

• cached templates
• moved start_tablebeat to async start_tablebeat powered by dramatiq
• moved setup_socket() to return latest possible time to delay db query

Things that need the most work:

• SQL query timing (everywhere) on /tables/ and /leaderboard/
• socket & GET request latency (1/3 of which is cloudflare)

Frontend

Three major factors:

• Our Javascript timing (redux time, library code)
• React rendering timing
• Network request timing (Initial GET / HTML / JS bundle sizes & latency)

Tools:

• Chrome DevTools  |  Tools for Web Developers  |  Google Developers
  • FPS meter
  • Paint rectangles
  • React devtools
• Firefox Developer Tools | MDN
• Chrome Headless
  • time chrome --headless https://oddslingers.l

Examples of existing performance tuning:

• Ugifyjs applied after compjs to bring JS bundle size <500kb gzipped
• Blocking page resources are fairly few
• first gamestate is sent with GET request, then updated by connected socket

Things that need the most work:

• framerate/FPS
• react rendering speed
• redux-time animation computation speed
• poker compute-animations causes dropped frames during RECV