StackCP Web Optimisation Tool: Automatic Image & Asset Compression Guide

Large, unoptimised images and bloated CSS/JavaScript are among the most common reasons ordinary websites load slowly. StackCP includes a built-in tool — officially called the Website Acceleration Suite, shown in your dashboard as Web Optimisation — that automatically applies dozens of performance best practices to your site, without needing a developer or a stack of plugins.

This guide explains what it actually does, how to turn it on, and how to understand the settings.

What Is Web Optimisation, and Why Does It Matter?

When you upload a photo to your website, it's often far larger than it needs to be for web display. Every visitor who loads that page has to download the full file, which slows things down, especially on mobile connections. Similarly, your website's CSS and JavaScript files often carry extra whitespace, comments, and redundant code that add weight without adding function.

StackCP's Web Optimisation tool addresses this at the server level — meaning it works without installing multiple browser plugins, and reducing your reliance on plugins itself helps your site's PHP performance. It's included at no extra charge with Web Hosting, WordPress Hosting, Reseller Hosting, Agency Hosting, and Managed Hosting packages.

The core capabilities are:

• Automatic image resizing — scanning your images and resizing them appropriately for mobile and desktop.
• Image compression — compressing images "on the fly," removing non-essential data without a visible quality loss.
• Next-gen image formats — converting images to faster-loading formats like JPEG 2000, JPEG XR, and WebP.
• Code minification — compressing HTML, CSS, and JavaScript to reduce parsing and execution time.
• Lazy loading — deferring off-screen images and non-critical resources so above-the-fold content appears faster.

Why This Matters for Your Business

• Directly targets Google PageSpeed Insights recommendations. Each optimisation is designed to complement the specific audits PageSpeed Insights runs, helping you achieve a higher score without manually implementing each fix.
• Mobile visitors benefit most, since every megabyte saved matters more on mobile data connections.
• No ongoing effort required. Once enabled, it applies automatically going forward.

Step 1: Locate Web Optimisation in StackCP

1. Log in to your StackCP dashboard.
2. Go to Manage Hosting, then select Manage on the package you want to optimise.
3. Select Web Optimisation.

Step 2: Apply the Recommended Settings with One-Click Optimisation

The simplest way to get started:

1. On the Web Optimisation screen, select One Click Optimisation.
2. This applies a recommended set of optimisation filters in one action, without you needing to understand or configure each one individually.

For most beginners, this is the right starting point — it's built to reflect what Google PageSpeed Insights actually checks for.

Step 3: Understanding "Filters" — What's Actually Being Applied

Each individual optimisation in this tool is referred to as a filter. There are over 40 available, grouped into four categories:

HTML Optimisation — includes filters like Collapse Whitespace (removes redundant spacing), Remove Comments, Trim URLs, Extend Cache (improves how long resources can be cached without breaking updates), and Pre-Resolve DNS (hints to the browser to resolve DNS for page resources earlier).

