As you may know, not long ago, I started my personal blog. Instead of opting for the traditional route of using the popular for blogs, I decided to embrace new technologies. My choice landed on Next.js and a NoSQL-type database. WordPress CMS In this article, I cover: Why I chose Next.js and a NoSQL database Hosting Platform for Next.JS Project Low performance of the initial deployment Steps I took to improve performance Magic formula to get 100 score Why I chose Next.js and a NoSQL database During my development, I asked myself, "Why did I choose the harder path?" Launching a Wordpress blog takes just 15-30 minutes. However, there are several reasons why I selected this tech stack. Why Next.JS : Next.js offers server-side rendering (SSR) and automatic code splitting, resulting in faster initial page loads and better overall performance. Improved Performance : With SSR capabilities, Next.js enables search engines to crawl and index your website effectively, improving its search engine optimization (SEO). SEO-Friendly : Next.js provides a straightforward routing system, making it easier to handle complex routing scenarios and create dynamic routes. Simplified Routing : Next.js seamlessly integrates with the React ecosystem, allowing developers to leverage existing React components and libraries, saving time and effort. React Ecosystem Integration : Next.js supports serverless deployment, making it effortless to scale and deploy your application to various platforms. Serverless Deployment Why NoSQL Databases : NoSQL databases offer a flexible schema, allowing for easy adaptation to evolving project requirements without strict data structure constraints. Flexible Schema : NoSQL databases excel at horizontal scalability, meaning they can efficiently handle high data volumes and traffic loads as projects grow. Scalability : NoSQL databases are designed for fast read and write operations, making them suitable for applications requiring real-time data processing or large-scale data retrieval. High Performance : NoSQL databases are well-suited for handling unstructured or semi-structured data types, such as JSON, making them ideal for projects dealing with diverse data formats. Handling Unstructured Data : NoSQL databases typically employ distributed architecture, ensuring data redundancy and fault tolerance, which enhances reliability and availability. Distributed Architecture Hosting Platform for Next.JS Project Since my blog was ready, I had to find a hosting solution. Initially, I decided to use my virtual server as it seemed sufficient for a simple blog, and I didn't explore other platforms. Setting up everything on Ubuntu server proved to be a bit challenging, but I managed to get my blog up and running. If you're interested in learning how to deploy a Next.js project on Ubuntu, let me know. However, my joy was short-lived. When I checked the performance using Lighthouse, I was shocked to see the scores: 35 for mobile and 55 for desktop. It was definitely not the outcome I had anticipated. Low Performance of Initial Deployment I began investigating the cause of the slow performance and soon discovered that the issue lied with . Server-Side Rendering (SSR) is a web development technique where the server generates the HTML content for a web page and sends it to the client. The server processes the request and dynamically renders the page with data, styles, and scripts, delivering a fully rendered HTML page to the client. SSR Unfortunately, my Ubuntu server lacked the necessary power to handle this task, resulting in sluggish performance. Steps I Took to Improve Performance Static Site Generation (SSG) I started thinking about what I could do with the current server to make loading faster. The good thing for me was that Next.js supports many types of rendering, including . You can learn more about it here: . Static Site Generation (SSG) https://nextjs.org/learn/foundations/how-nextjs-works/rendering is a method of generating static HTML pages at build time, rather than dynamically rendering them on each request. In SSG, the website's content is fetched and rendered during the build process, resulting in a collection of static HTML files that can be served to clients. Static Site Generation (SSG) During the build, the static site generator pulls data from various sources, such as markdown files, APIs, or databases, and compiles it into HTML pages. These pages can include dynamic data and interactive components, but the rendering occurs beforehand, allowing for faster and more efficient content delivery. The generated static files can be hosted on a simple web server or a content delivery network (CDN) without the need for server-side processing. This approach offers several benefits, including improved performance, enhanced security, and reduced infrastructure costs. To build the static version of my Next.js project, I made adjustments to a few files: and . package.json next.config.js In package.json, I added the following code to the script section: "build": "next build && next export" In next.config.js I added the following code: /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, images: {    unoptimized: true,  } } module.exports = nextConfig To generate the static website, simply run the following command in your terminal: npm run build or yarn run build Depending on your package manager. The static website will be generated in the " directory within your project. From there, you can copy it to any hosting platform, and your static website will be live. "out The static version of my blog helped me improve performance for desktops from on my Ubuntu server and for mobile devices from . 50 to 86 38 to 69 Optimize images Optimizing images was the next crucial step. Instead of using traditional formats like or , I converted all images to format and reduced their resolutions. I chose WebP because it is a JPG PNG WebP web image format developed by specifically designed to optimize web performance. Google utilizes a combination of lossy and lossless compression techniques to reduce file size while maintaining high image quality. By reducing file sizes, WebP images contribute to faster loading times and reduced bandwidth usage. Additionally, WebP supports transparency, making it suitable for images with transparent backgrounds, and it also enables animations. Being supported by modern browsers, WebP offers a compelling solution for web developers aiming to enhance web performance, deliver visually appealing content, and optimize user experience. WebP This optimization technique helped me improve the score for mobile devices, although it wasn't sufficient to reach a score of 100. The Hosting Platform Even for serving static files, the server plays a crucial role in content delivery. Therefore, I made the decision to migrate my project to Firebase. Once I made this transition, my score increased to 100 for both mobile and desktop devices. My Magic Formula to Get 100 Scores As you can see, my magic formula is quite simple: ;) Next.js + WebP + Firebase = 100 Even if you don't use Next.js, you still have a chance to improve your score. There are four main factors that can help you achieve this: Hosting platform Technology you use Valid, semantic, and properly structured HTML, CSS, and JS code Correct size and format of your images In my upcoming articles, I will show you how to deploy your project to Firebase and . utilize this platform for free Stay tuned! ;) Source: https://proflead.dev/posts/website-performance-score The lead image for this article was generated by HackerNoon's AI Image Generator via the prompt "a website"

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How I Improved My Website Performance Score from 35 to 100

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Tools That Made Me 10x Faster as a Web Developer

64 Stories To Learn About Firebase

A Useful Wrapper for MobX and Firebase Cloud Firestore

Access User Location with Permission Handler in Flutter

Adding Firebase Analytics to a Gatsby Project: A Beginner's Guide

5 Tools That Made Me 10x Faster as a Web Developer

64 Stories To Learn About Firebase

A Useful Wrapper for MobX and Firebase Cloud Firestore

Access User Location with Permission Handler in Flutter

Adding Firebase Analytics to a Gatsby Project: A Beginner's Guide

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps