Only load required scripts and CSS

[fredericalpers]

Current state

Currently all JavaScript and CSS files provided by the plugin are always loaded. This worsens the performance of websites. Also it can cause conflicts with Themes, Builders and Plugins used by external customers and their developers/designers. For our projects we use the WordPress Dequeue Function. However this is not always an option for all customers, especially external customers who are working on the website themselves or with other developers/designers.

Investigate

Investigate if and how we can provide and load the Script and CSS files only if necessary.

Desired state

The JavaScript and CSS files should only be loaded when necessary.

[dai-eastgate]

Hi @fredericalpers, I checked in the code and see that we have 24 working js files, of which:

• There are 10 files which I can use specific conditions to check and only load required scripts
• There are 14 files only working in admin which I can't use specific conditions to check, we can add asynchronous loading attribute and load only in the backend
• There are 8 files only working in front-end which I can't use specific conditions to check, we can add asynchronous loading attribute and load only in the front-end
• For 2 files which is both working in backend and front-end, we can add asynchronous loading attribute and keep the loading position of those files in as currently.
  Please let us know your opinion about that. Thanks!

[fredericalpers]

@dai-eastgate I will come back to you with an answer as soon as possible

[fredericalpers]

@dai-eastgate Please go ahead and implement the suggested solution. If possible please document the performance improvements before and after.

[dai-eastgate]

@dai-eastgate Please go ahead and implement the suggested solution. If possible please document the performance improvements before and after.

OK, I got it. Thanks!

[dai-eastgate]

@fredericalpers I need 6 days to implement and test because we have changed a lot of files. Thanks

[dai-eastgate]

@fredericalpers
A. After implementation, I have some changes compared to the original as follows:

1. In the Backend: We still keep the loading position of the files
2. In the Frontend: I have refactored these files:

• Estate List: There are 4 files that only load when necessary:
  onoffice-sort-list-selector.js
  onoffice-custom-select.js
  onoffice-form-preview.js
  onoffice-multiselect.js (async)

• Detail View and Similar estate:
  onoffice_defaultview.js
  slick.js (defer)

• Contact form, Interest form, Owner form: There are 4 files that only load when necessary:
  onoffice-custom-select.js
  onoffice-multiselect.js (async)
  onoffice-estatetype.js(async)
  onoffice-leadform.js

• Applicant Search Form: There are 5 files that only load when necessary:
  onoffice-custom-select.js
  onoffice-multiselect.js (async)
  onoffice-estatetype.js(async)
  onoffice-leadform.js
  onoffice-form-preview.js

B. I have added asynchronous properties for 3 files: onoffice-estatetype.js, onoffice-multiselect.js and slick.js. Here are evidence videos of 8 files that I have refactored (The features will be the same as the master branch).

1. onoffice-sort-list-selector.js: https://files.fm/u/yuwy4v2xf
2. onoffice-custom-select.js: https://files.fm/u/w5hw556e3
3. onoffice-form-preview.js: https://files.fm/u/vye4vnk8k
4. onoffice-multiselect.js: https://files.fm/u/dfkd3unwx
5. onoffice-estatetype.js: https://files.fm/u/b4gb4jp4p
6. onoffice-leadform.js: https://files.fm/u/dfs7jygs9
7. onoffice_defaultview.js: https://files.fm/u/byg7a8b6a
8. slick.js: https://files.fm/u/yy34t7azq
   Note: I found "onoffice-multiselect.js" file has been removed in version v2.10.0
   => We have refactored the load of that file when necessary. However, to test this file please use the version from v2.9.0 or older.

C. Here are some documents on the performance improvements before and after refactoring the code