Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nextjs v10 + tailwindcss v2 #33

Closed
wants to merge 15 commits into from
Closed

Nextjs v10 + tailwindcss v2 #33

wants to merge 15 commits into from

Conversation

rhnmht30
Copy link
Member

changes:

  • remove bootstrap, styled-components
  • add tailwindcss, postcss and autoprefixer
  • seperate folder for styles and import relevant styles
  • remove package-lock.json and .babelrc
  • new custom breakpoints

refactor:

  • convert all pages to use tailwind classes
  • add dsc colors to config
  • add global styles
  • move icons to seperate file
  • make social icons same in footer and about section
  • make icons iterable
  • make navbar sticky
  • make button background blue on hover
  • reduce border on team image on hover
  • remove unececssary react imports

fixes:

  • move layout component to _app.js to solve frequent render of navbar and footer comps.
  • font contrast and size fixes
  • fix font size of college name in sidenav
  • fix button colors
  • lazy load iframe
  • increase clickable area for footer links
  • change images initial widths to reduce cumm. layout shift in teams
  • lazy load iframe till the footer is mounted
  • lazy load react-lottie
  • load animation json asynchronously
  • reduce first js load from 195kb to 88kb tada

I have tried running lighthouse metrics with several scenarios:

  • Scenario 1: page has embed map and lottie animation (without above optimisations)

    • mobile: 48/100
    • desktop: 78/100
  • Scenario 2: page has embed map and lottie animation (with above optimisations)

    • mobile: 60/100
    • desktop: 80/100
  • Scenario 3: page has no embed map and lottie animation (with above optimisations)

    • mobile: 64/100
    • desktop: 85/100
  • Scenario 4: page has embed map and no lottie animation (with above optimisations)

    • mobile: 87/100
    • desktop: 95/100
  • Scenario 5: page has no embed map and no lottie animation (with above optimisations)

    • mobile: 92/100
    • desktop: 99/100

Verdict: Lottie animations are degrading performance more than embed maps :)
I have settled for scenario 2.

* remove bootstrap
* remove styled-components
* add tailwindcss, postcss and autoprefixer
* upgrade deps
* update _app.js and _document.js
* make folder for styles and import relevant styles
* remove package-lock.json and .babelrc
* navbar converted to tailwind
* add dsc colors to config
* add global styles
* move icons to seperate file
* improve layout component
* font contrast and size fixes
* [wip] comment pages html
* make social icons same in footer and about
* fix font size of college name in sidenav
* make icons iterable
* fix button colors
* new custom breakpoitns
* refactor the responsive values
* add join section
* make navbar sticky
* lazy load iframe
* make button background blue on hover
* increase clickable area for footer links
* change images initial widths
* reduce border on team image on hover
* remove react import
* comment notice section js
* add faqs and guildlines
* remove clutter
* defer iframe till the footer is mounted
* lazy load react-lottie
* load animation json asynchronously
* reduce first js load from 195kb to 88kb 🎉
* add keys to faqs and guildlines iterables
@rhnmht30 rhnmht30 marked this pull request as draft December 11, 2020 10:24
@rhnmht30
Copy link
Member Author

Nice, next/image doesn't work when we do next export

Possible solution:

  • Use next start, which starts the Image Optimization API, and upload that to own serverless platform.
  • Use Vercel to deploy, which supports Image Optimization. (will try this, but netlify gives short custom short links)
  • Configure a third-party loader in next.config.js.

@rhnmht30
Copy link
Member Author

rhnmht30 commented Dec 11, 2020

@goelaakash79
Copy link
Member

Can you try and deploy it again?
I guess there is some error

@goelaakash79
Copy link
Member

Okay, checked it.
Elements, paddings and margins are not the same as before. You need to fix it.

@goelaakash79
Copy link
Member

Also, look for the input focus. When the input box is clicked, the browser adds up a weird border around the element. Fix it as well.

Copy link
Member

@goelaakash79 goelaakash79 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check the UI elements, and give the same look and feel

@rhnmht30
Copy link
Member Author

Okay, checked it.
Elements, paddings and margins are not the same as before. You need to fix it.

Can you specify those elements?
They may not be exactly the same since tailwind uses rem instead of px.

@rhnmht30 rhnmht30 linked an issue Dec 11, 2020 that may be closed by this pull request
@rhnmht30
Copy link
Member Author

Maximum achievable performance score when using lottie animations

Mobile
image

Desktop
image

Desktops have a higher score because it has more resources than mobile :)

Evidence to prove that lottie animations are killing the performance.
Let's see the team's page performance, which has images but no animations.

Mobile
image

Desktop
image

Mobile scores are still less than 90 because of embedded google maps

Pretty much nothing more can be done to improve performance. 🙇🏽

add new build command to publish build
use cloudinary as default loader to fetch remote images
make image url absolute
@goelaakash79
Copy link
Member

@mayanksh99 can you please check it? Compare the live version with the PR preview.

@rhnmht30
Copy link
Member Author

Finally 🎉
Successfully deployed on Netlify!
Deploy previews are working as expected 🛩️

Also, the problem with next/image not working with netlify is solved!

Nice, next/image doesn't work when we do next export

Possible solution:

  • Use next start, which starts the Image Optimization API, and upload that to own serverless platform.
  • Use Vercel to deploy, which supports Image Optimization. (will try this, but netlify gives short custom short links)
  • Configure a third-party loader in next.config.js.

I went with the 3rd option. Using Cloudinary to fetch the remote image URLs, which are now optimized and cached as expected 🎉

@rhnmht30 rhnmht30 marked this pull request as ready for review January 21, 2021 17:29
@padmansh
Copy link
Member

Can we just load svg for mobiles rather than loading complete lottie animation ?

@rhnmht30
Copy link
Member Author

rhnmht30 commented Apr 8, 2021

closing due to inactivity.
To solve deployment issue refer to: https://rhnmht30.dev/blog/next-image-with-netlify

@rhnmht30 rhnmht30 closed this Apr 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve performance and decrease bundle size
3 participants