Cornerstone 2.0: Performance improvements #1229

mattolson · 2018-05-08T00:39:44Z

What?

The goal of this release is to improve frontend theme performance. This is the work of @mattolson, @junedkazi and @BC-EChristensen during the Stranger Hackings hackathon.

Remove Modernizr

Modernizr is a blocking script that has very little benefit for us. Removing this script improves page responsiveness.
We used Modernizr via the css classes csscolumns, flexbox, objectfit, and js.
The csscolumns class was used for productMasonry for older browsers, but since then all of our supported browsers support css columns. There is one small problem with Firefox: it does not support break-inside, but it does support page-break-inside, which does the same thing. See https://caniuse.com/#feat=multicolumn
The flexbox class is unused
The objectfit class is used by carousel. Reimplmented without using Modernizer. The previous implmentation put a background image on the wrapper div and then hid it if object-fit is supported. The new implementation does not put the background image on the wrapper div by default, but instead assumes that your browser supports object-fit (all ours do except for IE). For IE, we use javascript to copy the image source from the image tag to the background image of the wrapper div and then hide the image.
The js class is used for a few things in css, so mimic this behavior with a simple inline script.

Save space for carousel

Add wrapper div for hero carousel that has the appropriate height for the image to be displayed after lazy loading.
This improves frontend performance because the browser will be less likely to load images below the fold immediately.

Add dns prefetch hints

Add dns prefetch & preconnect to core resources that we know we will need (configured cdn and font providers). This uses a new helper resourceHints that was introduced in paper 2.0.8.

Webpack 4 & Javascript optimizations

Upgrade to webpack 4
Clean up stencil bootstrap
Simplify interface for PageManager and get rid of async library dependency
Get rid of html5-history-api library dependency (no longer needed)
Get rid of fastclick library dependency (no longer needed)
Upgrade several babel dependencies
Separate webpack config into common, dev, prod, and add npm scripts to build
Get rid of minifications in babel loader, instead rely on webpack
Get rid of LoaderOptionsPlugin
Get rid of CommonsChunkPlugin (webpack 4 will automaticaly do this for prod)

Inject svg via ajax

Use svg-injector to fetch the svg icon sprite rather than embed it directly on the page. This improves frontend performance because the icons will be cached after the first request and we reduce the page weight by about 28kb.
Move location of generated svg so it is retrievable by the frontend through the CDN.
Update svgstore grunt task

Reduce defaults for product counts

Reduce the default number of featured, new, and bestselling products on the home page.
These can always be updated in Theme Editor, but the defaults don't need to be so high.

Lazier image loading

Use laziest possible setting for images

Screenshots

Using lighthouse for benchmarking against a production store, I found the following:

Before

Desktop

Mobile

After

Desktop

Mobile

bigbot · 2018-05-08T00:39:45Z

Autotagging @bigcommerce/storefront-team @davidchin

bookernath · 2018-05-08T01:09:29Z

I'm not qualified to review this but I am totally stoked about it!

templates/layout/base.html

config.json

junedkazi · 2018-05-08T14:12:44Z

Also just want to confirm that the screenshots are correct. The time stamp for the before is later than the after if it makes sense 😜

tpietsch · 2018-05-08T15:22:57Z

assets/js/app.js

