DigiBlocks is designed for performance, but various factors can impact page loading speed. This guide covers common causes and solutions for slow loading pages when using DigiBlocks.
Common Causes of Slow Loading
Large CSS and JavaScript Files
DigiBlocks generates individual CSS and JavaScript files for each post containing blocks. When posts have many blocks with complex styling, these files can become large.
Solution: Navigate to DigiBlocks > Settings and use the Regenerate All Assets feature. This process minifies CSS and JavaScript files, removing unnecessary whitespace and comments to reduce file sizes.
Google Fonts Loading Method
The method used to load Google Fonts significantly impacts loading speed. DigiBlocks offers two options:
CDN Loading (Default): Fonts load from Google’s servers. While reliable, this adds external requests that can slow initial page loads.
Local Fonts: Fonts are downloaded and served from your server. This eliminates external requests but increases server storage and initial setup time.
To change font loading method:
- Go to DigiBlocks > Settings
- Find Google Fonts Settings
- Toggle Download Google Fonts Locally based on your preference
- Click Regenerate All Assets after changing this setting
External API Dependencies
Several DigiBlocks features rely on external services:
- Google Maps API for map blocks
- Google reCAPTCHA for form protection
- Image APIs (Unsplash, Pexels, Pixabay) for image search
- Newsletter platforms for subscription forms
Each external service adds loading time. Consider disabling unused integrations in the settings.
Animation Libraries
When using Lottie animations or block entrance animations, additional JavaScript libraries load automatically. While these enhance user experience, they increase initial page weight.
Optimization: Use animations sparingly and only where they add significant value to the user experience.
Orphaned Asset Files
Over time, deleted or modified posts may leave behind unused CSS and JavaScript files in the uploads directory.
Solution: The Regenerate All Assets feature automatically cleans up orphaned files, removing assets for posts that no longer exist or no longer contain DigiBlocks.
Diagnosing Performance Issues
Identifying Large Asset Files
Check your site’s /wp-content/uploads/digiblocks/ directory for file sizes. Files larger than 50KB may benefit from optimization.
Browser Developer Tools
Use your browser’s Network tab to identify which resources take longest to load:
- Open Developer Tools (F12)
- Go to the Network tab
- Reload your page
- Sort by loading time to identify bottlenecks
Plugin Conflicts
Temporarily deactivate other plugins to determine if conflicts exist. Common conflicts occur with:
- Other block editor plugins
- Performance optimization plugins
- Caching plugins
Optimization Strategies
Block Usage Optimization
Review your pages for unnecessary blocks. Each active block adds to the generated CSS and JavaScript files. Remove blocks that don’t serve a clear purpose.
Font Optimization
If using many different fonts or font weights, consider:
- Limiting font families to 2-3 maximum
- Using only necessary font weights (regular, bold)
- Choosing system fonts when possible
Image Optimization
While DigiBlocks doesn’t directly handle image optimization, ensure images used in blocks are:
- Properly sized for their display context
- Compressed appropriately
- Using modern formats like WebP when possible
Conditional Loading
DigiBlocks loads handlers conditionally. For example, the forms handler only loads when form blocks are present on a page. This automatic optimization helps, but you can further optimize by:
- Removing unused block types in DigiBlocks > Dashboard > Block Manager
- Avoiding blocks that require external APIs when not necessary
Asset Regeneration Process
When experiencing performance issues, regenerating assets often resolves problems:
- Navigate to DigiBlocks > Settings
- Find the Assets Management section
- Click Regenerate All Assets
- Wait for the process to complete
This process:
- Scans all posts and pages
- Recreates CSS and JavaScript files
- Minifies all generated code
- Removes orphaned files
- Processes font files if local fonts are enabled
Advanced Troubleshooting
Server-Level Optimization
If performance issues persist, consider server-level optimizations:
- Enable GZIP compression
- Use a content delivery network (CDN)
- Implement browser caching
- Optimize database queries
Caching Plugin Configuration
When using caching plugins, ensure they’re configured to:
- Cache CSS and JavaScript files
- Exclude DigiBlocks admin pages from caching
- Clear cache after regenerating assets
Large Website Considerations
For websites with hundreds of pages using DigiBlocks:
- Monitor the
/wp-content/uploads/digiblocks/directory size - Consider regular asset regeneration maintenance
- Implement automated cleanup processes if needed
The asset regeneration feature includes progress tracking for large sites, showing the number of posts processed and files created during the optimization process.