Hyperspeed Documentation

website·Indexed 36 days ago

https://docs.hyperspeed.me

Guides and troubleshooting for Hyperspeed's Shopify speed optimization tools, including image compression, lazy loading, theme updates, and cache rebuilding.

Tokens
6.6K
Snippets
3
Records
65
Agent score
57%

What's inside Hyperspeed

  1. Understand automatic optimization for new Shopify content

    Hyperspeed automatically optimizes new content added via the Shopify admin based on your enabled settings:

    • Images: New product images and images added to the theme's assets folder are compressed if image compression is enabled.
    • Apps: New apps are deferred automatically if app optimization is enabled.
    • Theme Customizer: New sections and blocks are optimized because they use existing optimized code.
    • Product Descriptions: New images in product descriptions are LazyLoaded if Product Description LazyLoad is enabled.
  2. Optimize images with LazyLoading and Responsive Image Sizes

    Hyperspeed provides two primary image optimizations:

    1. LazyLoading: Loads images only as they are about to enter the viewport, reducing the initial page load weight.
    2. Responsive Image Sizes: Serves the most appropriately sized image based on the display area (e.g., loading a 300px wide image for a 300px space instead of a 1000px image), which saves bandwidth and increases speed.
  3. Run the initial speed optimization onboarding wizard

    Upon first launch, Hyperspeed provides an onboarding wizard to optimize your store. The process consists of the following steps:

    1. Introduction: Initial welcome screen.
    2. Optimize Your Images: Configure image compression settings and start the optimization process.
    3. Choose Theme Optimization Options: Select specific theme optimizations to enable. This step generates a preview and does not modify the live theme immediately.
    4. Preview Your Optimized Theme: After 5-10 minutes, review the generated preview. Verify that images load correctly, sliders function, the 'add to cart' feature works, and the visual layout is preserved. If issues occur, return to the options step to disable specific features.
    5. Publish Your Optimizations: Select 'Publish' to make the changes live on your store.
  4. Choose the Hyperspeed Essential Plan for basic speed optimization

    The Essential plan is designed for new stores, small businesses, and those starting their speed optimization journey. It provides fundamental tools to improve site speed and SEO rankings with a 'set it and forget it' approach.

    Pricing: $49/mo (20% discount available with annual billing).

    Included Features:

    • LazyLoad & responsive theme images
    • Shopify app optimization
    • Critical CSS extraction & inlining
    • Font caching & optimization
    • JS & CSS minification
    • Predictive page preloading
    • Classic image compression
    • Email support (24-hour response time)
  5. Choose the Hyperspeed Enterprise Plan for high-traffic and Shopify Plus stores

    The Enterprise plan provides a white-glove experience with dedicated engineering support, tailored for high-traffic stores, Shopify Plus merchants, and complex speed challenges.

    Pricing: $600+/mo plus a $2,000 one-time setup fee. Includes 300,000 pageviews per month; additional pageviews are billed at $2.00 per 1,000.

    Included Features:

    • All Professional plan features
    • Extreme custom theme optimization
    • Dedicated account manager
    • Widget performance optimization (e.g., reviews, chat, conversion tools)
    • Custom code audit & cleanup
    • Ongoing custom optimizations tailored to the specific store
  6. Improve site performance by reducing third-party scripts and heavy media

    To reduce page weight and improve load times, implement the following changes:

    • Remove unnecessary third-party scripts. Contact app support teams to ensure code is fully removed from the theme upon uninstallation.
    • Replace homepage slideshows or carousels with a single static image to avoid JavaScript overhead and improve Core Web Vitals.
    • Remove videos and GIFs, replacing them with static images or external links to prevent pages from becoming too heavy.