Optimize Static Assets, Large Images, and Enable CDN Delivery

[Nachiket-Roy]

Several static assets and images are excessively large, increasing page load time and bandwidth usage. Since this work does not affect backend logic, it is a low-risk, high-impact optimization.

Tasks Checklist
Compress oversized images (bacon.png, browser logos, etc.)
Convert PNG → WebP where possible
Add lazy loading to all tags
Move large JS libraries to CDN:
Chart.js
Bootstrap
Enable WhiteNoise static compression

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

Expected Impact
1–3 seconds faster initial load
60–80% smaller image payloads

[github-actions]

  🚫 **Please do not create new issues**  
  We currently have **many open issues** to focus on, some even with $5 bounties.
  
  If you believe your issue is important and should be solved,  
  please create a new topic in the BLT forum page instead.  
  Thanks for understanding! 🙏

[Nachiket-Roy]

@coderabbitai Guide on addressing this issue

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch details of issue #5251
gh issue view 5251 --json title,body,labels,assignees,state,author,url

Length of output: 887

---

🏁 Script executed:

#!/bin/bash
# Check the static files structure and locate images
echo "=== Static files directory structure ==="
fd -t d static | head -20

echo -e "\n=== Looking for bacon.png and browser logos ==="
fd -e png -e jpg -e jpeg | grep -E "(bacon|browser|logo)" | head -20

echo -e "\n=== Check settings.py for WhiteNoise and static files configuration ==="
fd -e py settings | xargs grep -l "STATICFILES_STORAGE\|WhiteNoise\|STATIC" | head -5

echo -e "\n=== Look for Chart.js and Bootstrap usage ==="
rg -l "chart\.js|chartjs" --type html --type js | head -10
rg -l "bootstrap" --type html --type js | head -10

echo -e "\n=== Check for lazy loading on images ==="
rg '<img' --type html -n | head -20

Length of output: 4211

---

🏁 Script executed:

#!/bin/bash
# Check the current settings.py configuration
echo "=== WhiteNoise and Static Files Configuration in settings.py ==="
cat blt/settings.py | grep -A 5 -B 5 "STATICFILES_STORAGE\|WhiteNoise\|STATIC_URL\|STATIC_ROOT\|MIDDLEWARE"

echo -e "\n=== Check file sizes of bacon.png and some browser logos ==="
ls -lh website/static/images/bacon.png 2>/dev/null || echo "bacon.png not found in expected location"
ls -lh BACON/bacon.png 2>/dev/null || echo "BACON/bacon.png not found"
du -sh website/static/img/browser-logos/ 2>/dev/null || echo "browser-logos directory not found"

echo -e "\n=== Check for image optimization or WebP files ==="
fd -e webp | head -10

Length of output: 2216

---

@Nachiket-Roy I can see this issue is currently closed, but I'll provide comprehensive guidance on implementing these optimizations. Based on my analysis of the codebase, here's what needs to be done:

📊 Current State Analysis

I found several optimization opportunities:

• bacon.png: 1.5M (website/static/images/bacon.png) and 2.7M (BACON/bacon.png)
• browser-logos: 38M total directory size
• WhiteNoise: Middleware installed but compression not enabled
• Lazy loading: Not implemented on any images
• CDN: Chart.js and Bootstrap served locally

🎯 Step-by-Step Implementation Guide

1. Enable WhiteNoise Static Compression (Quickest Win)

File: blt/settings.py

Add this setting after the STATIC_ROOT configuration:

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

This will automatically compress static files with Brotli/gzip when collected.

2. Compress and Optimize Images

Tools needed:

# Install image optimization tools
pip install Pillow
npm install -g imagemin-cli imagemin-webp imagemin-mozjpeg imagemin-pngquant

For bacon.png images:

# Compress the 1.5M bacon.png
imagemin website/static/images/bacon.png --plugin=pngquant > website/static/images/bacon-optimized.png

# Or convert to WebP (recommended)
imagemin website/static/images/bacon.png --plugin=webp > website/static/images/bacon.webp

For browser logos (bulk optimization):

# Compress all PNG files in browser-logos
find website/static/img/browser-logos -name "*.png" -exec imagemin {} --plugin=pngquant --out-dir={} \;

3. Convert PNG → WebP

Create a script to batch convert images:

# convert_to_webp.py
from PIL import Image
import os
from pathlib import Path

def convert_to_webp(source_dir):
    for png_file in Path(source_dir).rglob("*.png"):
        try:
            img = Image.open(png_file)
            webp_file = png_file.with_suffix('.webp')
            img.save(webp_file, 'webp', quality=85, method=6)
            print(f"Converted: {png_file} → {webp_file}")
        except Exception as e:
            print(f"Error converting {png_file}: {e}")

convert_to_webp('website/static/images')
convert_to_webp('website/static/img')

Update templates to use WebP with PNG fallback:

<picture>
    <source srcset="{% static 'images/bacon.webp' %}" type="image/webp">
    <img src="{% static 'images/bacon.png' %}" alt="Bacon">
</picture>

4. Add Lazy Loading to Images

Current examples from features.html (Line 32, 54, 76, etc.):

<!-- Before -->
<img src="{% static 'img/features/pr-review.png' %}" alt="PR Review">

<!-- After -->
<img src="{% static 'img/features/pr-review.png' %}" 
     alt="PR Review" 
     loading="lazy">

Bulk update command:

# Find all HTML templates and add loading="lazy" to img tags
find website/templates -name "*.html" -exec sed -i 's/<img \(.*\)>/<img \1 loading="lazy">/g' {} \;

Note: Keep loading="eager" for above-the-fold images.

5. Move to CDN for JavaScript Libraries

File: website/templates/base.html or relevant templates

Chart.js - Replace local file with CDN:

<!-- Remove local -->
<!-- <script src="{% static 'js/Chart.bundle.min.js' %}"></script> -->

<!-- Add CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" 
        integrity="sha384-..." 
        crossorigin="anonymous"></script>

Bootstrap - Replace local files:

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-..." 
      crossorigin="anonymous">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-..." 
        crossorigin="anonymous"></script>

6. Verification & Testing

After implementing:

# Collect static files with compression
python manage.py collectstatic --clear --noinput

# Check compressed file sizes
ls -lh staticfiles/ | grep -E "\.br$|\.gz$"

# Test page load times
curl -w "@curl-format.txt" -o /dev/null -s https://your-site.com

📈 Expected Results

• Image payload reduction: 60-80% smaller
• Initial load time: 1-3 seconds faster
• Bandwidth savings: Significant reduction in data transfer
• SEO improvement: Better Core Web Vitals scores

⚠️ Important Considerations

1. Backup first: Create a backup of the static files before bulk operations
2. Test thoroughly: Verify images display correctly after WebP conversion
3. Browser compatibility: Use <picture> tags for WebP with PNG fallback
4. Cache busting: WhiteNoise's manifest storage handles this automatically
5. CDN integrity: Always include SRI (Subresource Integrity) hashes for CDN resources

Would you like me to help with implementing any specific part of this optimization plan? I can also create a pull request plan if you'd like to proceed with the changes.