DEV Community: Tochukwu John

How To Make Your Website Faster 🔥🚀🚀

Tochukwu John — Sat, 04 Nov 2023 09:27:58 +0000

Don't you find it frustrating when a website takes an eternity to load, or when it finally does, crucial elements are mysteriously absent? Doesn't it evoke a sense of annoyance? Well, personally, I can't help but feel that way.

According to google, an optimal page load time falls within the range of 0 to 2 seconds, with 3 seconds also being deemed acceptable. Anything exceeding 3 seconds significantly elevates the chances of visitors exiting your website. Quite the eye-opener, isn't it?

In this article, I'll present several methods to enhance the speed of your website. By the end, I'll also provide an example.

Disclaimer: The following statements represent my personal opinions. Although they may contain factual information, their validity largely hinges on various contextual factors.

Just like many endeavors, achieving a goal involves a series of steps, and here are some (though not all) that I prefer to follow when striving to enhance website speed.

Identifying the performance bottlenecks.
Optimize the performance bottlenecks.
Remove unnecessary scripts, assets, animations and other superfluous elements .
Caching, optimizing queries / rendering processes.

1. Identifying the performance bottlenecks

Immediately you notice your site being slow, you would want to trouble shoot to discover what’s making it slow right? Well yes that’s the first step. To effectively troubleshoot you’ll need some tools, the ones I like to use are Chrome's lighthouse, PageSpeed, webpage test and the networks tab in the browser dev tools. In the networks tab, look for the responses with large waterfalls, those are the slow ones, with webpagetest you get a full report and how you can improve.
For a comprehensive understanding of the issues, it's advisable to conduct scans multiple times to ensure accuracy, this would help you identify what assets, scripts are causing the slow loads. In my experience, the primary culprits for poor performance often include large unoptimized images, excessive / unoptimized fonts, unused scripts, and occasionally, inefficient re-rendering practices. Now that you’ve identified all the performance bottlenecks we can proceed to optimizing them.

2. Optimizing the performance bottlenecks.
Here, it is essential to create a priority list, as some aspect of the bottlenecks may be slow, and there may be limitations on what can be improved. In my opinion your first approach should be to optimize the static images in the website so that your website has a good First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metric. In my opinion no static image should exceed 200kb at most, compress them as much as possible. In this regard, Opting for image formats such as .webp or .avif is adviceable as they offer smaller sizes while preserving a reasonable level of quality. I recommend .webp due to better browser support, Once you've completed these steps, you should begin to notice improvements.
To further enhance your site's performance, consider implementing lazy loading for your remote images. If you're concerned about layout shifts, employ a skeleton or placeholder while waiting for the images to load.
The next priority should be optimizing your fonts since they necessitate additional requests, downloads, parsing and rendering time. If you have locally hosted fonts, it's a good practice to compress them and ensure they can be cached effectively through a Content Delivery Network (CDN) during deployment. If you’re using services like Google Fonts or cdn fonts, you should consider preloading them, but be cautious not to preload all fonts as you may lose the gains you are aiming for. Only preload the essential fonts and ensure they match the fonts specified in your CSS file.
Optimizing scripts can be a complex and time-consuming task, but it's crucial, especially when dealing with business logic. Neglecting this aspect can lead to some rather humorous (or not-so-humorous) consequences!. One thing you can do is to minify your scripts, I am not going to say refactor because less code does not mean more performance, else python would be faster than C++ or rust. This phase may occasionally require a reevaluation of the logic or its implementation, potentially leading to a rewrite in a more performance-oriented language or runtime. However, caution is essential when undertaking such a task.

3. Remove unnecessary scripts, assets, animations and other stuffs .

This step is also crucial because there might be scripts and assets on your website that serve no purpose, yet you've unintentionally left them in place. Consequently, they are also downloaded by the browser increasing load times. Addressing the animations aspect can be tricky. Most times, the performance hit is as a result of the implementation and excessive usage, especially when you're using a package that requires JavaScript to execute animations. Animations possess the power to either enhance or diminish your site's overall quality. When applied thoughtfully, they elevate the UI and UX. Otherwise, they can make your site feel buggy and considerably annoying. So, why wait? Remove all those superfluous animations now! They're simply not adding any value.

4. Caching, optimizing queries / rendering processes

Now that you’ve successfully identified, optimized and removed unnecessary stuffs from your site. You can take your optimization efforts even further by refining your data fetching logic and scripts. In this context, caching plays an important role. Additionally, consider implementing loading states into your website to enhance the user experience. When deploying your site, choose a fast server with CDN capabilities to further improve performance. You might want to consider deploying to the edge for extra performance boost. However, do keep in mind that not all Node.js APIs are supported in this context, which can be a limitation. Optimizing queries / query response times involves minimizing latency. One effective way to do this is by ensuring that your server and database are physically close to each other or in the same region. This proximity reduces cold starts and minimizes the back-and-forth read and write operations, ultimately enhancing performance.
Another valuable practice is to cache assets and data that don't frequently change. This strategy allows your users to be served cached data, resulting in faster load times.
Lastly, If your server suffers from slow cold start times, consider setting up a cron job to periodically send requests to your server. This approach keeps your server "warm" and ensures it can respond promptly to requests without the delay associated with cold starts.

Whew!! I promised to show you an example 😊.
Well in this example the original site was built with Nuxt but mine was built with just Vuejs.

On the original the performance was just outright bad with excessive bandwidth consumption.
A total of 89 requests were made resulting in the download of 19.6mb of resources and the page completed loading in 44.07sec

For my site, we have a total of 27 requests, resulting in the download of 547KB of resources, and the page completes loading in just 2.05 seconds.

I could go further but I'm lazy

Here are the lighthouse scores

Before

After

Here's the link to the websites
original - Original
Optimised - Optimised

Absolutely, optimizing for speed is paramount. Avoid subjecting your visitors to a slow and frustrating user experience. Prioritize speed to guarantee a smoother and more enjoyable user journey. 🚀🚀

Happy coding 🚀 and bulaba 👍✌️

Sharing Layouts with NextJS 13 app dir

Tochukwu John — Tue, 27 Jun 2023 22:26:10 +0000

Hey there 👋👋 my fellow NextJS devs 💪, so While I was working on my side project, I noticed something about the new NextJS 13 app dir. I was like since routes can share layouts, what if I could a share layout for certain routes without affecting the URL? 🤔. I was sure this wasn’t possible till I visited the docs and found an interesting section on route-groups 😇😊.

So basically, this allows you to define multiple routes by wrapping a folder's name in parenthesis: (folderName) and as a result when you define a layout.js/tsx for this folder, all sub folders/routes would inherit and share the layout. 😲😲

More info here - Route Groups | Next.js

This is especially useful if you have several segments of your site that share similar layouts. Instead of repeating layouts everywhere 🤦‍♂️, you can make use of a route group instead.

To showcase this, I've gone ahead to create a demo-app, you can find the GitHub repo here: Github - Route Group

Inside the app folder
I added two route-groups

onboarding
authenticated

Each with it’s own routes

Inside the route-group folders, there is a layout.tsx file bearing the layout that would be shared by all the routes in the folder, which means components that are placed in the layout.tsx files are not re-rendered when navigating across pages.

From the code snippet above, the <Navigation/> component would not be re-rendered when navigating and would maintain its state when navigating.

To further prove this I added a <RouteProof /> component to the (authenticated) layout.

The <RouteProof /> is just a component that animates up and down, and since it is in the layout.tsx file it is not re-rendered on page navigation.

To view this in full. Here's the deployed site URL: click here

P.S: the site is not responsive as this is just a demo. 😊

happy coding 🚀🚀

How to Deploy Your React App to Vercel.

Tochukwu John — Tue, 14 Mar 2023 15:02:40 +0000

So you have built your project, whatever it may be, using React, and feeling confident, you decide to deploy it and show it to the world😊. But you have no idea how to do that?🤔.
In this article, you will learn just that.
There are numerous options available for hosting your React app, including but not limited to:

Vercel
Netlify
GitHub Pages
Render and so on.

In this article, we'll focus solely on Vercel, based on my personal experience, it's the best and most user-friendly option.
So, let's dive into it!😊

