Reduce Layout shifts, Inline Styling - Set fixed height/width where possible

[arslanashraf7]

Pre-Flight checklist

• Testing
  • Code is tested
  • Changes have been manually tested

What are the relevant tickets?

Related to #2065

What's this PR do?

Attempts to optimize the Catalog & Product Pages through suggestions provided by Lighthouse

• Sets fixed styling(height/width) for the elements where possible to avoid layout shifts.
• Adds lazy loading to the images where possible.
• Defers a Zendesk script

How should this be manually tested?

Open any of the Catalog/Product and check the statistics on LightHouse, Make sure that the page loads in a better amount of time than before. Make sure that we caught maximum possible suggestions through Lighthouse regarding images layout shifts, setting height/width of images.

[codecov-io]

Codecov Report

Merging #2075 (10436f2) into master (d5ac020) will decrease coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #2075      +/-   ##
==========================================
- Coverage   88.00%   87.99%   -0.02%     
==========================================
  Files         328      328              
  Lines       14767    14767              
  Branches     1031     1031              
==========================================
- Hits        12996    12994       -2     
- Misses       1532     1534       +2     
  Partials      239      239              

Impacted Files	Coverage Δ
static/js/components/TopAppBar.js	100.00% <ø> (ø)
static/js/components/UserMenu.js	100.00% <ø> (ø)
static/js/containers/pages/ReceiptPage.js	100.00% <ø> (ø)
cms/models.py	91.18% <100.00%> (ø)
static/js/components/forms/BulkEnrollmentForm.js	90.62% <0.00%> (-1.57%)	⬇️
...tic/js/components/forms/BulkEnrollmentForm_test.js	98.73% <0.00%> (-1.27%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d5ac020...10436f2. Read the comment docs.

[arslanashraf7]

This change just reuses the queryset that we created above for Program and Course Pages, Plus we were not checking for .live() while obtaining the Featured Product.

[gsidebo]

I'd recommend getting rid of the other PR that this is rebased on, and just keeping this PR. It's not necessarily in our interests to break these performance PRs up by CMS page. The performance improvements in general are strongly linked to each other, and there are limited examples of improvements that are only relevant to these specific pages.

[gsidebo]

@arslanashraf7 Could you split this into 2 pull requests? (1) should contain the lazy div loading code. (2) should contain everything else. I'm concerned that that lazy div loading opens us up to weird/buggy behavior for questionable performance gains. We can set that lazy div loading PR to "On Hold", and we can review/merge it if it seems like our other less-risky changes are not having the desired effect

[arslanashraf7]

@gsidebo I Totally agree with you, I was also very much inclined towards the division of this PR. I'll divide this PR into two and also check if there are more elements in general where we could improve layout shifts.

As for division, I'll keep all the Non lazy div loading changes in this PR(Will update the title), and move out all the lazy div related changes into a new one with Hold label.

[arslanashraf7]

@gsidebo I've divided this PR as per above mentioned comment, All the lazy load div related changes have been moved to #2090.

[gsidebo]

Pages load as expected. Ship it! 👍

[gsidebo]

(Sorry, let's try that again...) Pages load as expected. Ship it! 👍