How to enable skeleton screens

What is Skeleton Screens?

Skeleton screens are blank pages that will be progressively populated with content, such as text and images, as they become available. Grey or neutral-toned filled shapes, called placeholders, meet the user instantly upon user interaction with calls to action or links. The placeholders which we call as "Skeleton Screens" are then replaced with the actual site content after page loading completed and it is ready to display.

If we use skeleton screens, we can decrease page loading time up to 90 or 95 percent.

How to enable Skeleton Screens?

Please go to Porto -> Theme Options -> General -> Show Skeleton Screens.
You can find four button sets: Shop Pages, Product Page, Product Quickview and Blog Pages.
We can enable skeleton screens for these four pages by selecting them.

How to customize (draw or build) skeletons?

Each skeletons are drawn using css "background-image: linear-gradient". You can find its code in "Skeleton screen" section in style.php.
If you want to change default product skeleton in shop pages, you can use following css selector.
.products.skeleton-body li:before { background-image: linear-gradient... }