Static file optimization in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Flask serve static files by default?

Consider a Flask app with a folder named static containing CSS and JS files. What happens when a browser requests /static/style.css?

A Flask cannot serve static files; a separate web server is needed.

B Flask automatically serves the file from the <code>static</code> folder without extra code.

C Flask serves static files only if <code>send_file()</code> is called in a route.

D Flask requires a route to be defined to serve static files manually.

💡 Hint

Think about Flask's default behavior for the static folder.

Flask automatically serves files placed in the static folder at the URL path /static/filename. No extra route is needed.

📝 Syntax

intermediate

Which Flask code snippet correctly sets cache timeout for static files?

You want to set a cache timeout of 1 hour (3600 seconds) for static files in Flask. Which code snippet achieves this?

A app = Flask(__name__, static_folder='static', static_url_path='/static', static_cache_timeout=3600)

B

app = Flask(__name__)
app.config['STATIC_CACHE_TIMEOUT'] = 3600

C

app = Flask(__name__)
app.static_cache_timeout = 3600

D

app = Flask(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 3600

💡 Hint

Look for the Flask config key that controls static file cache timeout.

The correct config key is SEND_FILE_MAX_AGE_DEFAULT, which sets the cache timeout in seconds for static files.

❓ state_output

advanced

What is the output of this Flask static file URL generation?

Given this Flask code snippet, what is the output of url_for('static', filename='js/app.js')?

Flask

from flask import Flask, url_for
app = Flask(__name__)

with app.test_request_context():
    print(url_for('static', filename='js/app.js'))

A /static/js/app.js

B /js/app.js

C /static/app.js

D /app.js

💡 Hint

Remember the default static URL path in Flask.

The url_for('static', filename='js/app.js') generates the URL path starting with /static/ followed by the filename.

🔧 Debug

advanced

Why does this Flask app not serve updated static files immediately?

A developer updates a CSS file in the static folder but the browser still shows the old style. What is the most likely cause?

A The static folder is misnamed; Flask cannot find the updated file.

B Flask does not reload static files automatically; the server must restart.

C Browser cache is serving the old file; cache headers need adjustment or cache busting.

D The CSS file is not linked correctly in the HTML template.

💡 Hint

Think about how browsers handle static files and caching.

Browsers cache static files aggressively. Without cache busting or proper cache headers, updated files may not load immediately.

🧠 Conceptual

expert

What is the best practice to optimize static file delivery in Flask for production?

Which approach is recommended to optimize static file delivery in a Flask production environment?

A Use a dedicated web server like Nginx or a CDN to serve static files, offloading Flask.

B Disable caching entirely to ensure users always get the latest static files.

C Embed static files inside Flask routes and serve them dynamically on each request.

D Serve static files directly from Flask using its built-in server with cache headers set.

💡 Hint

Consider performance and scalability for production environments.

Flask's built-in server is not optimized for static file delivery in production. Using a web server or CDN improves speed and reduces load on Flask.

Practice

1. What is the main purpose of static file optimization in a Flask web application?

easy

A. To disable caching of static files

B. To add more static files to the project

C. To make the website load faster by reducing file sizes

D. To change the content of static files dynamically

Solution

1. Step 1: Understand static file optimization

   Static file optimization means making files like CSS, JS, and images smaller or faster to load.

2. Step 2: Identify the main goal

   The goal is to reduce file sizes or improve delivery so the website loads faster for users.

3. Final Answer:

   To make the website load faster by reducing file sizes -> Option C

4. Quick Check:

   Optimization = faster loading [OK]

Hint: Optimization means making files smaller or faster [OK]

Common Mistakes:

• Thinking optimization adds more files
• Confusing dynamic content with static files
• Believing optimization disables caching

2. Which Flask extension is commonly used to add compression for static files to optimize them?

easy

A. flask_sqlalchemy

B. flask_compress

C. flask_login

D. flask_migrate

Solution

1. Step 1: Identify Flask extensions for compression

   Among Flask extensions, flask_compress is designed to compress responses including static files.

2. Step 2: Match extension to purpose

   flask_sqlalchemy is for databases, flask_login for user sessions, and flask_migrate for database migrations, so they don't compress files.

3. Final Answer:

   flask_compress -> Option B

4. Quick Check:

   Compression extension = flask_compress [OK]

Hint: Compression in Flask? Think flask_compress [OK]

Common Mistakes:

• Choosing database or login extensions by mistake
• Confusing migration tools with compression
• Not knowing Flask extensions' purposes

3. Given this Flask snippet using flask_compress:

from flask import Flask
from flask_compress import Compress

app = Flask(__name__)
Compress(app)

@app.route('/')
def home():
    return app.send_static_file('style.css')

What happens when a browser requests /?

medium

A. The server sends style.css without compression

B. The server sends an HTML page instead of style.css

C. The server returns a 404 error

D. The server sends the compressed version of style.css

Solution

1. Step 1: Understand flask_compress effect

   When flask_compress is initialized with the app, it compresses responses automatically if the client supports it.

2. Step 2: Analyze the route behavior

   The route returns the static file 'style.css' using send_static_file. With compression enabled, this file is sent compressed.

3. Final Answer:

   The server sends the compressed version of style.css -> Option D

4. Quick Check:

   flask_compress compresses static files automatically [OK]

Hint: flask_compress compresses all responses including static files [OK]

Common Mistakes:

• Assuming static files are never compressed
• Expecting a 404 error without reason
• Thinking the route sends HTML by default

4. You added flask_compress to your Flask app but static files are not compressed. What is a likely cause?

medium

A. You forgot to call Compress(app) after creating the app

B. You used app.run() instead of app.start()

C. Static files cannot be compressed in Flask

D. You did not install Flask

Solution

1. Step 1: Check flask_compress setup

   To enable compression, you must call Compress(app) after creating the Flask app instance.

2. Step 2: Eliminate other options

   app.run() is correct to start Flask; static files can be compressed; Flask must be installed to run at all.

3. Final Answer:

   You forgot to call Compress(app) after creating the app -> Option A

4. Quick Check:

   Missing Compress(app) disables compression [OK]

Hint: Always call Compress(app) after app creation [OK]

Common Mistakes:

• Confusing app.run() with app.start()
• Thinking Flask can't compress static files
• Ignoring extension initialization step

5. You want to optimize your Flask app's static files by compressing them and setting cache headers for better performance. Which code snippet correctly applies both optimizations?

hard

A. from flask import Flask, send_from_directory
from flask_compress import Compress

app = Flask(__name__)
Compress(app)

@app.route('/static/')
def static_files(filename):
response = send_from_directory('static', filename)
response.cache_control.max_age = 31536000 # 1 year
return response

B. from flask import Flask

app = Flask(__name__)

@app.route('/static/<filename>')
def static_files(filename):
return open(f'static/{filename}').read()

C. from flask import Flask
from flask_compress import Compress

app = Flask(__name__)

@app.route('/static/<filename>')
def static_files(filename):
return open(f'static/{filename}').read()

D. from flask import Flask, send_static_file

app = Flask(__name__)

@app.route('/static/<filename>')
def static_files(filename):
return send_static_file(filename)

Solution

1. Step 1: Enable compression with flask_compress

   from flask import Flask, send_from_directory from flask_compress import Compress app = Flask(__name__) Compress(app) @app.route('/static/') def static_files(filename): response = send_from_directory('static', filename) response.cache_control.max_age = 31536000 # 1 year return response correctly imports and calls Compress(app) to enable compression.

2. Step 2: Set cache headers on static file response

   from flask import Flask, send_from_directory from flask_compress import Compress app = Flask(__name__) Compress(app) @app.route('/static/') def static_files(filename): response = send_from_directory('static', filename) response.cache_control.max_age = 31536000 # 1 year return response sets cache_control.max_age to 1 year, which helps browsers cache files efficiently.

3. Step 3: Verify other options

   Options B, C, and D do not enable compression or set cache headers properly, and B and C read files unsafely without response objects.

4. Final Answer:

   Option A code snippet correctly compresses and caches static files -> Option A

5. Quick Check:

   Compression + cache headers = from flask import Flask, send_from_directory from flask_compress import Compress app = Flask(__name__) Compress(app) @app.route('/static/') def static_files(filename): response = send_from_directory('static', filename) response.cache_control.max_age = 31536000 # 1 year return response [OK]

Hint: Use flask_compress and set cache_control.max_age [OK]

Common Mistakes:

• Not calling Compress(app)
• Serving files without response objects
• Not setting cache headers for static files