Reactgo: Explore AMP - learnings for performance

[choonkending]

What

https://github.com/ampproject

We should look at the amp project to see if we can learn + utilise the best practices recommended by AMP

HTML

• Add a canonical link
• Maybe a structured data

JS

[psimyn]

also https://github.com/GoogleChrome/lighthouse - more actionable/impactful steps without needing to setup/dev/serve completely different pages.

I'm still on the fence for AMP vs just making the actual site faster

[choonkending]

Yep - good point. I think we should look at this to decide what we can apply to our site.

Using amp itself is too imposing as part of the boilerplate imo

[choonkending]

What we can learn from AMP (I'm actually at a conference now lol):

• Efficient font loading ** We should look into this - maybe split out as a separate card to get us into position for next
• Inline CSS
  
  
  
  • Inline important styles (above the fold), defer the rest
  
  
• Static layout
• Content prioritization
• DOM mutation batching (
  
  
  
  • DOM reads trigger style recalc
  
  
  • Goal: 1 paint per frame
  
  
• Pre-connect, pre-fecth, pre-render
  
  
  
  • browser prefetching
  
  
  • Leverage Page Visibility API
  
  

[ZeroCho]

Lighthouse is very good for checking speed and improving it. And I found that my blog got only 38 score...

[caranicas]

Hey Guys. I've been pretty quiet, but lurking. My new job is all in on web components, so I haven't been keeping up with React. If you haven't checked out Polymer it is just about ready for prime time with 2.0.

But I digress.. This issue caught my eye because i was at the chrome dev summit and saw this talk if you are on the fence about AMP, I think this is compelling enough to change your mind.

[psimyn]

thanks @caranicas! giving it a watch. I've been having a play with polymer as well, mainly digging through the Polymer Shop app. If you have any good resources/examples let me know :)

wow there are so many Pauls doing Google Frontend stuff

[caranicas]

I built this generator to scaffold out all the different flavors of templates. as for docs google dev primers and webcomponents, are probably the best place to get started for general info. Rob Doddson on medium and polycasts on youtube. but you need to take the early ones with a grain of salt because things have changed. This component search tool is showcase for the growing component options and libraries.

We are working on app generator that meets some of our specific company needs and quite a few components, some of which should transitioning to open source soon.

[ZeroCho]

Awesome posting related with PWA

[ZeroCho]

@choonkending @psimyn I got 94 score from lighthouse after adding service worker and manifest.json. (It was 38 point before adding them) I'll share my code as PR next month!