JavaScript Optimisation — includes Minify JavaScript (strips whitespace and comments), Combine JavaScript (merges multiple files into fewer requests), Defer JavaScript (delays non-critical scripts so they don't block rendering), and Canonicalize JavaScript Libraries (swaps common libraries for versions hosted on a fast, shared CDN).

CSS Optimisation — includes Combine CSS, Inline CSS (for small stylesheets), Move CSS To <head>, and Prioritize Critical CSS (inlines only the styles needed to render what's immediately visible, deferring the rest).

Image Optimisation — includes Optimize Images (recompression, format conversion, and dimension reduction combined), Resize Images, Lazyload Images, Convert to WEBP Lossless, Responsive Images (adds srcset for different screen densities), and Insert Image Dimensions (adds width/height attributes to prevent layout shift).

You don't need to understand every filter individually — One Click Optimisation applies a sensible recommended combination — but knowing the categories helps you make sense of what you're seeing if you choose to review or adjust individual settings later.

Step 4: Reviewing and Adjusting Individual Filters (Optional)

If you want more control than One Click Optimisation provides:

1. On the Web Optimisation screen, browse the full list of filters by category (HTML, JavaScript, CSS, Image).
2. Toggle individual filters on or off based on your needs. For example, if your site relies on inline JavaScript event handlers in a way that behaves unexpectedly after minification, you can disable just that specific filter while leaving the rest active.
3. Save your changes.

This level of control is optional — most websites do well with the recommended one-click settings and never need to adjust individual filters.

Step 5: Save Your Settings as a Template for Other Sites

If you manage multiple websites — which is common for a hosting reseller's customers, or for an agency managing several client sites — you can save your chosen optimisation settings as a named template and apply it to other packages, rather than reconfiguring each site individually. This is a genuinely useful time-saver if you find a filter combination that works well and want consistent performance settings across your portfolio of sites.

Step 6: Measure the Impact

1. Open Google PageSpeed Insights or GTmetrix.
2. Test a page on your site containing several images.
3. Review the "Properly size images" and "Minify CSS/JavaScript" sections — these should now show as resolved or show much smaller potential savings than before.
4. Compare against a prior test if you have one.

Common Mistakes Beginners Make

• Assuming you need to configure all 40+ filters manually. One Click Optimisation exists specifically so you don't have to — use it as your starting point.
• Uploading enormous original images and assuming optimisation fixes everything. Automatic resizing helps considerably, but starting with a sensible image size before uploading (where practical) still helps overall.
• Not testing after enabling filters that touch JavaScript, since a small number of complex, poorly coded scripts can occasionally behave differently after minification or deferral — this is uncommon but worth a quick click-through check on key pages after enabling.
• Not saving a template if you manage several sites, and instead manually reconfiguring each one.

Troubleshooting

"A slider or interactive element on my site stopped working." Check whether a specific JavaScript filter (like Defer JavaScript or Combine JavaScript) is the cause by disabling it individually rather than turning off optimisation entirely, then retest.

"I don't see any file size improvement." Confirm One Click Optimisation (or your chosen filters) is genuinely applied and saved, and allow a short time for it to take effect across your CDN nodes.

"I manage multiple sites and don't want to configure each one separately." Use the template feature — configure your ideal settings once, save as a template, and apply it to your other packages.

A Closer Look at a Few High-Impact Filters

Not all 40+ filters carry equal weight for a typical small business site. A few are worth understanding specifically because of how much they tend to move the needle:

Optimize Images is effectively an all-in-one filter — it performs recompression, converts to optimal formats, reduces dimensions where appropriate, and inlines small images directly into HTML or CSS where that's faster than a separate request. For most sites, this single filter accounts for the majority of the total page-weight savings.

Lazyload Images defers loading of images that aren't yet visible in the browser's viewport, meaning a long product listing page or image-heavy blog post only loads what's actually on-screen initially, with the rest loading as the visitor scrolls. This has an outsized effect on initial load time for content-heavy pages.

Prioritize Critical CSS identifies just the CSS rules needed to render what's immediately visible, inlines those, and defers the rest — meaningfully improving how quickly a page appears to load, even before every stylesheet has finished downloading.

Combine JavaScript and Combine CSS reduce the total number of separate file requests a browser has to make, which matters because each individual request carries its own overhead, particularly on mobile networks with higher latency.

When You Might Want to Turn Off a Specific Filter

The Website Acceleration Suite is built to be safe by default, and most websites can run every recommended filter without issue. The main scenario where you might want to disable a specific filter is if it interferes with a complex, custom function on your site — for example, a JavaScript-heavy interactive tool that behaves unexpectedly after combination or deferral. In that case, rather than disabling optimisation broadly, identify and toggle off just the specific filter causing the conflict, leaving the rest of your performance gains intact.

Managing Optimisation Across Multiple Customer Sites

If you're managing hosting for several customers rather than a single website, the template feature described in Step 5 becomes especially valuable. Rather than manually applying One Click Optimisation and then adjusting individual filters for each customer's site separately, you can build a single, well-tested configuration once, save it as a named template, and roll it out consistently across your portfolio. This is particularly useful if you find that a specific filter needs to be disabled for a common platform you host frequently (for example, a particular WordPress theme or plugin combination that behaves oddly under one specific filter) — you can build that exception into your template once, rather than rediscovering and fixing it separately for every affected customer site.