koodiklinikka/koodiklinikka.fi
1
0
Fork 0
mirror of https://github.com/koodiklinikka/koodiklinikka.fi.git synced 2026-01-26 11:23:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix some performance issues

Browse Source 
* 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 ca5b251c7c
8 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Feed.tsx
View File

@@ -34,7 +34,7 @@ export default class Feed extends React.Component {
render() {
const messages = this.state.messages.map((message, i) => {
let image = <img src={message.image} alt="" />;
let image = <img src={message.image} alt="" loading="lazy" />;
if (message.imageLink) {
image = (

1
components/Footer.tsx
View File

@@ -14,6 +14,7 @@ const SponsorLink = ({ href, name }: Props) => (
src={`/static/images/sponsors/${name.toLowerCase()}.svg`}
alt={name}
className={`sponsor sponsor__${name.toLowerCase()}`}
loading="lazy"
/>
</a>
);

10
components/Members.tsx
View File

@@ -23,7 +23,15 @@ export default class Members extends React.Component {
const members = this.state.members.map((member) => {
const src = `${member.avatar_url}&s=120`;
return (
<img className="member" key={member.avatar_url} src={src} alt="" />
<img
className="member"
key={member.avatar_url}
src={src}
alt=""
width={30}
height={30}
loading="lazy"
/>
);
});

1
package.json
View File

@@ -27,7 +27,6 @@
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-ga": "^3.1.2",
"react-stripe-checkout": "^2.6.3",
"react-time-ago": "^6.0.1",
"stylus": "^0.54.7",
"twitter-text": "^3.0.0"

2
pages/_document.tsx
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>
);

9
pages/index.tsx
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>
);

8
styles/style.styl
View File

@@ -185,14 +185,6 @@ section:first-child
height 70px
margin auto
.stripe-form
margin 20px 0px
.name
margin-top 20px
text-align left
display block
color rgba(0, 0, 0, 0.4)
@keyframes drop
0%
transform rotateX(90deg)

5
yarn.lock
View File

@@ -4868,11 +4868,6 @@ react-refresh@0.8.3:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
react-stripe-checkout@^2.6.3:
version "2.6.3"
resolved "https://registry.yarnpkg.com/react-stripe-checkout/-/react-stripe-checkout-2.6.3.tgz#3173a870b04e5a3c321a06d24cd53c6030111c45"
integrity sha1-MXOocLBOWjwyGgbSTNU8YDARHEU=
react-time-ago@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/react-time-ago/-/react-time-ago-6.0.1.tgz#b84bd67d796a6e220739fc6ad3d46eaa305ac3c2"