+                // Find the appropriate page loader based on pageType
+                const pageClassImporter = pageClasses[pageType];
+                if (typeof pageClassImporter === 'function') {
+                    const PageClass = (await pageClassImporter()).default;


i can speak for scala world when i say "Awaits" are not great. Not sure if its the same in JS tho

The async/await pattern is an alternate way of working with promises. await is essentially the same as Promise.then without all the code nesting. https://javascript.info/async-await

Does await get transpiled by stencil-cli?

Yeah, await is non-blocking in JS, so not like the Await object in Scala. Fun fact, there's an async/await macro library for Scala that does the same thing: https://github.com/scala/scala-async

It basically rewrites the code to use .map and .flatMap in the compiler.

@icatalina Yes, we are running everything through babel in stencil CLI.

const pageClass = await xx <-- how can this be async what if somone uses the pageClass val before the await is resolved?

RegisteredCustomerMessagesUITest::testRequiredFieldWhileCreatingMessage

same this.context undefined message

along with this updated (removed span)

const REQUIRED_MESSAGE_XPATH = '//textarea[@id = "message_content"]'; const REQUIRED_SUBJECT_XPATH = '//input[@id = "message_subject"]';

@tpietsch for the const pageClass = await xx example, it's simply sugar for using a promise.then, so it will not set the pageClass val until after the await is resolved. but it's non-blocking in that the thread is released when invoking await to handle other things.

it just kinda not my fave cause now you have a variable in scope that you can use where the value might change right? first its undef then its def and between that time it can be read from incorrectly
In a normal Promise(resolve -> resolve.data) <-- you are more explicit about when the data is being used here it seems like it could cause intermittent weirdness. And also the variable is declared as a const which i would expect as non-changing value

I believe Babel actually dumps a bunch of polyfill code in order to support async/await (it needs to support ES6 generator). Wouldn't this increase the file size, as you need both Promise and Generator instead of just Promise?

webpack.prod.js

webpack.common.js

tpietsch · 2018-05-08T15:28:42Z

noticed lots of VARS for the require dependecys that prob should be const right?

templates/layout/amp-iframe.html

templates/layout/base.html

mattolson · 2018-05-08T18:44:55Z

@junedkazi yes the screenshots are correct. I was switching back and forth between Cornerstone 1.17 and a custom theme based on this branch. I did Cornerstone 1.17 after my branch.

* Modernizr is a blocking script that has very little benefit for us. Removing this script improves page responsiveness. * We used Modernizr via the css classes `csscolumns`, `flexbox`, `objectfit`, and `js`. * The `csscolumns` class was used for productMasonry for older browsers, but since then all of our supported browsers support css columns. There is one small problem with Firefox: it does not support break-inside, but it does support page-break-inside, which does the same thing. See https://caniuse.com/#feat=multicolumn * The `flexbox` class is unused * The `objectfit` class is used by carousel. Reimplmented without using Modernizer. The previous implmentation put a background image on the wrapper div and then hid it if object-fit is supported. The new implementation does not put the background image on the wrapper div by default, but instead assumes that your browser supports object-fit (all ours do except for IE). For IE, we use javascript to copy the image source from the image tag to the background image of the wrapper div and then hide the image. * The `js` class is used for a few things in css, so mimic this behavior with a simple inline script.

danieldelcore · 2018-05-11T01:43:42Z

Glorious 👏 PR 👏 Description 👏

templates/layout/base.html

icatalina · 2018-05-11T01:54:03Z

assets/js/app.js

+                // Find the appropriate page loader based on pageType
+                const pageClassImporter = pageClasses[pageType];
+                if (typeof pageClassImporter === 'function') {
+                    const PageClass = (await pageClassImporter()).default;


Does await get transpiled by stencil-cli?

assets/scss/components/stencil/heroCarousel/_heroCarousel.scss

* Add wrapper div for hero carousel that has the appropriate height for the image to be displayed after lazy loading. * This improves frontend performance because the browser will be less likely to load images below the fold immediately.

* Add dns prefetch & preconnect to core resources that we know we will need -- fonts, cdn, jirafe, etc

mattolson · 2018-05-11T23:49:17Z

@icatalina ♻️

icatalina · 2018-05-13T23:56:03Z

hi @mattolson !

what about the await? #1229 (comment)

mattolson · 2018-05-15T14:10:23Z

@icatalina I already replied inline there -- we run everything through Babel as part of Stencil CLI.

assets/js/theme/account.js

config.json

tpietsch · 2018-05-17T21:23:23Z

assets/js/theme/page-manager.js

-                throw new Error(err);
-            }
+        $(document).ready(() => {
+            page.onReady.bind(page)();


how can you be sure this order doesnt matter?

I don't think you need to call bind because onReady is already bounded to page.

assets/js/theme/page-manager.js

* Upgrade to webpack 4 * Clean up stencil bootstrap * Simplify interface for PageManager and get rid of async library dependency * Get rid of html5-history-api library dependency (no longer needed) * Get rid of fastclick library dependency (no longer needed) * Upgrade several babel dependencies * Separate webpack config into common, dev, prod, and add npm scripts to build * Get rid of minifications in babel loader, instead rely on webpack * Get rid of LoaderOptionsPlugin * Get rid of CommonsChunkPlugin (webpack 4 will automaticaly do this for prod)

* Use svg-injector to fetch the svg icon sprite rather than embed it directly on the page. This improves frontend performance because the icons will be cached after the first request and we reduce the page weight by about 28kb. * Move location of generated svg so it is retrievable by the frontend through the CDN. * Update svgstore grunt task

* Reduce the default number of featured, new, and bestselling products on the home page. * These can always be updated in Theme Editor, but the defaults don't need to be so high.

* Use laziest possible setting for images

* Use `resourceHints` helper from paper 2.0.8, which looks up configured cdn and font providers.

config.json

Ubersmake · 2018-05-18T00:08:26Z

💚 Stencil regression suite has passed with the exception of those tests that hit the changed featured/new/popular product counts.

davidchin

This is exciting. It seems the changes really make a huge difference. 👏 I have a few small comments for you. Could you please take a look when you get a chance? Thanks!

.travis.yml

davidchin · 2018-05-18T00:25:36Z

assets/js/app.js

+                // Find the appropriate page loader based on pageType
+                const pageClassImporter = pageClasses[pageType];
+                if (typeof pageClassImporter === 'function') {
+                    const PageClass = (await pageClassImporter()).default;


I believe Babel actually dumps a bunch of polyfill code in order to support async/await (it needs to support ES6 generator). Wouldn't this increase the file size, as you need both Promise and Generator instead of just Promise?

davidchin · 2018-05-18T00:28:00Z

assets/js/theme/page-manager.js

-                throw new Error(err);
-            }
+        $(document).ready(() => {
+            page.onReady.bind(page)();


I don't think you need to call bind because onReady is already bounded to page.

assets/js/theme/common/carousel.js

davidchin · 2018-05-18T00:50:22Z

webpack.common.js


+// Common configuration, with extensions in webpack.dev.js and webpack.prod.js.
 module.exports = {


If file size is an issue, you might want to consider adding performance.maxEntrypointSize and set a limit on the maximum file size for every bundle. It would warn you if, in the future, you accidentally bundle a really large third party library.

webpack.prod.js

davidchin · 2018-05-18T00:59:46Z

webpack.dev.js

+    devtool: 'source-map',
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': 'development',


I'm not sure if this is needed for development. 🍹

webpack.common.js

package.json

mattolson · 2018-05-18T01:34:01Z

@davidchin I'm sorry, I didn't see your review prior to merging. I will address these comments in a future PR. We intend to continue to invest in Cornerstone performance.

davidchin · 2018-05-21T05:50:35Z

@mattolson no worries.

PeteyRev · 2018-05-25T04:24:10Z

@mattolson Super awesome. Cant wait to test this newest version out on our next client

bookernath reviewed May 8, 2018

View reviewed changes

templates/layout/base.html Outdated Show resolved Hide resolved

junedkazi reviewed May 8, 2018

View reviewed changes

config.json Show resolved Hide resolved

tpietsch reviewed May 8, 2018

View reviewed changes

webpack.prod.js Outdated Show resolved Hide resolved

tpietsch reviewed May 8, 2018

View reviewed changes

webpack.common.js Outdated Show resolved Hide resolved

mjschock reviewed May 8, 2018

View reviewed changes

templates/layout/amp-iframe.html Outdated Show resolved Hide resolved

junedkazi reviewed May 8, 2018

View reviewed changes

templates/layout/base.html Outdated Show resolved Hide resolved

icatalina requested changes May 11, 2018

View reviewed changes

christensenep and others added 2 commits May 11, 2018 16:47

STRF-4605: Add dns prefetch & preconnect

3d4d715

* Add dns prefetch & preconnect to core resources that we know we will need -- fonts, cdn, jirafe, etc

tpietsch reviewed May 17, 2018

View reviewed changes

assets/js/theme/account.js Show resolved Hide resolved

tpietsch reviewed May 17, 2018

View reviewed changes

config.json Show resolved Hide resolved

tpietsch reviewed May 17, 2018

View reviewed changes

assets/js/theme/page-manager.js Show resolved Hide resolved

mattolson and others added 5 commits May 17, 2018 15:04

STRF-4617: Reduce defaults for product counts

3a62b5c

* Reduce the default number of featured, new, and bestselling products on the home page. * These can always be updated in Theme Editor, but the defaults don't need to be so high.

STRF-4873: Lazier image loading

9a8d499

* Use laziest possible setting for images

STRF-4604: Configurable resource hints

4ee4620

* Use `resourceHints` helper from paper 2.0.8, which looks up configured cdn and font providers.

Ubersmake reviewed May 17, 2018

View reviewed changes

config.json Show resolved Hide resolved

icatalina approved these changes May 18, 2018

View reviewed changes

davidchin reviewed May 18, 2018

View reviewed changes

mattolson merged commit 3e7318d into bigcommerce:master May 18, 2018

mattolson deleted the 2.0 branch May 18, 2018 01:31

Ubersmake mentioned this pull request May 21, 2018

Added Cornerstone 2.0 to CHANGELOG.md #1244

Merged

mattolson mentioned this pull request Dec 1, 2018

Slimming down Javascript bundle #1390

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cornerstone 2.0: Performance improvements #1229

Cornerstone 2.0: Performance improvements #1229

mattolson commented May 8, 2018 •

edited

Loading

bigbot commented May 8, 2018

bookernath commented May 8, 2018

junedkazi commented May 8, 2018 •

edited

Loading

tpietsch May 8, 2018

mattolson May 8, 2018

icatalina May 11, 2018 •

edited

Loading

zackangelo May 11, 2018

mattolson May 11, 2018

tpietsch May 17, 2018

tpietsch May 17, 2018 •

edited

Loading

mjschock May 17, 2018

tpietsch May 17, 2018 •

edited

Loading

davidchin May 18, 2018

tpietsch commented May 8, 2018

mattolson commented May 8, 2018

danieldelcore commented May 11, 2018

icatalina May 11, 2018 •

edited

Loading

mattolson commented May 11, 2018

icatalina commented May 13, 2018 •

edited

Loading

mattolson commented May 15, 2018

tpietsch May 17, 2018

davidchin May 18, 2018

Ubersmake commented May 18, 2018

davidchin left a comment

davidchin May 18, 2018

davidchin May 18, 2018

davidchin May 18, 2018

mattolson Dec 1, 2018

davidchin May 18, 2018

mattolson commented May 18, 2018

davidchin commented May 21, 2018

PeteyRev commented May 25, 2018


		// Common configuration, with extensions in webpack.dev.js and webpack.prod.js.
		module.exports = {

Cornerstone 2.0: Performance improvements #1229

Cornerstone 2.0: Performance improvements #1229

Conversation

mattolson commented May 8, 2018 • edited Loading

What?

Remove Modernizr

Save space for carousel

Add dns prefetch hints

Webpack 4 & Javascript optimizations

Inject svg via ajax

Reduce defaults for product counts

Lazier image loading

Screenshots

Before

Desktop

Mobile

After

Desktop

Mobile

bigbot commented May 8, 2018

bookernath commented May 8, 2018

junedkazi commented May 8, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

icatalina May 11, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tpietsch May 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tpietsch May 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tpietsch commented May 8, 2018

mattolson commented May 8, 2018

danieldelcore commented May 11, 2018

icatalina May 11, 2018 • edited Loading

Choose a reason for hiding this comment

mattolson commented May 11, 2018

icatalina commented May 13, 2018 • edited Loading

mattolson commented May 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ubersmake commented May 18, 2018

davidchin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mattolson commented May 18, 2018

davidchin commented May 21, 2018

PeteyRev commented May 25, 2018

mattolson commented May 8, 2018 •

edited

Loading

junedkazi commented May 8, 2018 •

edited

Loading

icatalina May 11, 2018 •

edited

Loading

tpietsch May 17, 2018 •

edited

Loading

tpietsch May 17, 2018 •

edited

Loading

icatalina May 11, 2018 •

edited

Loading

icatalina commented May 13, 2018 •

edited

Loading