To deploy your React App to Vercel, simply follow these steps:

Head over to Vercel's sign up page Here. Once you arrive, you will see a page similar to the one below
As a beginner, simply click on 'Hobby', enter your name or preferred alias, and click on 'Continue' as demonstrated below.

After doing that, You will be prompted to choose your Git provider or to continue with your Email as shown below.

Go ahead and click on 'Connect to GitHub', 'GitLab', or 'Bitbucket'. Since we'll be using GitHub, proceed to click on 'Continue with GitHub'. You should then see a pop-up similar to this

If you already have a GitHub account, proceed to sign in. If not, go ahead and create an account.
After signing in, you will be redirected to your Vercel Dashboard, which will look something like this. However, since you are a new user, your dashboard will be empty.

To get started, click on the Add New button, which will display a dropdown menu. From there, select Project. This will take you to a new page where you can view all the projects in your GitHub repository, as shown below.

After clicking on 'Import', you will be taken to a new page where you can configure your deployment settings. However, Vercel is so awesome that it automatically configures everything for you, including your framework, so you don't have to worry about it. Just go ahead and click on deploy as shown below.

Clicking on 'Deploy' will initiate the deployment process automatically. Please wait for it to complete. Once it's done, you'll be redirected to a page that displays a congratulatory message, along with a preview of how your page looks. Click on the preview, and you'll be taken to your project's Live site.

Congratulations 🚀🚀🎊🎉🎉, you have successfully deployed your project to Vercel. It's time to show off your hard work to the world! 😋🚀

Like what you just read? Follow me on Twitter

How to remove duplicate elements in an Array in JavaScript.

Tochukwu John — Thu, 23 Feb 2023 23:22:40 +0000

So I came across this problem where I had an array consisting of multiple elements in the array and some elements were duplicated. After much research and brain-storming, I found 3 ways to remove duplicate elements from an array.
They are:

using forEach() with the includes() array methods.
using filter() with the indexOf() methods.
using Set() method.

Let's get started and get our hands dirty and see how we can do this😊:

1.) Using forEach() method with the includes() method

The forEach method iterates over an array and calls a function on each element in the array. It is not executed for empty elements.
The includes() method returns true if an array contains a specified value. It returns false if the value is not found. Therefore, it is case sensitive.
So how do we combine them to do what we want i.e. remove duplicate elements?

first let's declare an array and put duplicate elements in it.

let testArray = ["hey", "hello", "hola", "hello", "hey", "hola"]

let's declare another array that would hold the unique values

let cleanArray = []

let's run our loop

let testArray = ["hey", "hello", "hola", "hello", "hey", "hola"]

let cleanArray = []

testArray.forEach(element => {
    if(!cleanArray.includes(element)){
        cleanArray.push(element)
    }
})

console.log(cleanArray)

OR

let testArray = ["hey", "hello", "hola", "hello", "hey", "hola"]

let cleanArray = []

testArray.forEach(element => {
    if(cleanArray.includes(element)){
        return
    }
    cleanArray.push(element)
})

console.log(cleanArray)

Here's our Output

[ 'hey', 'hello', 'hola' ]

Both of them produces the same result. The first one pushes elements into the cleanArray variable only when the includes() method evaluates to false while in the second, the return stops the execution of the element when true and only pushes elements that evaluates to false.

2.) Using the filter() method with indexOf() method

The filter() method creates a new array filled with elements that pass a test provided by a function. It does not execute the function for empty elements, and it does not change the original array, rather it creates a new array from the original array.
The indexOf() method returns the first index (position) of a specified value. It returns -1 if the value is not found. It starts from a specified index and searches from left to right.
So let's see how we can do this:

we define our testArray, then we use the filter() method to get the elements whose indexes match their indexOf values, since filter() returns a new array we can capture it in our cleanArray variable.

let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = testArray.filter((element, index) => {
    return testArray.indexOf(element) === index
})

console.log(cleanArray)

Here's our Output

[ 'hey', 'hello', 'hola' ]

But what if we want to get the duplicate instead?
Just modify our condition to get the elements whose indexes does not match their indexOf values, e.g.

let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = testArray.filter((element, index) => {
    return testArray.indexOf(element) !== index
})

