Prestashop: Page speed optimization

[krystian-3c]

Describe the bug

I'm using PrestaShop 1.7 default theme.
I'm optimizing my site using Google Insights (chrome Lighthouse).
I'm stuck with the last two issues:

• Remove unused code (js)
• Remove unused CSS

Could you address these issues?
Any tips on how I could do it by myself?
For example, I tried to serve Bootstrap CSS from CDN and removed it from the build process. Assets build finished successfully but still, some on-site styles were broken.
Any other ideas?

Additional information

• PrestaShop version: 1.7.6.2

[prestashop-issue-bot[bot]]

Thanks for opening this issue! We will help you to keep its state consistent

[NeOMakinG]

Hello @krystian-3c
Unfortunately, we use bootstrap SCSS vars in order to build the assets :

This means that using a CDN for bootstrap is more difficult, maybe you can try to use the CDN on these imports inside theme.scss of classic theme but I doubt this is possible, not sure! Otherwise, you'll break some UI because we don't have these SCSS vars !

For the JS, maybe you can provide more informations so we can try to help you ?

Thanks

[krystian-3c]

At the moment I searched for some easy wins with JS.
I removed velocity.js it's used only once and It can be easily replaced with some CSS animation.
I removed, tether, and bootstrap from the bundle and I fetched it from CDN.
I'm also fetching jquery-ui from CDN.

I'm still getting the "Remove unused code" (js) but suggested time-savings dropped significantly.

[matks]

Really cool !

[krystian-3c]

In the case of CSS, we could cut some bites by importing only used bootstrap styles/components.
But I'm not 100% sure, that I didn't cut too much.
Instead of:

@import "~bootstrap/scss/bootstrap";

I'm thinking about something like:
```// Core variables and mixins
@import "~bootstrap/scss/custom";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Reset and dependencies
@import "~bootstrap/scss/normalize";
@import "~bootstrap/scss/print";

// Core CSS
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";

// Components
//@import "~bootstrap/scss/animation";
@import "~bootstrap/scss/dropdown";
//@import "~bootstrap/scss/button-group";
//@import "~bootstrap/scss/input-group";
//@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb";
//@import "~bootstrap/scss/pagination";
//@import "~bootstrap/scss/tags";
//@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
//@import "~bootstrap/scss/progress";
//@import "~bootstrap/scss/media";
//@import "~bootstrap/scss/list-group";
//@import "~bootstrap/scss/responsive-embed";
@import "~bootstrap/scss/close";

// Components w/ JavaScript
@import "~bootstrap/scss/modal";
//@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";

// Utility classes
@import "~bootstrap/scss/utilities";
```

I've commented out elements that seemed to be unused.

[NeOMakinG]

@krystian-3c Thanks for all the search work you've done.

I'm gonna take a look at it, make some tests...

But, I've a doubt, importing bootstrap like you do instead of like we do at te moment is probably a breaking change !

The classic theme doesn't use some feature, but maybe themes based on it does :/ WDYT @PrestaShop/prestashop-core-developers ?

[matks]

But, I've a doubt, importing bootstrap like you do instead of like we do at te moment is probably a breaking change !

The classic theme doesn't use some feature, but maybe themes based on it does :/ WDYT @PrestaShop/prestashop-core-developers ?

I confirm. Many themes use Classic Theme as a base and might use features in this list. We cannot remove them without creating a BC break.

This is the one of the reasons why some people hate frameworks: because they embed a lot of stuff as the target audience might need them, but every member of this audience will not use 100% of the embedded features.

If however we can see a huge optimization boost resulting from this change, what we can do is to make it a flaggable behavior. We could create an option inside the BO called "Theme assets optimization" that would be enabled ON by default, and merchant can decide to turn it off.

When this setting is turned off, only the required elements are loaded. So it would be this list for Classic Theme, and other Themes would be able to provide their own list.

As this would make this PR a lot more complicated 😛 let's first check how much valuable this change is. Maybe it's not worth it.