From 12d0112760cc2ce51374221289eead332e17f499 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 10 Oct 2019 15:12:16 +0200
Subject: [PATCH 1/2] [docs] Lazy load landing page images

---
 docs/src/modules/components/HomeSteps.js |  3 +++
 docs/src/modules/components/HomeUsers.js | 24 +++++++++++++++++-------
 docs/src/modules/components/backers.md   | 10 +++++-----
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
index fd7da54340d174..8c3b369e3132c7 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/docs/src/modules/components/HomeSteps.js
@@ -205,6 +205,9 @@ function HomeSteps(props) {
                 className={classes.img}
                 alt="themes"
                 src={`/static/images/themes-${theme.palette.type}.jpg`}
+                loading="lazy"
+                width={500}
+                height={307}
               />
             </NoSsr>
           </Link>
diff --git a/docs/src/modules/components/HomeUsers.js b/docs/src/modules/components/HomeUsers.js
index e9528ed3721a3a..0c5ba33e20fd2f 100644
--- a/docs/src/modules/components/HomeUsers.js
+++ b/docs/src/modules/components/HomeUsers.js
@@ -13,34 +13,46 @@ import Typography from '@material-ui/core/Typography';
 const users = [
   {
     logo: 'nasa.svg',
+    logoWidth: 49,
+    logoHeight: 40,
     caption: 'NASA',
   },
   {
     logo: 'walmart-labs.svg',
+    logoWidth: 253,
+    logoHeight: 48,
     caption: 'Walmart Labs',
     class: 'walmart',
   },
   {
     logo: 'capgemini.svg',
+    logoWidth: 180,
+    logoHeight: 40,
     caption: 'Capgemini',
   },
   {
     logo: 'uniqlo.svg',
+    logoWidth: 40,
+    logoHeight: 40,
     caption: 'Uniqlo',
   },
   {
     logo: 'bethesda.svg',
+    logoWidth: 196,
+    logoHeight: 29,
     caption: 'Bethesda',
-    class: 'noDescenders',
   },
   {
     logo: 'jpmorgan.svg',
+    logoWidth: 198,
+    logoHeight: 40,
     caption: 'J.P. Morgan',
   },
   {
     logo: 'shutterstock.svg',
     caption: 'Shutterstock',
-    class: 'noDescenders',
+    logoWidth: 205,
+    logoHeight: 29,
   },
 ];
 
@@ -60,14 +72,9 @@ const styles = theme => ({
   },
   img: {
     margin: theme.spacing(1.5, 3),
-    height: 40,
-  },
-  noDescenders: {
-    height: 29,
   },
   walmart: {
     margin: theme.spacing(1.1, 3, 1.5),
-    height: 48,
   },
 });
 
@@ -93,6 +100,9 @@ function HomeUsers(props) {
                 src={`/static/images/users/${user.logo}`}
                 alt={user.caption}
                 className={clsx(classes.img, classes[user.class])}
+                loading="lazy"
+                width={user.logoWidth}
+                height={user.logoHeight}
               />
             ))}
           </Grid>
diff --git a/docs/src/modules/components/backers.md b/docs/src/modules/components/backers.md
index 55e78f3948a3df..7b6e4b281df10d 100644
--- a/docs/src/modules/components/backers.md
+++ b/docs/src/modules/components/backers.md
@@ -11,17 +11,17 @@ Gold Sponsors are those who have pledged $500/month and more to Material-UI.
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="creative-tim" href="https://www.creative-tim.com/?partner=104080" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="126" src="https://github.com/creativetimofficial.png?size=126" alt="creative-tim" title="Premium Themes"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Get Professionally Supported Material-UI"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="blokt" href="https://blokt.com/" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://material-ui.com/static/images/blokt.jpg" alt="blokt" title="Leading Cryptocurrency News"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="creative-tim" href="https://www.creative-tim.com/?partner=104080" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="126" src="https://github.com/creativetimofficial.png?size=126" alt="creative-tim" title="Premium Themes" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Get Professionally Supported Material-UI" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="blokt" href="https://blokt.com/" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://material-ui.com/static/images/blokt.jpg" alt="blokt" title="Leading Cryptocurrency News" loading="lazy"></a>
 </p>
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
   <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener nofollow" target="_blank" style="margin-right: 16px;">
-    <img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group">
+    <img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width=100 loading="lazy">
   </a>
 </p>
 

From 1dabd421e8d13f40c1e84ccf7c828bb77b11f0be Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 10 Oct 2019 15:48:31 +0200
Subject: [PATCH 2/2] Eager load themes

---
 docs/src/modules/components/HomeSteps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
index 8c3b369e3132c7..6e58f0c9715fec 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/docs/src/modules/components/HomeSteps.js
@@ -205,7 +205,7 @@ function HomeSteps(props) {
                 className={classes.img}
                 alt="themes"
                 src={`/static/images/themes-${theme.palette.type}.jpg`}
-                loading="lazy"
+                loading="eager"
                 width={500}
                 height={307}
               />