Page Optimization Feature

For more information about SEO Checker, please visit the article here.

What is Page Optimization Feature?

Page Optimization is a new feature in GemPages that helps you identify and fix potential issues affecting your page’s loading speed and how it displays, all before publishing. Think of it as a pre-flight check to make sure your page is fast, stable, and looks great on any device. 

Many factors impact page speed, but this feature will focus on the two most critical:

1. Fonts Loading

GemPages automatically checks which fonts you are actually using on the page and loads only those, removing any unused fonts. This reduces page weight and ensures text renders quickly and accurately.

• It compares the fonts in the Editor with those already loaded by Shopify on the live site.
• The system generates a minimal set of required fonts and skips duplicates.
• The result is faster text rendering, consistent appearance, and overall lighter pages.

2. Preloading Sections

This ensures the content “above the fold” (what users see first) is optimized for first load time and displays correctly on desktop, tablet, and mobile devices.

• GemPages detects the sections that appear in the Editor’s first viewport.
• It preloads those sections and adds one extra section (+1) to account for live screens that may be taller than the Editor viewport.
• It also calculates section dimensions and sets the correct loading order to prevent layout shifts on desktop, tablet, and mobile.

Optimizing these areas is crucial because page speed directly impacts user experience, SEO, and conversions. Faster pages reduce bounce rates, improve Google rankings, and help visitors engage with your content immediately, which can ultimately increase sales.

How to Use Page Optimization in GemPages

Step 1: Open the Page

Open the page you want to optimize inside the GemPages Editor.

Step 2: Access Page Optimization

Scroll down the Editor panel until you see a tip box titled Page Optimization, then click Show Me. 

This opens the Sidebar showing:

• Page Speed
• SEO Checker

This article focuses on Page Speed optimization. For more information about the SEO Checker, please refer to the article: SEO Checker.

Step 3: Review Issues

If any issues are detected, a yellow badge will appear, showing the total number of unresolved items. Click on the badge to view detailed information about each issue.

These include:

• Fonts Loading (e.g., font family/ font styles/font weights not optimized)
• Preloading Sections (e.g., unoptimized sections on desktop/tablet/mobile)

Step 4: Optimize Your Page

Font Loading: Click the Optimize button under Font Loading. GemPages will process the optimization automatically. 

Here’s what happens behind the scenes:

• GemPages compares the fonts used in your Editor page with the fonts already loaded by Shopify on your live page.
• It extracts only the unique font faces that are actually used on the page.
• When the page is published, GemPages skips loading any fonts Shopify has already loaded, avoiding duplication.

Once the process is complete, the Optimize button will be disabled.

Preloading Sections: Click the Optimize button under Preloading Sections. 

Then the system performs the Optimize preload sections process following:

• GemPages calculates which sections appear in the Editor’s first viewport (above the fold). 
• To ensure accurate display on live pages, it also preloads one additional section (+1) beyond what’s visible in the Editor. The system sets the correct load order and dimensions to prevent layout shifts on desktop, tablet, and mobile. 

After the optimization process is finished, the Optimize button will be disabled.

If you try to publish a page with unresolved optimization issues, a popover will appear warning you. You can either:

• Click Review to go directly to Page Speed and address the issues.
• Close the popover by clicking Save and Publish. It will not remind you again for this page.