Improve performance home page (codesandbox#2677)

yeion7 · SaraVieira · commit 68f402300848 · 2019-10-07T16:01:03.000+02:00
* Ensure text remains visible during webfont load

* not blocking render with search doc

* use lazy load native
diff --git a/packages/homepage/gatsby-browser.js b/packages/homepage/gatsby-browser.js
@@ -0,0 +1,10 @@
+exports.onClientEntry = () => {
+  (function addDocSearch() {
+    const path = `https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css`;
+    const link = document.createElement(`link`);
+    link.setAttribute(`rel`, `stylesheet`);
+    link.setAttribute(`type`, `text/css`);
+    link.setAttribute(`href`, path);
+    document.head.appendChild(link);
+  })();
+};
diff --git a/packages/homepage/gatsby-config.js b/packages/homepage/gatsby-config.js
@@ -68,6 +68,7 @@ module.exports = {
           `source sans pro:300,400,500,600,700`,
           'open sans:300,400',
         ],
+        display: 'swap',
       },
     },
     {
diff --git a/packages/homepage/src/components/Companies.js b/packages/homepage/src/components/Companies.js
@@ -26,7 +26,12 @@ export default ({ companies }) => (
           rel="noopener noreferrer"
           aria-label={`${company.name} is using CodeSandbox`}
         >
-          <img height="150" src={company.logoURL} alt={company.name} />
+          <img
+            height="150"
+            src={company.logoURL}
+            alt={company.name}
+            loading="lazy"
+          />
         </a>
       </div>
     ))}
diff --git a/packages/homepage/src/html.js b/packages/homepage/src/html.js
@@ -14,10 +14,6 @@ export default function HTML(props) {
           name="viewport"
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
-        <link
-          rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
-        />
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes}>
@@ -32,7 +28,7 @@ export default function HTML(props) {
         />
         {props.postBodyComponents}
         {JS_NPM_URLS.map(url => (
-          <script key={url} src={url} />
+          <script key={url} src={url} defer />
         ))}
       </body>
     </html>
diff --git a/packages/homepage/src/screens/home/NPMFeature/EmbedAnimation/index.js b/packages/homepage/src/screens/home/NPMFeature/EmbedAnimation/index.js
@@ -75,6 +75,7 @@ export default class EmbedAnimation extends React.PureComponent {
           alt="Browser"
           style={{ boxShadow: '0 5px 8px rgba(0, 0, 0, 0.3)' }}
           src={browserSvg}
+          loading="lazy"
         />
         <AbsoluteImage
           ref={el => {
diff --git a/packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js b/packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js
@@ -57,6 +57,7 @@ const SearchInput = () => {
           style={{ marginTop: '1rem' }}
           width={160}
           src={algoliaImage}
+          loading="lazy"
         />
       </a>
     </div>
diff --git a/packages/homepage/src/screens/home/Patron/index.js b/packages/homepage/src/screens/home/Patron/index.js
@@ -68,7 +68,12 @@ export default () => (
 
         <Content>
           <Badge>
-            <img width={200} src={getBadge('patron_4')} alt="Patron IV" />
+            <img
+              width={200}
+              src={getBadge('patron_4')}
+              alt="Patron IV"
+              loading="lazy"
+            />
           </Badge>
           <Button target="_blank" rel="noreferrer noopener" href="/patron">
             Open Patron Page

Original file line number	Diff line number	Diff line change
`@@ -68,6 +68,7 @@ module.exports = {`
`68`	`68`	`source sans pro:300,400,500,600,700`,
`69`	`69`	`'open sans:300,400',`
`70`	`70`	`],`
	`71`	`+ display: 'swap',`
`71`	`72`	`},`
`72`	`73`	`},`
`73`	`74`	`{`