menu
close

How to Configure & Test Page Speed

Gathering Page Speed Score Baselines & Understanding Page Speed Performance

Prior to enabling Huckabuy’s Page Speed and configuring it to optimize your site it is recommended that you gather Lighthouse scores for various URLs on your site to understand the impact of Huckabuy’s Page Speed.


Begin by selecting a few URLs that are important to your business, for example the site’s home page, a product page, or any other page you know is slow. Run a Google Lighthouse report or Page Speed Insights, both mobile and desktop, for the selected pages. Recording the Lighthouse scores and checking the “Opportunities” section will give you a good idea of what Page Speed boosters and enhancements could be turned on to improve the site, i.e. “Minify CSS & Javascript”, “Reduce Javascript Execution Time”. Now that you have a baseline of page speed scores you can enable Huckabuy’s Page Speed and begin to configure it to your site.

After you have enabled and configured Page Speed you can run new Lighthouse reports for your selected URLs to analyze the performance and understand the impact of our product.

Configuring Huckabuy’s Page Speed

The Page Speed view of the Huckabuy Dashboard provides all enhancements and boosters available for configuration on your site. The Sitewide Page Speed Settings section at the bottom of page provides a list of enhancements and their description/impact, these can be applied across your site by toggling on and off.

Route Based Page Speed Enhancements

With these configurations you can add various enhancements to individual URLs or URL routes to boost page speed impact. Each enhancement can be toggled on and off, offers a description with its impact, and allows advanced settings customizing the enhancement for compatibility with your site.

Adding Route Based Included URLs

  • Create the URL pattern you would like configured. Adding an * (asterisk) will create a wildcard and apply that configuration to all pages following the URL route. i.e. “/*” applies to the entire website and “/products/*” will apply to the product pages.

Note: If multiple overlapping include routes are added then the more advanced configuration will apply to the specified route and will not impact the other route’s configuration. For example if all boosters are added to the site wide route of “/*” and then only some boosters are added to the “/products/*” wildcard route then the product pages will have the boosters as configured with that route and not the ones configured for the site wide wildcard of “/*” . Toggle on the enhancements and add the advanced settings you would like to apply for the specified route.

  • Click “Prepare Live Preview” and the “Open Live Preview” to inspect a page with the selected enhancements prior to apply the live configuration. When viewing the live preview inspect the page visually and within Developer Tools Console for errors to ensure that the created configuration is compatible with your site. If errors occur, continue testing within Live Preview after toggling on/off the enhancements.

Example Error: Enabling Defer Media without including ignore classes when lazy load is utilized on your site will disable images from loading.

  • Once the desired compatible configuration is created you can apply it by selecting “Update” within the Include Route config view.

Adding Route Based Excluded URLs

This allows you to create a URL or URL pattern that you don’t want Page Speed to be applied to. Perhaps you want to exclude login/paywalled/etc. content from configuration, you can do so by adding an Exclude URL path.

eCommerce websites need to add cart and checkout flows as excluded URLs, this is to ensure the transaction/checkout flow is not interrupted for visitors. When adding an exclude path for your cart and checkout flows be sure to add the appropriate wildcards, for example “/cart/*” or “/checkout/*”.

If your platform creates uniquely generate strings (IDs, version numbers, hashes, etc), for example /198589/checkout/, be sure to add the appropriate wildcard, like so /*/checkouts/*