Fix some performance issues

* Remove render blocking stripe JS that seems unnecessary
* Use native lazy loading of images
  - Truly a progressive enhancement, only affects browsers that support it
  - Causes a warning: [Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323, which can not be easily fixed
* Render content first, hydrate after that
This commit is contained in:
Olavi Haapala
2019-11-02 21:14:32 +02:00
committed by Aarni Koskela
parent fb4fb44ef6
commit bec251c4e6
8 changed files with 17 additions and 21 deletions

View File

@@ -34,11 +34,11 @@ class MyDocument extends Document {
<div className="site">
<div className="container">
<Main />
<NextScript />
</div>
<Footer />
</div>
<Fader />
<NextScript />
</body>
</Html>
);

View File

@@ -50,7 +50,7 @@ const IndexContent = () => (
-yhteisöömme
</h3>
<div className="form">
<InviteForm />
<InviteForm/>
</div>
<p className="code-of-conduct">
Ennen liittymistä yhteisöömme varmista, että olet lukenut yhteisön{" "}
@@ -88,6 +88,7 @@ const IndexContent = () => (
<img
src="/static/images/slack.png"
alt="Slack app at Koodiklinikka"
loading="lazy"
/>
</a>
</div>
@@ -200,7 +201,7 @@ const IndexContent = () => (
</div>
</section>
<div id="feed">
<Feed />
<Feed/>
</div>
</div>
</>
@@ -211,8 +212,8 @@ const Index = () => (
<Head>
<title>Koodiklinikka</title>
</Head>
<Hero />
<IndexContent />
<Hero/>
<IndexContent/>
</React.Fragment>
);