How to Optimize Your Pages for Faster Loading and Improved Performance

Using the Style Guide in ClickFunnels helps you maintain consistent design across your pages while optimizing performance. Instead of customizing individual elements, the Style Guide allows you to define global styles, such as fonts, colors, and button designs, that are applied automatically across your workspace.

How the Style Guide Improves Page Optimization:

• Reduces Inline Styles: By using the Style Guide, you avoid adding repetitive, inline styles for each element, resulting in cleaner and more efficient code.

• Streamlines Design Consistency: Centralized styling ensures a cohesive look and reduces the need for manual adjustments on individual elements, saving time and effort.

• Improves Loading Times: With fewer custom styles being applied to individual elements, the overall CSS for your page is lighter, leading to faster load times.

Learn more about the style guide in the Getting Started with Styles article.

Fonts are essential for creating a polished design, but overusing them can negatively affect your page's performance. In ClickFunnels, each font used must be downloaded by the browser, and excessive fonts can slow down loading times.

Best Practices for Fonts in ClickFunnels:

• Follow Industry Standards: Industry best practices recommend using no more than two to three font families and limiting font styles (e.g., regular, bold, italic) to keep your page lightweight and efficient.

• Leverage the Style Guide: Use the ClickFunnels Style Guide to set global fonts across your workspace, reducing redundant font styling for individual elements.

• Limit Custom Fonts: Rely on default fonts or optimized web-safe fonts when possible, as they load faster than custom or heavily styled fonts.

Images play a crucial role in your page design, but unoptimized images can significantly slow down loading times. To ensure your pages load quickly, follow these standard recommendations:

• For general use: Keep image sizes under 500 KB whenever possible.

• For larger visuals (e.g., banners or hero images): Aim for 1MB or less while preserving quality.

• For thumbnails and icons: Keep these files under 150 KB to optimize performance.

Tips for Optimizing Images:

• Compress Images: Use tools like TinyPNG, Squoosh, or ImageOptim to reduce file sizes without sacrificing quality.

• Resize for Placement: Ensure images are appropriately scaled for their use on the page. For instance, full-width banners should be 1920px wide, while smaller images can be scaled down.

• Choose the Right Format:

  • WebP: Highly recommended for all images. ClickFunnels supports WebP, which offers superior compression without losing quality. WebP files are significantly smaller than JPEG and PNG, resulting in faster page loads.

  • PNG: Best for graphics with transparency or sharp edges but tends to have larger file sizes.

  • JPEG: Suitable for photographs and complex images without transparency. JPEG files are smaller than PNG but less efficient than WebP.

Learn more about adding images in the page editor in the Image: Adding and Managing Images article.

The Quality setting in ClickFunnels lets you balance image resolution and page performance by controlling compression levels. Reducing image quality decreases file size, which can improve page loading speed, especially on mobile devices or for users with slower internet connections.

How to Use the Quality Setting Effectively:

• High Quality (80%+): Use for product images or key visuals, like banners, where details matter. Clear, high-resolution images help showcase intricate details, building trust and enhancing conversions.

• Medium Quality (50-70%): Ideal for supporting visuals or secondary images, where some compression won't affect the user experience.

• Low Quality (below 50%): Best for decorative images or backgrounds that don't require sharp details, helping to reduce page load times.

Lazy loading helps improve page speed by loading images and videos only when they are about to appear on the user’s screen. This reduces the initial page load time and improves performance, especially on media-heavy pages.

How to Enable Lazy Loading in ClickFunnels:

• For Images:

  1. Add an Image element to your page.

  2. Open the image settings by clicking the gear icon.

  3. Toggle the Lazy Loading option to "On."

• For Videos:

  1. Add a Video element and provide a video URL or embed code.

  2. Locate the Lazy Loading option in the video settings and turn it "On."

Learn more about lazy loading in the How to Lazy Load Images and Videos article.

The amount of content you add to your page - such as sections, rows, and elements, can impact its loading speed. Keeping your content concise and purposeful enhances performance and creates a cleaner, more focused experience for your visitors.

