NextJs Optimisation Techniques

[ArafatAbdussalam]

What is your article idea?

This article entails how to improve user interaction using Interaction to Next Paint, a metric for measuring responsiveness of web applications. It explains one of the core vitals of web performance.

What are the objectives of your article?

Content Outline:

• Introduction
• Overview of web performance
• Overview of User Interaction
• What is Interaction to Next Paint (INP)?
• Measuring INP
• Understanding INP Score
• Causes of Low INP Score
• How to Improve INP Score
• Improving INP Score in NextJs using Hydration and Suspense
• Conclusion

What are the objectives of your article?

Web performance, User Interaction, Latency, Responsiveness

What is your expertise as a developer or writer?

Intermediate

What type of post is this?

Best Practices

Terms & Conditions

• I have read the Write for the Community program guidelines.

[ArafatAbdussalam]

Hello @Theodore-Kelechukwu-Onyejiaku I will like you to give your opinion on this proposed article.

Thanks.

[Theodore-Kelechukwu-Onyejiaku]

Will get back to you on this soon. I am thinking of making this topic to include other Next.js optimization techniques. Please hold on.

[Theodore-Kelechukwu-Onyejiaku]

Hi @ArafatAbdussalam ,

I am back! How about we talk about "Next.js Optimization Techniques". Please as part of the techniques, we would love it if you include "URL redirects".

This is an in-house requested content, therefore it should be very outstanding 🙂.

Please let me know if you are willing to proceed. Thank you.

[ArafatAbdussalam]

Alright. Accepted.

Does the article need code examples?

[Theodore-Kelechukwu-Onyejiaku]

Sure, it does. That is one of the ingredients of a great article.

[Theodore-Kelechukwu-Onyejiaku]

Here are examples:

1. https://www.freecodecamp.org/news/next-js-performance-optimization/
2. Here is one I wrote for Turing which ranks well: https://www.turing.com/kb/optimizing-build-performance-in-nextjs

Please let me know if you are willing to proceed.

[ArafatAbdussalam]

Alright. I will create an outline proposal.

[Theodore-Kelechukwu-Onyejiaku]

Thank you. I will be waiting.

[ArafatAbdussalam]

NextJs Optimisation Techniques

• Introduction
• ⁠Overview of User Experience
  • Speed
  • ⁠User Interactivity
  • Visual stability
• ⁠Factors Affecting Web Performance
  • ⁠Multimedia file size
  • ⁠Network Request
  • ⁠Memory usage
  • URL Redirect
• Optimisation Techniques in NextJs
  • ⁠Display images with built-in Image component
  • ⁠Enhance video display with built-in Video component
  • ⁠Eliminate external fonts download
  • Amplify search engine with Metadata
  • Control routing with Redirect
  • ⁠Implement lazy loading strategies
• ⁠Measuring web performance
  • ⁠Core Web Vitals
  • ⁠Observability and Monitoring
• ⁠Conclusion

@Theodore-Kelechukwu-Onyejiaku

[Theodore-Kelechukwu-Onyejiaku]

Please procceed. I will let you know if I need anything else.

[ArafatAbdussalam]

Hi @Theodore-Kelechukwu-Onyejiaku

Here is a draft of the article:

NextJs Optimisation Techniques

I will like to request for your feedback.

[Theodore-Kelechukwu-Onyejiaku]

Hi @ArafatAbdussalam ,

One last thing. please include images and a table diagram(s) to your work for SEO.

[ArafatAbdussalam]

Thanks for the feedback. I have done that.

[ArafatAbdussalam]

blur only

with dataURL only

with blurDataURL

dynamicui

[Theodore-Kelechukwu-Onyejiaku]

This has been published. Thank you for your contribution! 🚀