How fast a grid appears depends on how many items it loads at first, how large their images are, and when it starts. The Loading page of the grid editor sets when the grid starts and how its images load; the Content page sets the image sizes; Global Settings › Performance holds the cache and the scripts for every grid.
Lazy loading
The row Lazy loading on the Loading page:
| Setting | What it does |
|---|---|
| Start in view | On for a new grid: the grid starts, and plays its entrance effect, when it scrolls into the window, not when the page loads. |
| Lazy loading | Off for a new grid. On, the items’ images load as they come near the window, not all with the page. |
| Blur on load | With lazy loading, on the classic front end: a blurred image shows until the image has loaded. New 4.0 grids show the loading colour instead. |
| Loading colour | With lazy loading: the colour behind an image while it loads. |
Loading indicator
The section Loading indicator on the Loading page sets what shows while the grid loads, as tiles: Off, Skeleton and Line. Skeleton shows placeholder cards in the grid’s layout, with a soft shimmer, until the items come; Line runs a thin line along the grid’s top edge. A new grid starts with Skeleton. Indicator colour tints the line and the placeholder cards (left at its default white, they take the grid’s text colour). With reduced motion, the shimmer and the line stand still.
A grid made before 4.0 keeps its spinner: it shows as one more tile, such as Classic · Spinner 3, for as long as the grid keeps it. The new and the classic front end both draw Skeleton and Line. The Loading page also holds the entrance effect (Motion).
Image sizes
The Content page’s row Media decides which image of an item the grid uses and in which size:
| Setting | What it does |
|---|---|
| Large screens | The WordPress image size for desktops, such as Medium Large or Original Size. |
| Smaller on phones | On, phones get the smaller size below. |
| Size on phones | The image size for phones. |
| Fallback image | Shown in items without an image of their own (Choose Image, Remove Image). Without one, the fallback image of Global Settings › Images & video shows. |
Above them, Media order lists what an item can show in the grid (its featured image, a YouTube, Vimeo, Wistia or HTML5 video, a SoundCloud track, an alternate image, iframe markup, or the first image, video or iframe of its content), in the order the grid tries them.
Choose the smallest size that still looks sharp at your grid’s column width. An image several times wider than its column costs loading time and looks no better.
Global Settings › Performance
| Setting | What it does |
|---|---|
| Grid cache | Stores the posts a grid asks for and the finished grid, so grids load faster. Clear grid cache empties it; clear it after you change a grid or its posts. For advanced users. |
| Load scripts in the footer | Loads Essential Grid’s scripts at the end of the page instead of in its head. |
| Troubleshooting › Output protection, Verify requests | For conflicts with themes and caching plugins; leave them as they are unless support asks you to change them. |
What the new front end loads
New 4.0 grids are built to load little:
- every image is a real image with its sizes for each screen, its width and height, and the browser’s own lazy loading; the first row loads first;
- a grid loads only the parts it uses: filters, pages, the lightbox, video and motion each load only when the grid has them;
- a video loads nothing from YouTube, Vimeo, Wistia or SoundCloud until a visitor plays it.
Good to know
- How many items a grid shows at first is the strongest lever: see Items at start and Rows per page in Pagination, Load more and placement.
- The settings search of Global Settings finds only global settings; lazy loading and image sizes live in each grid’s editor.
- Videos in the grid: Video in grids.