Tips for Structuring Your Content:

1. Prioritize Essential Content: Add only the content that supports your page’s goal, such as key headlines, call-to-action buttons, or important visuals. Avoid overloading the page with secondary or non-critical elements that might distract users.

2. Avoid Repeating Similar Sections: Instead of duplicating sections and repeating the same content in multiple places, include it only once. For example, if you have a testimonial section in the middle of the page, avoid duplicating it at the footer. This keeps the page lighter and avoids redundancy.

3. Use Minimal Media: While images, videos, and animations can enhance your design, overusing them can slow down the page. Use them sparingly and ensure they serve a specific purpose, such as illustrating a key point or engaging the user.

4. Keep Layouts Simple: Opt for a clean and focused design with fewer nested rows and columns. Complex layouts can increase the browser’s processing time and lead to slower page performance.

Duplicating sections specifically for mobile or desktop views can negatively impact your page speed. Even if a section is hidden for one device, it still loads in the background, increasing the page size and slowing down its performance. This can result in longer load times, especially on mobile devices with slower internet connections.

Alternative Solutions:

• Use Flex Layout: The Flex layout in ClickFunnels allows you to control the positioning and visibility of elements for different screen sizes without creating duplicate sections. For example, you can adjust alignment, spacing, and visibility within a single layout, simplifying the design process. Learn more about Flex container here.

• Custom CSS: With a few lines of custom CSS, you can hide or adjust specific elements for mobile or desktop views. This approach avoids duplicating entire sections while achieving the same result.

Tips:

Before creating duplicate sections, evaluate whether you can achieve your desired design using a Flex layout or CSS. These techniques help streamline your page structure and improve overall loading speed.

Unused or hidden contents (sections/rows/elements) still load in the background, affecting performance.

How to Identify Hidden Content:

• Use the Editor Layout Navigation in ClickFunnels to easily view all sections, rows, and elements on your page, including any that are marked as "hidden."
  

• Hidden content may include sections created for testing or content no longer in use but still present in the design.

What to Do Next:

• If you find elements or sections that are no longer necessary, remove them to reduce the page size and speed up loading.

• Review each hidden element to decide if it still serves a purpose or if it can be deleted entirely.

Animations can add visual appeal to your page and enhance user engagement, but excessive or unoptimized animations can negatively impact page performance. Animations often rely on additional CSS or JavaScript, which increases the browser's workload and can slow down loading times, especially on mobile devices.

How Animations Affect Page Speed:

• Multiple or complex animations require more processing power, leading to slower rendering and negatively affecting user experience.

• Excessive animations may cause delays, particularly on devices with slower hardware or internet connections.

Adding external code, such as custom CSS or JavaScript, can enhance your page's design and functionality, but excessive or unnecessary code can significantly slow down your page’s performance.

1. Reduce External Code That Affects Page Load

   • External scripts, such as third-party widgets or tracking tools, can increase load times as they rely on external servers.

   • Use only the essential scripts for your page, and test their impact on page speed with tools like Google PageSpeed Insights.

2. Avoid Excessive CSS Code

   • Large amounts of custom CSS can increase page size and processing time, particularly if poorly optimized.

   • To reduce the need for custom code, keep your CSS concise and use built-in page editor design elements in ClickFunnels wherever possible.

3. Limit Tracking Code in the Site Header and Footer

   • The Site app Header and Footer areas in ClickFunnels apply to all pages in your workspace, including funnels, landing pages, blogs, and more. Adding unnecessary tracking scripts here can slow down every page in your workspace.

Best Practices for Tracking Code:

• Include only essential tracking codes in the Site app header/footer, such as Google Analytics or Facebook Pixel.

• Add the required script directly to that page for page-specific tracking or functionality instead of applying it to Site app settings.

iFrames can be useful for embedding external content, such as calendars, forms, or third-party tools, directly onto your page. However, overusing iFrames or embedding heavy content can negatively impact page speed. This is because iFrames load their own set of resources (HTML, CSS, JavaScript) independently, increasing the overall load time of your page.