Skip to content

Conversation

@tlambert03
Copy link
Owner

This commit implements several performance improvements for the protein detail page based on Lighthouse audit findings:

  1. Database Query Optimization:

    • Add prefetch_related for references, transitions, and bleach_measurements
    • Add select_related for parent_organism and lineage relations
    • Reduces N+1 queries on protein detail page
  2. Resource Hints:

    • Add preconnect/dns-prefetch for Google Analytics domains
    • Add preconnect/dns-prefetch for Algolia search API
    • Improves initial connection time for third-party resources
  3. JavaScript Optimization:

    • Extract inline scripts from protein_detail.html to protein_page.js
    • Convert lineage chart to use IntersectionObserver for lazy loading
    • Lineage chart now only loads when scrolled into view (200px threshold)
    • Reduces initial JavaScript parse/execution time
  4. Code Quality:

    • Replace inline mutation toggle function with reusable external function
    • Improve error handling for lineage chart loading failures
    • Better separation of concerns between template and JavaScript

Expected Impact:

  • Reduced database queries (fewer round trips)
  • Faster third-party resource loading (earlier DNS resolution)
  • Reduced initial JavaScript execution (deferred lineage chart)
  • Smaller HTML payload (extracted inline scripts)

claude and others added 5 commits November 5, 2025 19:48
This commit implements several performance improvements for the protein
detail page based on Lighthouse audit findings:

1. Database Query Optimization:
   - Add prefetch_related for references, transitions, and bleach_measurements
   - Add select_related for parent_organism and lineage relations
   - Reduces N+1 queries on protein detail page

2. Resource Hints:
   - Add preconnect/dns-prefetch for Google Analytics domains
   - Add preconnect/dns-prefetch for Algolia search API
   - Improves initial connection time for third-party resources

3. JavaScript Optimization:
   - Extract inline scripts from protein_detail.html to protein_page.js
   - Convert lineage chart to use IntersectionObserver for lazy loading
   - Lineage chart now only loads when scrolled into view (200px threshold)
   - Reduces initial JavaScript parse/execution time

4. Code Quality:
   - Replace inline mutation toggle function with reusable external function
   - Improve error handling for lineage chart loading failures
   - Better separation of concerns between template and JavaScript

Expected Impact:
- Reduced database queries (fewer round trips)
- Faster third-party resource loading (earlier DNS resolution)
- Reduced initial JavaScript execution (deferred lineage chart)
- Smaller HTML payload (extracted inline scripts)
GA4 tracking beacons to google-analytics.com happen async after page load,
so preconnect provides minimal benefit. Only googletagmanager.com needs
preconnect since it's loaded synchronously during initial render.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants