Why this matters
As a BI Developer, your dashboards should answer questions fast. Slow visuals and heavy interactions frustrate stakeholders and increase support load. Optimizing visuals and interactions is the quickest way to improve perceived performance without changing backend systems.
- Reduce time-to-first-insight by minimizing the number of visuals that query the model at once.
- Prevent runaway cross-filtering that triggers dozens of queries per click.
- Design guided interactions so users get answers with fewer, cheaper queries.
Concept explained simply
Every visual is a small program. It requests data, aggregates it, and renders. More visuals = more work. More interactions (cross-filtering, slicers, parameters) = more cascading work.
Mental model
Picture your report like a restaurant kitchen:
- Visuals are dishes: each needs ingredients (data) and prep (aggregation).
- Interactions are special requests: they force the kitchen to redo work.
- Optimization means fewer dishes at once, simpler recipes, and clear specials.
When to optimize visuals vs. the data model
- Optimize visuals/interactions first if the model is acceptable but pages feel slow when opened or when clicking.
- Optimize the model first if even a single simple visual is slow. Then return to visuals.
Performance levers you control on the page
- Visual count per page: target 6–8 visuals on core pages. Move detail to secondary pages or tooltips.
- Interaction scope: disable unnecessary cross-filtering; guide with 1–2 primary controls.
- Data reduction: use Top N, relative date, or required filters before loading full detail.
- Visual choice: prefer native charts over heavy custom visuals; avoid high-cardinality slicers.
- Aggregations in visuals: keep calculations simple at render time; push heavy logic into the model or pre-aggregations.
- Images and formatting: compress images; limit conditional formatting and shadows that add render cost.
- Defer queries: use pagination, buttons to reveal detail, and drill-through instead of all-at-once detail.
Worked examples
Example 1: Trim visual count and front-load filters
Scenario: A sales overview page has 14 visuals and loads in ~9 seconds. Users mostly want revenue trend and top products.
- Keep: revenue KPI, monthly trend line, Top 10 products bar chart.
- Move detail tables to a drill-through page accessible by a button.
- Require a region filter before charts load (default to the largest region or prompt selection).
- Result: 7 visuals remain; initial load drops to ~4 seconds; interactions cut query fan-out by ~40%.
Why this works
Fewer visuals reduces concurrent queries; required filter reduces data volume and aggregation work before render.
Example 2: Tame cross-filtering
Scenario: Clicking a bar in a Top 50 Customers chart causes 10 other visuals to re-query, taking 5–6 seconds.
- Use edit-interactions to disable cross-filtering from the Top 50 chart to non-relevant visuals (like global KPIs).
- Allow cross-filtering only to a customer detail card and a small orders-by-quarter chart.
- Convert a wide customer table into a drill-through detail page opened via button.
- Result: One click triggers 2 visuals instead of 10; interaction latency drops to ~1–2 seconds.
Tip: Pick a single “source of truth” filter
Let one control (e.g., a date range) drive the page. Other controls should be scoped or independent to avoid cascades.
Example 3: Tooltips vs. drill-through vs. on-page tables
Scenario: A dense table shows 25 columns. Users only need extra fields occasionally.
- Replace the table with a compact summary table (8–10 columns).
- Add a rich tooltip or on-demand tooltip page for extra fields.
- Provide a drill-through page for full transactional detail with pagination.
- Result: The main page loads faster; detail fetch happens only when needed.
Rule of thumb
If a field is used <20% of the time, move it into a tooltip or drill-through rather than rendering always.
Who this is for
- BI Developers building or maintaining dashboards in tools like Power BI, Tableau, Looker, Qlik, or similar.
- Data Analysts who own performance of shared reports.
- Analytics Engineers collaborating on semantic models and report layers.
Prerequisites
- You can build basic dashboards (charts, tables, filters).
- You understand your tool’s interaction settings (cross-filter, highlight, actions).
- Basic measure/calculation skills (e.g., creating a KPI measure).
Learning path
- Assess current pages: count visuals, list interactions, measure load and click latency.
- Apply the core levers: reduce visuals, constrain interactions, add data reduction filters.
- Restructure navigation: summary page + detail pages; drill-through where needed.
- Polish: compress images, simplify formatting, test high-cardinality controls.
- Validate with users: confirm they still get answers faster with fewer clicks.
Practical projects
- Project 1: Convert a slow “all-in-one” dashboard into a summary + drill-through design. Target 50% faster first render.
- Project 2: Replace three heavy slicers with one required parameter + Top N filter. Measure before/after click latency.
- Project 3: Move low-use fields into tooltips and paginate the detail table. Validate adoption with 3–5 users.
Exercises
Note: The quick test is available to everyone. Only logged-in users will have progress saved.
Complete the two exercises below, then take the Quick Test at the end of the page.
- Exercise 1 — Visual diet plan: Choose which visuals to keep, move, or remove on a crowded overview page, and state expected performance gains.
- Exercise 2 — Interaction audit: Map and minimize cross-filter chains; decide which visuals should respond to which controls.
Pre-submit checklist
- I limited main pages to ~6–8 visuals.
- I scoped interactions so only relevant visuals refresh on clicks.
- I applied at least one data reduction strategy (Top N, required filters, relative date).
- I moved rarely used detail to tooltips or drill-through.
- I wrote down before/after load and click times (even rough estimates).
Common mistakes and self-check
- Too many slicers: Especially high-cardinality fields (e.g., Customer Name). Replace with search, Top N, or parameterized pickers.
- Letting every visual cross-filter every other visual: Disable non-essential interactions.
- Rendering all detail by default: Use drill-through or buttons to reveal heavy tables on demand.
- Complex per-visual calculations: Push heavy logic into the model; keep visual-level formulas simple.
- Visual noise: Extra shadows, images, and conditional formatting add render cost. Keep it clean.
Self-check: Can a new user answer the top 3 questions in under 10 seconds after load? If not, reduce visuals or simplify interactions again.
Mini challenge
You have a page with 12 visuals: 3 slicers (Customer, Product, City), 2 KPIs, 3 trend charts, 2 Top N bars, 2 large tables. Average click latency after selecting a customer is 6 seconds. Redesign to target <2 seconds click latency using only page-level changes. Write your plan in 5 steps.
Next steps
- Apply changes to one live dashboard this week; measure and share before/after results.
- Document a two-page standard: Summary page rules and Detail page rules for your team.
- Take the Quick Test below to lock in the concepts.