console.log(cleanArray)

And we will get the duplicates as our Output

[ 'hello', 'hey' ]

3.) Using the JavaScript Set()

A JavaScript Set is a collection of unique values. Each value can only occur once in a set. Thus, it can hold any value of any data type.
To do this, we need to:

Define our testArray, and call the Set() method on the testArray but oops that results in an Object not an Array😔 as shown below.

let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = new Set(testArray)

console.log(cleanArray) //Set { 'hey', 'hello', 'hola' }

To fix this, we can use two ways which are

spread the new Set() in an array

let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = [...new Set(testArray)]

console.log(cleanArray) //[ 'hey', 'hello', 'hola' ]

OR

use the Array constructor to generate an array from the Set() method

let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = Array.from(new Set(testArray))

console.log(cleanArray) //[ 'hey', 'hello', 'hola' ]

Feel free to pick any method that works for you and satisfies your needs. Personally, I prefer to use Set because the other two are basically calling a for loop in a for loop which heavily increases how long the algorithms are going to take and using the set() method is slightly faster.
There may be other ways to do this though😊.

if you like such content follow me on twitter @Headbwoi
Thank You.

Getting started with React.js with Typescript using vite.js⚡

Tochukwu John — Sun, 19 Feb 2023 02:08:49 +0000

In 2023, React is still one of the best ways to build user interfaces, despite all the frameworks that have pop up in the last few months promising performance improvements and good Developer experience, React still remains the OG, the King of UI because of its ginormous community, ease of use, the fact that it is "just JavaScript", unlimited supporting packages and integrations that still makes it the go to means for building user interfaces in 2023🔥. That was a lot to take in right? 😊
So let's get started by learning what these technologies are😊.

what is React?

React is a JavaScript library for building interactive user interfaces Developed by Facebook and maintained by it's awesome open-source community members. In React, there are two ways of writing React code, Using the infamous Class Components or the beloved Functional Components, the latter is the recommended way of using React by the docs React Docs.

what is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. It helps you to catch silly bugs that can break your code in production, it adds a strongly typed system on top of JavaScript resulting in more lines of code but it helps a lot with code maintenance and readability.

what is Vite?

Vite (the French word for "quick", pronounced /vit/, like "veet") is a build tool that provides a faster and leaner development experience for modern web projects. It consists of two major parts:

A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite doesn't need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand, thus making it significantly faster than CRA.
In Conclusion, Vite is faster, lighter and more enjoyable than other build tools for React.

Getting Started

To get started with React and Typescript with Vite, you will have to pass some requirements.

Good knowledge of ES6+ syntax and logic.
you know your way around JavaScript i.e. you have built 2 or more projects such as Todo App, Movies App or any app that consumes an API and displays things on the page based on certain conditions.
You have Node.js installed on your computer. from v17.0.0 upwards. To download Node.js go to Nodejs Site and download the LTS (Long Term Support) version.
A node package manager either NPM, Yarn or Pnpm will work perfectly. The preferred version of NPM should be v8.1.0 and above.

Once you have checked these requirements, you can now follow these steps:

First, open your terminal. on windows, type 🪟 + R then type cmd on the popup and click enter, that will open up a terminal to your root directory.
Navigate to the folder you want to create your app in. once you are there, then type in the following command:

with NPM:
```
npm create vite@latest
```
with yarn:
```
yarn create vite
```
with PNPM:
```
pnpm create vite```
```

Click enter to proceed. you will be prompted to enter the name of the project. enter the name of your choice e.g. "my-project-name" .

when you've done that, click enter.
1. it will ask you to select a framework, use the arrow keys to move up and down and enter to select.
2. Select React, then select Typescript
3. it will scaffold your project.
  
  Now you can run the following commands:

cd my-project-name

moves you into "my-project-name" folder where the app was created.

npm install

installs all the files and dependencies of React and Typescript.

npm run dev

starts the application in development mode

You can now edit the App.tsx file with the code editor of your choice and instantly see your changes in the browser without refreshing thanks to the Hot Module Replacement (HMR) built into Vite .

And that is how you setup React with Typescript using Vite⚡.

Thanks you.