Skeleton Mode displays lightweight placeholder shapes while page content is loading. These placeholders—known as skeleton screens—give users an immediate visual structure of the page, reducing perceived loading time and improving user experience. Instead of a blank white screen, visitors see grey or neutral-toned blocks that represent text, images, and layout areas.
When loading completes, skeleton placeholders fade out and are replaced by the actual page content.
What is Skeleton Screens?
Skeleton screens are temporary UI placeholders displayed during content loading. They improve usability by:
- Reducing perceived loading time
- Preventing layout shifts
- Providing visual context while the page loads
- Creating a smoother loading flow for product grids, blogs, and quick views
Skeleton screens are designed using simple CSS gradients, making them extremely lightweight. When enabled, they can reduce the perceived loading time by up to 90–95%, especially on content-heavy shop pages.
How to Enable Skeleton Screens
To activate skeleton screens:
- Navigate to Porto → Theme Options → General → Show Skeleton Screens
-
Choose where skeleton mode should appear. You will find four toggle sets:
- Shop Pages
- Product Page
- Product Quickview
- Blog Pages
Enable skeleton mode for any or all of these page types based on your site’s needs.
Known Compatibility Considerations
If a plugin delays image or HTML rendering using JavaScript, it may
- Prevent skeleton placeholders from displaying
- Cause skeletons to remain visible too long
- Introduce layout shifts after skeletons fade
Best Practices
- Enable skeleton mode for shop pages and quickview for maximum UX improvement.
- Avoid using skeleton mode alongside third-party template replacement plugins.
- Customize placeholder gradients to match your site’s color palette.
- Use browser dev tools to preview gradient changes before applying globally.
