koodiklinikka/koodiklinikka.fi
1
0
Fork 0
mirror of https://github.com/koodiklinikka/koodiklinikka.fi.git synced 2026-03-14 14:04:06 +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 bec251c4e6
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() { render() {
const messages = this.state.messages.map((message, i) => { 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) { if (message.imageLink) {
image = ( image = (

1
components/Footer.tsx
View File

@@ -14,6 +14,7 @@ const SponsorLink = ({ href, name }: Props) => (
src={`/static/images/sponsors/${name.toLowerCase()}.svg`} src={`/static/images/sponsors/${name.toLowerCase()}.svg`}
alt={name} alt={name}
className={`sponsor sponsor__${name.toLowerCase()}`} className={`sponsor sponsor__${name.toLowerCase()}`}
loading="lazy"
/> />
</a> </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 members = this.state.members.map((member) => {
const src = `${member.avatar_url}&s=120`; const src = `${member.avatar_url}&s=120`;
return ( 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": "^16.11.0",
"react-dom": "^16.11.0", "react-dom": "^16.11.0",
"react-ga": "^3.1.2", "react-ga": "^3.1.2",
"react-stripe-checkout": "^2.6.3",
"react-time-ago": "^6.0.1", "react-time-ago": "^6.0.1",
"stylus": "^0.54.7", "stylus": "^0.54.7",
"twitter-text": "^3.0.0" "twitter-text": "^3.0.0"

2
pages/_document.tsx
View File

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

9
pages/index.tsx
View File

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

8
styles/style.styl
View File

@@ -185,14 +185,6 @@ section:first-child
height 70px height 70px
margin auto 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 @keyframes drop
0% 0%
transform rotateX(90deg) 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" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== 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: react-time-ago@^6.0.1:
version "6.0.1" version "6.0.1"
resolved "https://registry.yarnpkg.com/react-time-ago/-/react-time-ago-6.0.1.tgz#b84bd67d796a6e220739fc6ad3d46eaa305ac3c2" resolved "https://registry.yarnpkg.com/react-time-ago/-/react-time-ago-6.0.1.tgz#b84bd67d796a6e220739fc6ad3d46eaa305ac3c2"