Bubble apps can suffer from slow load times due to plugin bloat, unoptimized images, excessive database queries, and complex page structures. This tutorial provides actionable strategies for reducing page load time including auditing plugins, compressing images, minimizing element counts, optimizing Repeating Group performance, leveraging Option Sets, and measuring improvements with real tools.
Overview: Optimizing Loading Speed in Bubble Apps
This tutorial covers comprehensive performance optimization strategies for Bubble apps. You will identify the most common causes of slow loading, apply specific fixes for each, and measure the results using browser tools and Google PageSpeed Insights.
Prerequisites
- A Bubble app experiencing slow load times or wanting to optimize proactively
- Access to Google PageSpeed Insights (pagespeed.web.dev)
- Basic understanding of Bubble pages, elements, and plugins
Step-by-step guide
Audit and remove unused plugins
Audit and remove unused plugins
Go to the Plugins tab and review every installed plugin. Plugins load their JavaScript and CSS on every single page of your app, regardless of whether that page uses the plugin. Delete any plugin you are not actively using. For plugins you use on only one page, check if the same functionality can be achieved with an HTML element or API Connector call instead. Reducing from 15 plugins to 5 can cut page load time significantly. After removing plugins, test your app thoroughly to ensure nothing breaks.
Pro tip: Every plugin removed can save 50-200KB of JavaScript loaded on every page. This is the single highest-impact optimization you can make.
Expected result: Your app loads noticeably faster after removing unused plugins.
Optimize images before uploading
Optimize images before uploading
Compress all images before uploading to Bubble using tools like TinyPNG, Squoosh, or ImageOptim. Aim for under 200KB per image and use JPEG for photos, PNG for graphics with transparency, and WebP for best compression. Bubble added image auto-compression in February 2026 (~60% faster loads), but starting with optimized source files is still better. For images in Repeating Groups, use smaller thumbnail versions rather than full-size images. Set explicit width and height on Image elements to prevent layout shifts during loading.
Expected result: Images load faster throughout your app without visible quality loss.
Reduce element count per page
Reduce element count per page
Bubble renders every element when the page loads, even hidden ones. Open the Element Tree and count your elements — pages with more than 100-150 elements start to slow down. Reduce count by: combining nested groups that serve no structural purpose, using Repeating Groups instead of duplicating similar element groups, converting multi-section pages into tabbed interfaces where only one section loads at a time, and moving complex sections into reusable elements. Hidden elements still consume rendering resources — use conditionally loaded groups instead.
Expected result: Pages with fewer elements render faster, especially on mobile devices.
Optimize Repeating Group performance
Optimize Repeating Group performance
Repeating Groups are the most common performance bottleneck. Optimize by: (1) Paginating to 10-20 items maximum per page. (2) Using database constraints instead of client-side :filtered operator — constraints run server-side and are much faster. (3) Never putting Do a Search for inside Repeating Group cells — each cell triggers a separate query, multiplying by the number of visible cells. (4) Pre-computing values as fields instead of calculating in the cell (e.g., store comment_count on Post rather than counting comments per cell). (5) Using parent group data references to avoid redundant searches.
Pro tip: Replace ':filtered' (client-side, slow) with search constraints (server-side, fast) whenever possible. This single change often improves Repeating Group speed by 5-10x.
Expected result: Repeating Groups load and filter data significantly faster.
Replace database searches with Option Sets for static data
Replace database searches with Option Sets for static data
Option Sets load from cached client-side code with zero workload unit cost and zero server round-trip time. Identify any Data Types that contain static, developer-managed data — statuses, categories, roles, countries — and convert them to Option Sets. Update all references from Do a Search for [Type] to the Option Set values. For dropdowns that previously used a Data Type as their data source, switch to the corresponding Option Set. This eliminates database queries for data that never changes per user.
Expected result: Static data loads instantly from cache instead of requiring database queries.
Measure improvements with PageSpeed Insights
Measure improvements with PageSpeed Insights
Before and after each optimization, test your app with Google PageSpeed Insights (pagespeed.web.dev). Enter your app's live URL and review both mobile and desktop scores. Pay attention to Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Also use your browser's DevTools Network tab to measure actual page load time and resource sizes. Document your scores before and after each change to quantify the impact.
Expected result: You have measurable before-and-after performance data showing the impact of each optimization.
Complete working example
1LOADING SPEED OPTIMIZATION CHECKLIST2======================================341. PLUGIN AUDIT (highest impact):5 □ List all installed plugins6 □ Delete unused plugins7 □ Replace single-page plugins with HTML/API alternatives8 □ Target: under 5-7 essential plugins9102. IMAGE OPTIMIZATION:11 □ Compress all images (under 200KB each)12 □ Use JPEG for photos, PNG for transparency, WebP for best compression13 □ Use thumbnails in Repeating Groups14 □ Set explicit width/height on Image elements15163. ELEMENT COUNT REDUCTION:17 □ Audit Element Tree per page (target: under 100-150)18 □ Merge unnecessary nested groups19 □ Use Repeating Groups instead of duplicated elements20 □ Convert sections to tabs (load one at a time)21 □ Move complex sections to reusable elements22234. REPEATING GROUP OPTIMIZATION:24 □ Paginate to 10-20 items per page25 □ Use constraints instead of :filtered26 □ Never use Do a Search for inside cells27 □ Pre-compute values as fields28 □ Use parent group data references29305. OPTION SET MIGRATION:31 □ Identify static Data Types32 □ Convert to Option Sets33 □ Update all references (dropdowns, conditions, workflows)34356. MEASUREMENT:36 □ Baseline: PageSpeed Insights score before changes37 □ After each change: re-test and document improvement38 □ Target: 50+ mobile score, under 3s LCPCommon mistakes
Why it's a problem: Optimizing before measuring the baseline
How to avoid: Run PageSpeed Insights and browser DevTools Network analysis before making any changes, and document the results
Why it's a problem: Using :filtered instead of search constraints on Repeating Groups
How to avoid: Convert :filtered operations to Do a Search for constraints wherever the filter can be expressed as a database constraint
Why it's a problem: Keeping plugins installed just in case they might be needed later
How to avoid: Delete unused plugins immediately. They can always be reinstalled later if actually needed.
Best practices
- Remove unused plugins — this is the single highest-impact optimization
- Compress images before uploading and use thumbnails in lists
- Keep page element count under 100-150 for fast rendering
- Use search constraints instead of :filtered for Repeating Groups
- Pre-compute values like counts and averages as database fields
- Convert static Data Types to Option Sets for zero-cost loading
- Paginate Repeating Groups to 10-20 items per page
- Measure performance before and after each optimization with PageSpeed Insights
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
My Bubble.io app loads slowly. It has 15 plugins, several large Repeating Groups, and unoptimized images. What are the most impactful optimizations I can make to improve loading speed?
Audit my app's performance: list all installed plugins I can remove, identify Repeating Groups that use :filtered instead of constraints, and find Data Types that should be converted to Option Sets. Then optimize the main dashboard page for faster loading.
Frequently asked questions
What is a good PageSpeed Insights score for a Bubble app?
Most Bubble apps score 30-50 on mobile due to framework overhead. A score above 50 is good, and above 70 is excellent for a Bubble app. Focus on improving LCP and reducing JavaScript payload.
Why do plugins slow down every page even if they are only used on one?
Bubble loads all plugin JavaScript and CSS on every page regardless of usage. There is no per-page plugin loading. This means 15 plugins add their combined code to every single page load.
How many elements per page is too many?
Performance starts degrading around 100-150 elements. Complex pages with 300+ elements can become noticeably slow, especially on mobile devices with less processing power.
Does Bubble have built-in caching?
Bubble caches Option Sets on the client and provides automatic database search caching for unchanged data. For API responses, you need to implement your own caching by storing results in the database.
Can RapidDev help optimize my Bubble app's performance?
Yes. RapidDev can perform a comprehensive performance audit, identify bottlenecks, implement optimizations, and measure improvements for your Bubble app, often achieving 2-3x faster load times.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation