Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Performance: Cache script data in a transient for production builds #9120

Merged
merged 8 commits into from
Jun 16, 2023

Conversation

mikejolley
Copy link
Member

Adds caching to asset src, dependencies, and file version lookups to prevent the same data being requested on each page load. Values are stored in transients, and invalidated when the plugin package version increases. Development builds are excluded from caching to prevent issues when developing blocks.

Fixes #8796

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

Mainly testing for regressions, so check that frontend scripts load correctly and existing blocks continue to function. Note; development builds do not use the cache.

  1. Run npm run start for a development build.
  2. Check cart/checkout blocks load normally on the frontend.
  3. Run npm run build for a production build.
  4. Check cart/checkout blocks load normally on the frontend.

To see the contents of the transient, when running a production build (and assuming you are using WP Local), open database > adminer and check the wp_options table for the option named _transient_woocommerce_blocks_asset_api_script_data. It should contain JSON containing the list of assets/dependencies etc.

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Positive; unsure how to get accurate metrics, but in limited testing with query monitor, a few seconds were shaved off of page load times. The original issue claimed 10% improvement.

Changelog

Improved the performance of loading frontend assets through the use of caching.

@mikejolley mikejolley added the focus: performance The issue/PR is related to performance. label Apr 19, 2023
@mikejolley mikejolley self-assigned this Apr 19, 2023
@mikejolley mikejolley added the type: cooldown Things that are queued for a cooldown period (assists with planning). label Apr 19, 2023
@woocommercebot woocommercebot requested review from a team and wavvves and removed request for a team April 19, 2023 15:00
@github-actions
Copy link
Contributor

github-actions bot commented Apr 19, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9120.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 467
  • Total errors: 2254

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Apr 19, 2023

Size Change: 0 B

Total Size: 1.1 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.65 kB
build/active-filters-wrapper-frontend.js 7.61 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 12 kB
build/all-products.js 40 kB
build/all-reviews.js 7.85 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.04 kB
build/attribute-filter-wrapper-frontend.js 4.29 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 254 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.51 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.9 kB
build/cart.js 45.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.19 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 332 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.85 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 32 kB
build/checkout.js 46.4 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8.04 kB
build/legacy-template.js 6.46 kB
build/mini-cart-component-frontend.js 28.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.73 kB
build/mini-cart-contents-block/empty-cart-frontend.js 362 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 4.09 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 593 B
build/mini-cart-contents-block/shopping-button-frontend.js 526 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents.js 18 kB
build/mini-cart-frontend.js 2.66 kB
build/mini-cart.js 4.43 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-filter.js 8.55 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 250 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.52 kB
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.35 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 954 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 3.97 kB
build/product-categories.js 2.71 kB
build/product-category.js 9.36 kB
build/product-collection.js 9.89 kB
build/product-image-frontend.js 2.62 kB
build/product-image.js 4.14 kB
build/product-new.js 8.65 kB
build/product-on-sale.js 8.68 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.69 kB
build/product-query.js 11.8 kB
build/product-rating-frontend.js 2.27 kB
build/product-rating.js 971 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.79 kB
build/product-sale-badge.js 665 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku.js 536 B
build/product-stock-indicator-frontend.js 2.03 kB
build/product-stock-indicator.js 730 B
build/product-summary-frontend.js 2.19 kB
build/product-summary.js 904 B
build/product-tag.js 9.01 kB
build/product-template.js 3.35 kB
build/product-title-frontend.js 2.21 kB
build/product-title.js 3.66 kB
build/product-top-rated.js 8.91 kB
build/products-by-attribute.js 9.75 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.2 kB
build/rating-filter.js 6.89 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.18 kB
build/single-product.js 11.1 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/stock-filter.js 7.61 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 5.96 kB
build/wc-blocks-editor-style.css 5.96 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 27.9 kB
build/wc-blocks-style.css 27.8 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65 kB
build/wc-blocks.js 3.7 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 30.4 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@wavvves
Copy link
Contributor

wavvves commented Apr 21, 2023

@mikejolley might be unrelated, but ran the E2E several times, and everytime all 5 failed. The errors are common flaky test output I've seen on other branches, but usually we don't get an 100% failure rate 🤔

@mikejolley mikejolley force-pushed the performance/cache-asset-data-8796 branch from 77638fe to bc6fb8e Compare April 28, 2023 13:55
@mikejolley
Copy link
Member Author

Any ideas @wavvves ? I can't see anything that would break tests but clearly something is up :/

@wavvves
Copy link
Contributor

wavvves commented May 1, 2023

Any ideas @wavvves ? I can't see anything that would break tests but clearly something is up :/

The output seems to have changed, and now has some complaints about undefined array entries bringing up the env. I have some urgent tasks to get going right now, but we can pair during this week on this 👍🏼

@mikejolley mikejolley force-pushed the performance/cache-asset-data-8796 branch 3 times, most recently from 8df495e to e17a317 Compare May 10, 2023 12:51
@mikejolley
Copy link
Member Author

Still can't work this out @wavvves Gonna leave it until next cooldown.

@wavvves
Copy link
Contributor

wavvves commented May 10, 2023

Still can't work this out @wavvves Gonna leave it until next cooldown.

I'm clueless also. Yes, after wrapping templates up, I'll assist on this during the cooldown and see what might be interfering with tests

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label May 18, 2023
@ralucaStan ralucaStan marked this pull request as draft May 25, 2023 18:57
@ralucaStan
Copy link
Contributor

Converting this PR to draft, feel free to revert once it's ready for review.

@mikejolley mikejolley force-pushed the performance/cache-asset-data-8796 branch from a33460d to 74bf448 Compare June 1, 2023 08:51
@mikejolley
Copy link
Member Author

All fixed! Ready for review.

@mikejolley mikejolley marked this pull request as ready for review June 1, 2023 12:24
@mikejolley mikejolley added status: needs review and removed status: stale Stale issues and PRs have had no updates for 60 days. labels Jun 1, 2023
@woocommercebot woocommercebot requested a review from a team June 1, 2023 12:24
@mikejolley mikejolley requested review from a team and removed request for a team June 1, 2023 12:24
@github-actions
Copy link
Contributor

github-actions bot commented Jun 9, 2023

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Jun 9, 2023
@mikejolley mikejolley removed the status: stale Stale issues and PRs have had no updates for 60 days. label Jun 12, 2023
@github-actions github-actions bot added this to the 10.5.0 milestone Jun 14, 2023
@mikejolley mikejolley merged commit 6b9955d into trunk Jun 16, 2023
@mikejolley mikejolley deleted the performance/cache-asset-data-8796 branch June 16, 2023 11:21
@gigitux gigitux added the type: enhancement The issue is a request for an enhancement. label Jun 19, 2023
gigitux added a commit that referenced this pull request Aug 9, 2023
gigitux added a commit that referenced this pull request Aug 9, 2023
…builds" (#10509)

* Revert "Performance: Cache script data in a transient for production builds (#9120)"

This reverts commit 6b9955d.

* fix WordPress version

* fix version
gigitux added a commit that referenced this pull request Aug 9, 2023
…builds" (#10509)

* Revert "Performance: Cache script data in a transient for production builds (#9120)"

This reverts commit 6b9955d.

* fix WordPress version

* fix version
gigitux added a commit that referenced this pull request Aug 9, 2023
…builds" (#10509)

* Revert "Performance: Cache script data in a transient for production builds (#9120)"

This reverts commit 6b9955d.

* fix WordPress version

* fix version
gigitux added a commit that referenced this pull request Aug 9, 2023
* Revert "Performance: Cache script data in a transient for production builds" (#10509)

* Revert "Performance: Cache script data in a transient for production builds (#9120)"

This reverts commit 6b9955d.

* fix WordPress version

* fix version

* update version to 10.6.5

* update changelog and testing instructions

* update zip link

* fix changelog

---------

Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: performance The issue/PR is related to performance. type: cooldown Things that are queued for a cooldown period (assists with planning). type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Enhancement]: 10-12% of improvement in total execution time for woocommerce (profiled & achieved)
4 participants